diff --git a/gulpfile.js b/gulpfile.js index e89d3fc26f..b5cf5fc18f 100644 --- a/gulpfile.js +++ b/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 diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore new file mode 100644 index 0000000000..ca3f2dbd5e --- /dev/null +++ b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore @@ -0,0 +1 @@ +!tsconfig.json diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json b/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json new file mode 100644 index 0000000000..1ac74de56e --- /dev/null +++ b/public/docs/_examples/cb-visual-studio-2015/ts/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 +} diff --git a/public/docs/_examples/quickstart/dart/web/index.html b/public/docs/_examples/quickstart/dart/web/index.html index a1e925b8fb..38eeed5e43 100644 --- a/public/docs/_examples/quickstart/dart/web/index.html +++ b/public/docs/_examples/quickstart/dart/web/index.html @@ -6,8 +6,8 @@ - - + + diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json index 9b2545ec5e..207dce5e42 100644 --- a/public/docs/dart/latest/cookbook/_data.json +++ b/public/docs/dart/latest/cookbook/_data.json @@ -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 } } diff --git a/public/docs/dart/latest/cookbook/visual-studio-2015.jade b/public/docs/dart/latest/cookbook/visual-studio-2015.jade new file mode 100644 index 0000000000..f8df2a84a6 --- /dev/null +++ b/public/docs/dart/latest/cookbook/visual-studio-2015.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") \ No newline at end of file diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json index 2d9ada59f1..7b847da507 100644 --- a/public/docs/js/latest/cookbook/_data.json +++ b/public/docs/js/latest/cookbook/_data.json @@ -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" } } diff --git a/public/docs/js/latest/cookbook/visual-studio-2015.jade b/public/docs/js/latest/cookbook/visual-studio-2015.jade new file mode 100644 index 0000000000..f8df2a84a6 --- /dev/null +++ b/public/docs/js/latest/cookbook/visual-studio-2015.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") \ No newline at end of file diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 339a0e12e9..4f19461ed7 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -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快速开始" } } diff --git a/public/docs/ts/latest/cookbook/visual-studio-2015.jade b/public/docs/ts/latest/cookbook/visual-studio-2015.jade new file mode 100644 index 0000000000..db6562670c --- /dev/null +++ b/public/docs/ts/latest/cookbook/visual-studio-2015.jade @@ -0,0 +1,160 @@ +include ../_util-fns + + +: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 + +: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`. +
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’*" 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. + diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html index 58b749c7dc..3155d14af4 100644 --- a/tools/api-builder/angular.io-package/templates/class.template.html +++ b/tools/api-builder/angular.io-package/templates/class.template.html @@ -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") diff --git a/tools/doc-shredder/doc-shredder.js b/tools/doc-shredder/doc-shredder.js index 2427664274..434113026a 100644 --- a/tools/doc-shredder/doc-shredder.js +++ b/tools/doc-shredder/doc-shredder.js @@ -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 = [ {