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) 2016-06-15 12:01:54 +01:00
commit 466f69d30a
12 changed files with 234 additions and 22 deletions

View File

@ -615,7 +615,13 @@ gulp.task('_harp-compile', function() {
}); });
gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-boilerplate'], 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() { 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. // removed this version because gulp.watch has the same glob issue that dgeni has.
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*'); // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) { // 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/**']; '**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
var files = globby.sync( [includePattern], { ignore: ignoreThese }); var files = globby.sync( [includePattern], { ignore: ignoreThese });
gulp.watch([files], {readDelay: 500}, function (event, done) { 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. // removed this version because gulp.watch has the same glob issue that dgeni has.
// var excludePattern = '!' + path.join(shredOptions.jadeDir, '**/node_modules/**/*.*'); // var excludePattern = '!' + path.join(shredOptions.jadeDir, '**/node_modules/**/*.*');
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) { // 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) { gulp.watch([files], {readDelay: 500}, function (event, done) {
gutil.log('Dev Guide jade file changed') gutil.log('Dev Guide jade file changed')
gutil.log('Event type: ' + event.type); // added, changed, or deleted gutil.log('Event type: ' + event.type); // added, changed, or deleted

View File

@ -0,0 +1 @@
!tsconfig.json

View File

@ -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
}

View File

@ -6,8 +6,8 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- #docregion loaddart --> <!-- #docregion loaddart -->
<script async src="main.dart" type="application/dart"></script> <script defer src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script> <script defer src="packages/browser/dart.js"></script>
<!-- #enddocregion loaddart --> <!-- #enddocregion loaddart -->
</head> </head>
<body> <body>

View File

@ -44,5 +44,11 @@
"title": "TypeScript to JavaScript", "title": "TypeScript to JavaScript",
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript", "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
"hide": true "hide": true
},
"visual-studio-2015": {
"title": "Visual Studio 2015 QuickStart",
"intro": "Use Visual Studio 2015 with the QuickStart files",
"hide": true
} }
} }

View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

View File

@ -39,6 +39,11 @@
"ts-to-js": { "ts-to-js": {
"title": "TypeScript to JavaScript", "title": "TypeScript to JavaScript",
"intro": "Convert Angular 2 TypeScript examples into ES5 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"
} }
} }

View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

View File

@ -38,5 +38,10 @@
"ts-to-js": { "ts-to-js": {
"title": "从TypeScript到JavaScript", "title": "从TypeScript到JavaScript",
"intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript" "intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript"
},
"visual-studio-2015": {
"title": "Visual Studio 2015 快速开始",
"intro": "使用Visual Studio 2015快速开始"
} }
} }

View File

@ -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.

View File

@ -24,18 +24,15 @@ div(layout="row" layout-xs="column" class="ng-cloak")
{% for member in doc.statics %}{% if not member.internal %} {% for member in doc.statics %}{% if not member.internal %}
pre(class="prettyprint no-bg-with-indent") pre(class="prettyprint no-bg-with-indent")
a(class="code-anchor" href="#{$ member.name $}-anchor") a(class="code-anchor" href="#{$ member.name $}-anchor")
code(class="code-background api-doc-code"). code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
{$ member.name | indent(6, false) | trim $} code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
code(class="api-doc-code").
{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
{% endif %}{% endfor %} {% endif %}{% endfor %}
{% endif %} {% endif %}
{% if doc.constructorDoc.name %} {% if doc.constructorDoc.name %}
div(layout="column") div(layout="column")
pre(class="prettyprint no-bg-with-indent") pre(class="prettyprint no-bg-with-indent")
a(class="code-anchor" href="#constructor") a(class="code-anchor" href="#constructor")
code(class="code-background api-doc-code"). code(class="code-background api-doc-code") {$ doc.constructorDoc.name $}
{$ doc.constructorDoc.name $}
code(class="api-doc-code"). code(class="api-doc-code").
{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $} {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
{% endif %} {% endif %}
@ -44,10 +41,8 @@ div(layout="row" layout-xs="column" class="ng-cloak")
{% for member in doc.members %}{% if not member.internal %} {% for member in doc.members %}{% if not member.internal %}
pre(class="prettyprint no-bg-with-indent") pre(class="prettyprint no-bg-with-indent")
a(class="code-anchor" href="#{$ member.name $}-anchor") a(class="code-anchor" href="#{$ member.name $}-anchor")
code(class="code-background api-doc-code"). code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
{$ member.name | indent(6, false) | trim $} code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
code(class="api-doc-code").
{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
{% endif %}{% endfor %} {% endif %}{% endfor %}
{% endif %} {% endif %}
p(class="selector endParens") p(class="selector endParens")

View File

@ -4,6 +4,7 @@ var del = require('del');
var Dgeni = require('dgeni'); var Dgeni = require('dgeni');
var _ = require('lodash'); var _ = require('lodash');
var globby = require('globby'); var globby = require('globby');
var ignoreDirs = ['**/node_modules/**', '**/dist/**', '**/typings/**'];
var shred = function(shredOptions) { var shred = function(shredOptions) {
try { 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) { var shredSingleDir = function(shredOptions, filePath) {
shredOptions = resolveShredOptions(shredOptions); shredOptions = resolveShredOptions(shredOptions);
var fileDir = path.dirname(filePath); var fileDir = path.dirname(filePath);
@ -72,6 +90,7 @@ var buildShredMap = function(shredMapOptions) {
module.exports = { module.exports = {
shred: shred, shred: shred,
shredSingleExampleDir: shredSingleExampleDir,
shredSingleDir: shredSingleDir, shredSingleDir: shredSingleDir,
shredSingleJadeDir: shredSingleJadeDir, shredSingleJadeDir: shredSingleJadeDir,
buildShredMap: buildShredMap 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 // 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). // this just uses globby to 'preglob' the include files ( and exclude the node_modules).
var nmPattern = '**/node_modules/**'; var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
console.log(`Shredding ${includeFiles.length} files inside ${shredOptions.examplesDir}`);
readFilesProcessor.sourceFiles = [ { readFilesProcessor.sourceFiles = [ {
// Process all candidate files in `src` and its subfolders ... // Process all candidate files in `src` and its subfolders ...
include: includeFiles , 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. // 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` // So `src/foo/bar.js` will have relative path of `foo/bar.js`
basePath: options.examplesDir 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 // 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). // this just uses globby to 'preglob' the include files ( and exclude the node_modules).
var nmPattern = '**/node_modules/**'; var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
readFilesProcessor.sourceFiles = [ { readFilesProcessor.sourceFiles = [ {
// Process all candidate files in `src` and its subfolders ... // 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 // 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). // this just uses globby to 'preglob' the include files ( and exclude the node_modules).
var nmPattern = '**/node_modules/**'; var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );
var includeFiles = globby.sync( includeFiles, { ignore: [nmPattern] } );
readFilesProcessor.sourceFiles = [ { readFilesProcessor.sourceFiles = [ {