Merge remote-tracking branch 'remotes/angular.io/master'
# Conflicts: # public/docs/ts/latest/cookbook/_data.json # tools/api-builder/angular.io-package/templates/class.template.html
This commit is contained in:
Zhimin YE (Rex)
commit
466f69d30a
12
gulpfile.js
12
gulpfile.js
|
|
@ -615,7 +615,13 @@ gulp.task('_harp-compile', function() {
|
|||
});
|
||||
|
||||
gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-boilerplate'], function() {
|
||||
return docShredder.shred( _devguideShredOptions);
|
||||
// Split big shredding task into partials 2016-06-14
|
||||
var examplePaths = globby.sync(EXAMPLES_PATH+'/*/', {ignore: ['/node_modules', 'typings/', '_protractor/']});
|
||||
var promise = Promise.resolve(true);
|
||||
examplePaths.forEach(function (examplePath) {
|
||||
promise = promise.then(() => docShredder.shredSingleExampleDir(_devguideShredOptions, examplePath));
|
||||
});
|
||||
return promise;
|
||||
});
|
||||
|
||||
gulp.task('_shred-devguide-shared-jade', ['_shred-clean-devguide-shared-jade', '_copy-example-boilerplate'], function() {
|
||||
|
|
@ -980,7 +986,7 @@ function devGuideExamplesWatch(shredOptions, postShredAction) {
|
|||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**',
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**', '**/typings/**',
|
||||
'**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
|
||||
var files = globby.sync( [includePattern], { ignore: ignoreThese });
|
||||
gulp.watch([files], {readDelay: 500}, function (event, done) {
|
||||
|
|
@ -996,7 +1002,7 @@ function devGuideSharedJadeWatch(shredOptions, postShredAction) {
|
|||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.jadeDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_fragments/**']});
|
||||
var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_examples/**', '**/_fragments/**']});
|
||||
gulp.watch([files], {readDelay: 500}, function (event, done) {
|
||||
gutil.log('Dev Guide jade file changed')
|
||||
gutil.log('Event type: ' + event.type); // added, changed, or deleted
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!tsconfig.json
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
},
|
||||
"compileOnSave": true
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- #docregion loaddart -->
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
<!-- #enddocregion loaddart -->
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -44,5 +44,11 @@
|
|||
"title": "TypeScript to JavaScript",
|
||||
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
|
||||
"hide": true
|
||||
},
|
||||
|
||||
"visual-studio-2015": {
|
||||
"title": "Visual Studio 2015 QuickStart",
|
||||
"intro": "Use Visual Studio 2015 with the QuickStart files",
|
||||
"hide": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!= partial("../../../_includes/_ts-temp")
|
||||
|
|
@ -39,6 +39,11 @@
|
|||
"ts-to-js": {
|
||||
"title": "TypeScript to JavaScript",
|
||||
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
|
||||
},
|
||||
|
||||
"visual-studio-2015": {
|
||||
"title": "Visual Studio 2015 QuickStart",
|
||||
"intro": "Use Visual Studio 2015 with the QuickStart files"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!= partial("../../../_includes/_ts-temp")
|
||||
|
|
@ -38,5 +38,10 @@
|
|||
"ts-to-js": {
|
||||
"title": "从TypeScript到JavaScript",
|
||||
"intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript"
|
||||
},
|
||||
|
||||
"visual-studio-2015": {
|
||||
"title": "Visual Studio 2015 快速开始",
|
||||
"intro": "使用Visual Studio 2015快速开始"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
include ../_util-fns
|
||||
|
||||
<a id="top"></a>
|
||||
:marked
|
||||
Some developers prefer Visual Studio as their Interactive Development Environment (IDE).
|
||||
|
||||
This cookbook describes the steps required to set up and use the
|
||||
Angular 2 QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
There is no *live example* for this cookbook because it describes Visual Studio, not the application.
|
||||
.l-main-section
|
||||
<a id="asp-net-4"></a>
|
||||
:marked
|
||||
## ASP.NET 4.x Project
|
||||
|
||||
The steps for setting up the QuickStart files with an ASP.NET 4.x project in
|
||||
Visual Studio 2015 are as follows:
|
||||
|
||||
:marked
|
||||
- [Prerequisite](#prereq): Install Node.js
|
||||
- [Step 1](#download): Download the QuickStart files
|
||||
- [Step 2](#setup-vs): Set up Visual Studio for TypeScript
|
||||
- [Step 3](#create-project): Create the Visual Studio ASP.NET project
|
||||
- [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder
|
||||
- [Step 5](#restore): Restore required packages
|
||||
- [Step 6](#edit-config): Edit the TypeScript configuration file
|
||||
- [Step 7](#build-and-run): Build and run the app
|
||||
|
||||
.l-main-section
|
||||
h2#prereq Prerequisite: Node.js
|
||||
:marked
|
||||
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
|
||||
if they are not already on your machine.
|
||||
.l-sub-section
|
||||
:marked
|
||||
**Verify that you are running node version `4.4.x` - `5.x.x`, and npm `3.x.x`**
|
||||
by running `node -v` and `npm -v` in a terminal/console window.
|
||||
Older versions produce errors.
|
||||
|
||||
.l-main-section
|
||||
h2#download Step 1: Download the QuickStart files
|
||||
:marked
|
||||
[Download the QuickStart source](https://github.com/angular/quickstart)
|
||||
from github. If you downloaded as a zip file, extract the files.
|
||||
|
||||
.l-main-section
|
||||
h2#setup-vs Step 2: Set up Visual Studio for TypeScript
|
||||
:marked
|
||||
Ensure you have the latest version of Visual Studio 2015 installed.
|
||||
Then open Visual Studio and install the latest set of TypeScript tools as follows:
|
||||
|
||||
* Open `Tools` | `Extensions and Updates`.
|
||||
* Select `Online` in the tree on the left.
|
||||
* Search for `TypeScript` using the search box in the upper right.
|
||||
* Select the most current available TypeScript version.
|
||||
* Download and install the package.
|
||||
|
||||
.l-main-section
|
||||
h2#create-project Step 3: Create the Visual Studio ASP.NET project
|
||||
|
||||
:marked
|
||||
Create the ASP.NET 4.x project as follows:
|
||||
|
||||
* In Visual Studio, select `File` | `New` | `Project` from the menu.
|
||||
* In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`.
|
||||
* Select the `ASP.NET Web Application` template, give the project a name, and click OK.
|
||||
* Select the desired ASP.NET 4.5.2 template and click OK.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
In this cookbook we'll select the `Empty` template with no added folders,
|
||||
no authentication and no hosting. Pick the template and options appropriate for your project.
|
||||
|
||||
.l-main-section
|
||||
h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
|
||||
|
||||
:marked
|
||||
Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file.
|
||||
Include the files in the Visual Studio project as follows:
|
||||
|
||||
* Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.
|
||||
* Right-click on each folder/file to be included in the project and select `Include in Project`.
|
||||
Minimally, include the following folder/files:
|
||||
* app folder (answer *No* if asked to search for TypeScript Typings)
|
||||
* styles.css
|
||||
* index.html
|
||||
* package.json
|
||||
* tsconfig.json
|
||||
* typings.json
|
||||
|
||||
.l-main-section
|
||||
h2#restore Step 5: Restore the required packages
|
||||
:marked
|
||||
Restore the packages required for an Angular application as follows:
|
||||
|
||||
* Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`.
|
||||
<br>This uses `npm` to install all of the packages defined in the `package.json` file.
|
||||
It may take some time.
|
||||
* If desired, open the Output window (`View` | `Output`) to watch the npm commands execute.
|
||||
* Ignore the warnings.
|
||||
* When the restore is finished, a message should say: `npm command completed with exit code 0`.
|
||||
* Click the `Refresh` icon in Solution Explorer.
|
||||
* **Do not** include the `node_modules` folder in the project. Let it be a hidden project project folder.
|
||||
.alert.is-important
|
||||
:marked
|
||||
An error such as "*@angular/compiler is not in the npm registry*" suggests that Visual Studio 2015
|
||||
is using an older version of npm. Update to the latest installed version of npm:
|
||||
|
||||
* `Tools` | `Options` to open the Options dialog.
|
||||
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
|
||||
* On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
|
||||
use the external tools (such as npm) found in your path before using its own version of the external tools.
|
||||
* Click OK to close the dialog.
|
||||
* Restart Visual Studio for this change to take effect.
|
||||
|
||||
.l-main-section
|
||||
h2#edit-config Step 6: Edit the TypeScript configuration file
|
||||
:marked
|
||||
For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file
|
||||
as shown here.
|
||||
|
||||
+makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')
|
||||
|
||||
:marked
|
||||
After making this change, **exit** Visual Studio and reopen it to reload the project.
|
||||
|
||||
.l-main-section
|
||||
h2#build-and-run Step 7: Build and run the app
|
||||
|
||||
:marked
|
||||
Click the Run button or press F5 to build and run the application.
|
||||
|
||||
This launches the default browser and runs the QuickStart sample application.
|
||||
|
||||
Try editing any of the project files. *Save* and refresh the browser to
|
||||
see the changes.
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
Compiler errors such as "*Property ‘map’ does not exist on type ‘Observable<Response>’*" and
|
||||
"*Observable cannot be found*" indicate an old release of Visual Studio.
|
||||
Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518).
|
||||
|
||||
You'll be asked to replace the file
|
||||
code-example.
|
||||
c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js
|
||||
|
||||
:marked
|
||||
This operation requires admin privileges.
|
||||
|
||||
.l-main-section
|
||||
h2#routing Note on Routing Applications
|
||||
:marked
|
||||
If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*.
|
||||
Look at the address bar. Does it contain a navigation url (a "deep link")?
|
||||
We'll have to configure the server to return `index.html` for these requests.
|
||||
Until we do, remove the navigation path and refresh again.
|
||||
|
||||
|
|
@ -24,18 +24,15 @@ div(layout="row" layout-xs="column" class="ng-cloak")
|
|||
{% for member in doc.statics %}{% if not member.internal %}
|
||||
pre(class="prettyprint no-bg-with-indent")
|
||||
a(class="code-anchor" href="#{$ member.name $}-anchor")
|
||||
code(class="code-background api-doc-code").
|
||||
{$ member.name | indent(6, false) | trim $}
|
||||
code(class="api-doc-code").
|
||||
{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
|
||||
code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
|
||||
code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
|
||||
{% endif %}{% endfor %}
|
||||
{% endif %}
|
||||
{% if doc.constructorDoc.name %}
|
||||
div(layout="column")
|
||||
pre(class="prettyprint no-bg-with-indent")
|
||||
a(class="code-anchor" href="#constructor")
|
||||
code(class="code-background api-doc-code").
|
||||
{$ doc.constructorDoc.name $}
|
||||
code(class="code-background api-doc-code") {$ doc.constructorDoc.name $}
|
||||
code(class="api-doc-code").
|
||||
{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
|
||||
{% endif %}
|
||||
|
|
@ -44,10 +41,8 @@ div(layout="row" layout-xs="column" class="ng-cloak")
|
|||
{% for member in doc.members %}{% if not member.internal %}
|
||||
pre(class="prettyprint no-bg-with-indent")
|
||||
a(class="code-anchor" href="#{$ member.name $}-anchor")
|
||||
code(class="code-background api-doc-code").
|
||||
{$ member.name | indent(6, false) | trim $}
|
||||
code(class="api-doc-code").
|
||||
{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
|
||||
code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
|
||||
code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
|
||||
{% endif %}{% endfor %}
|
||||
{% endif %}
|
||||
p(class="selector endParens")
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ var del = require('del');
|
|||
var Dgeni = require('dgeni');
|
||||
var _ = require('lodash');
|
||||
var globby = require('globby');
|
||||
var ignoreDirs = ['**/node_modules/**', '**/dist/**', '**/typings/**'];
|
||||
|
||||
var shred = function(shredOptions) {
|
||||
try {
|
||||
|
|
@ -22,6 +23,23 @@ var shred = function(shredOptions) {
|
|||
}
|
||||
}
|
||||
|
||||
var shredSingleExampleDir = function(shredOptions, fileDir) {
|
||||
shredOptions = resolveShredOptions(shredOptions);
|
||||
var relativePath = path.relative(shredOptions.examplesDir, fileDir);
|
||||
var examplesDir = path.join(shredOptions.examplesDir, relativePath);
|
||||
var fragmentsDir = path.join(shredOptions.fragmentsDir, relativePath);
|
||||
var options = {
|
||||
includeSubdirs: true,
|
||||
examplesDir: examplesDir,
|
||||
fragmentsDir: fragmentsDir
|
||||
}
|
||||
var cleanPath = path.join(fragmentsDir, '*.*')
|
||||
return del([ cleanPath, '!**/*.ovr.*']).then(function(paths) {
|
||||
// console.log('Deleted files/folders:\n', paths.join('\n'));
|
||||
return shred(options);
|
||||
});
|
||||
}
|
||||
|
||||
var shredSingleDir = function(shredOptions, filePath) {
|
||||
shredOptions = resolveShredOptions(shredOptions);
|
||||
var fileDir = path.dirname(filePath);
|
||||
|
|
@ -72,6 +90,7 @@ var buildShredMap = function(shredMapOptions) {
|
|||
|
||||
module.exports = {
|
||||
shred: shred,
|
||||
shredSingleExampleDir: shredSingleExampleDir,
|
||||
shredSingleDir: shredSingleDir,
|
||||
shredSingleJadeDir: shredSingleJadeDir,
|
||||
buildShredMap: buildShredMap
|
||||
|
|
@ -107,13 +126,14 @@ function createShredExamplePackage(shredOptions) {
|
|||
|
||||
// HACK ( next two lines) because the glob function that dgeni uses internally isn't good at removing 'node_modules' early
|
||||
// this just uses globby to 'preglob' the include files ( and exclude the node_modules).
|
||||
var nmPattern = '**/node_modules/**';
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
|
||||
|
||||
console.log(`Shredding ${includeFiles.length} files inside ${shredOptions.examplesDir}`);
|
||||
|
||||
readFilesProcessor.sourceFiles = [ {
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
include: includeFiles ,
|
||||
exclude: [ '**/node_modules/**', '**/typings/**', '**/packages/**', '**/build/**'],
|
||||
exclude: [ '**/node_modules/**', '**/dist/**', '**/typings/**', '**/packages/**', '**/build/**'],
|
||||
// When calculating the relative path to these files use this as the base path.
|
||||
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
|
||||
basePath: options.examplesDir
|
||||
|
|
@ -159,8 +179,7 @@ function createShredJadePackage(shredOptions) {
|
|||
|
||||
// HACK ( next two lines) because the glob function that dgeni uses internally isn't good at removing 'node_modules' early
|
||||
// this just uses globby to 'preglob' the include files ( and exclude the node_modules).
|
||||
var nmPattern = '**/node_modules/**';
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
|
||||
|
||||
readFilesProcessor.sourceFiles = [ {
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
|
|
@ -212,8 +231,7 @@ var createShredMapPackage = function(mapOptions) {
|
|||
|
||||
// HACK ( next two lines) because the glob function that dgeni uses internally isn't good at removing 'node_modules' early
|
||||
// this just uses globby to 'preglob' the include files ( and exclude the node_modules).
|
||||
var nmPattern = '**/node_modules/**';
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
|
||||
var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
|
||||
|
||||
|
||||
readFilesProcessor.sourceFiles = [ {
|
||||
|
|
|
|||
Loading…
Reference in New Issue