From 338e9e9438d313fea2a5511c4f21578031652421 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Fri, 24 Mar 2017 02:50:10 +0000 Subject: [PATCH] docs: update to Angular 4.0 (#3415) --- .travis.yml | 13 +- gulpfile.js | 6 +- .../_boilerplate/src/systemjs.config.js | 5 + .../src/systemjs.config.web.build.js | 5 +- .../_boilerplate/src/systemjs.config.web.js | 5 +- .../animations/ts/src/app/app.module.ts | 3 +- .../ts/src/app/hero-list-auto.component.ts | 6 +- .../ts/src/app/hero-list-basic.component.ts | 10 +- ...ero-list-combined-transitions.component.ts | 10 +- .../hero-list-enter-leave-states.component.ts | 6 +- .../app/hero-list-enter-leave.component.ts | 6 +- .../ts/src/app/hero-list-groups.component.ts | 6 +- .../app/hero-list-inline-styles.component.ts | 8 +- .../src/app/hero-list-multistep.component.ts | 10 +- .../ts/src/app/hero-list-timings.component.ts | 6 +- .../ts/src/app/hero-list-twoway.component.ts | 10 +- .../_examples/cb-aot-compiler/e2e-spec.ts | 2 +- .../cb-ts-to-js/js/example-config.json | 3 + .../dependency-injection/e2e-spec.ts | 4 +- .../ts/src/app/injector.component.ts | 16 +- .../_examples/deployment/ts/src/index.html | 2 +- .../_examples/forms/js/example-config.json | 3 + public/docs/_examples/forms/js/src/index.html | 2 +- .../homepage-hello-world/ts/src/index.1.html | 4 +- .../homepage-tabs/ts/src/index.1.html | 4 +- .../homepage-todo/ts/src/index.1.html | 4 +- public/docs/_examples/package.json | 33 +- .../quickstart/js/example-config.json | 3 + .../_examples/quickstart/js/package.1.json | 4 +- .../_examples/router/ts/src/app/app.module.ts | 4 +- .../server-communication/e2e-spec.ts | 18 +- .../styleguide/js/example-config.json | 3 + .../_examples/webpack/ts/package.webpack.json | 18 +- public/docs/js/latest/_data.json | 2 +- public/docs/js/latest/cheatsheet.jade | 4 - public/docs/js/latest/guide/cheatsheet.jade | 2 +- public/docs/ts/latest/_data.json | 2 +- public/docs/ts/latest/cheatsheet.jade | 4 - public/docs/ts/latest/guide/change-log.jade | 2 + public/docs/ts/latest/guide/cheatsheet.jade | 392 +++++++++++++++++- scripts/examples-install-preview.sh | 6 +- tools/api-builder/angular.io-package/index.js | 46 +- tools/doc-shredder/doc-shredder.js | 6 +- .../translator/rules/indexHtml.js | 2 +- 44 files changed, 578 insertions(+), 132 deletions(-) delete mode 100644 public/docs/js/latest/cheatsheet.jade delete mode 100644 public/docs/ts/latest/cheatsheet.jade diff --git a/.travis.yml b/.travis.yml index 13ea225958..edba3b37d8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,8 +10,9 @@ env: - DBUS_SESSION_BUS_ADDRESS=/dev/null - DISPLAY=:99.0 - CHROME_BIN=chromium-browser - - LATEST_RELEASE=2.4.0 - - LATEST_RELEASE_BRANCH=2.4.x + - LATEST_RELEASE=4.0.0 + # Temporarily disabled until there is a new release branch for 4.0.0 + # - LATEST_RELEASE_BRANCH=2.4.x - TASK_FLAGS="--dgeni-log=warn" matrix: # current angular release jobs @@ -19,8 +20,8 @@ env: - TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh - TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" # current angular release branch jobs - - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH - - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" + # - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH + # - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" # angular master jobs - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" @@ -29,8 +30,8 @@ matrix: allow_failures: # allow current angular release branch and master to fail # these should be moved to a daily task instead of being ran on every PR - - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH - - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" + # - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH + # - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" before_install: diff --git a/gulpfile.js b/gulpfile.js index 82583e76bb..daf7dadf7e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -71,13 +71,13 @@ var _devguideShredJadeOptions = { var _apiShredOptions = { lang: 'ts', - examplesDir: path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/examples'), + examplesDir: path.join(ANGULAR_PROJECT_PATH, 'packages/examples'), fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'), zipDir: path.join(RESOURCES_PATH, 'zips/api'), logLevel: _dgeniLogLevel }; -var _excludePatterns = ['**/node_modules/**', '**/packages/**']; +var _excludePatterns = ['**/node_modules/**']; var _excludeMatchers = _excludePatterns.map(function(excludePattern){ return new Minimatch(excludePattern) @@ -1197,7 +1197,7 @@ function devGuideExamplesWatch(shredOptions, postShredAction, focus) { // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*'); // gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) { var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**', - '**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**']; + '**/dart/.pub/**', '**/dart/build/**']; ignoreThese = ignoreThese.concat(_exampleBoilerplateFiles.map((file) => `public/docs/_examples/*/*/${file}`)); var files = globby.sync( [includePattern], { ignore: ignoreThese }); gulp.watch([files], {readDelay: 500}, function (event, done) { diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.js b/public/docs/_examples/_boilerplate/src/systemjs.config.js index 9c2883b953..ea7a3879ac 100644 --- a/public/docs/_examples/_boilerplate/src/systemjs.config.js +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.js @@ -14,15 +14,20 @@ 'app': 'app', // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', // other libraries 'rxjs': 'npm:rxjs', diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js index 74fd96ffbe..5774fd8187 100644 --- a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js @@ -38,10 +38,13 @@ 'app': 'app', // angular bundles + '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js', + '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js', '@angular/core': 'ng:core-builds/master/bundles/core.umd.js', '@angular/common': 'ng:common-builds/master/bundles/common.umd.js', '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js', '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js', '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'ng:http-builds/master/bundles/http.umd.js', '@angular/router': 'ng:router-builds/master/bundles/router.umd.js', @@ -64,7 +67,7 @@ 'rxjs': 'npm:rxjs@5.0.1', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', - 'typescript': 'npm:typescript@2.0.10/lib/typescript.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', }, // packages tells the System loader how to load when no filename and/or no extension diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js index 5efa486db6..376fcdde8a 100644 --- a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js @@ -35,10 +35,13 @@ 'app': 'app', // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', @@ -51,7 +54,7 @@ 'rxjs': 'npm:rxjs@5.0.1', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', - 'typescript': 'npm:typescript@2.0.10/lib/typescript.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', }, // packages tells the System loader how to load when no filename and/or no extension diff --git a/public/docs/_examples/animations/ts/src/app/app.module.ts b/public/docs/_examples/animations/ts/src/app/app.module.ts index 1550034236..42c00a07a1 100644 --- a/public/docs/_examples/animations/ts/src/app/app.module.ts +++ b/public/docs/_examples/animations/ts/src/app/app.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HeroTeamBuilderComponent } from './hero-team-builder.component'; import { HeroListBasicComponent } from './hero-list-basic.component'; @@ -14,7 +15,7 @@ import { HeroListMultistepComponent } from './hero-list-multistep.component'; import { HeroListTimingsComponent } from './hero-list-timings.component'; @NgModule({ - imports: [ BrowserModule ], + imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ HeroTeamBuilderComponent, HeroListBasicComponent, diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts index 060417e309..84b25c05de 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts @@ -1,12 +1,14 @@ import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, animate, transition -} from '@angular/core'; +} from '@angular/animations'; import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts index d70a40a4ac..76d5ba686c 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts @@ -3,13 +3,15 @@ // #docregion imports import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, - transition, - animate -} from '@angular/core'; + animate, + transition +} from '@angular/animations'; // #enddocregion imports import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts index 3847af40c4..fc654cbcb5 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts @@ -2,13 +2,15 @@ // #docregion imports import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, - transition, - animate -} from '@angular/core'; + animate, + transition +} from '@angular/animations'; // #enddocregion imports import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts index 2a19b7615b..c01e182e8b 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts @@ -1,12 +1,14 @@ import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, animate, transition -} from '@angular/core'; +} from '@angular/animations'; import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts index 0b38ee55e4..f27b5f10e1 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts @@ -1,12 +1,14 @@ import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, animate, transition -} from '@angular/core'; +} from '@angular/animations'; import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts index a9583994fc..12a57292f7 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts @@ -1,13 +1,15 @@ import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, animate, transition, group -} from '@angular/core'; +} from '@angular/animations'; import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts index 356c8323ea..ed1bdb7646 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts @@ -3,11 +3,13 @@ import { Component, Input, +} from '@angular/core'; +import { trigger, style, - transition, - animate -} from '@angular/core'; + animate, + transition +} from '@angular/animations'; // #enddocregion imports import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts index 25353ca359..4e57896de5 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts @@ -1,14 +1,16 @@ import { Component, Input, +} from '@angular/core'; +import { trigger, state, style, animate, transition, keyframes, - AnimationTransitionEvent -} from '@angular/core'; + AnimationEvent +} from '@angular/animations'; import { Heroes } from './hero.service'; @@ -59,11 +61,11 @@ import { Heroes } from './hero.service'; export class HeroListMultistepComponent { @Input() heroes: Heroes; - animationStarted(event: AnimationTransitionEvent) { + animationStarted(event: AnimationEvent) { console.warn('Animation started: ', event); } - animationDone(event: AnimationTransitionEvent) { + animationDone(event: AnimationEvent) { console.warn('Animation done: ', event); } } diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts index 3dd96e5802..3218609b4a 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts @@ -1,12 +1,14 @@ import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, animate, transition -} from '@angular/core'; +} from '@angular/animations'; import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts index edb8aa1ae6..46d0c64a68 100644 --- a/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts +++ b/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts @@ -2,13 +2,15 @@ // #docregion imports import { Component, - Input, + Input +} from '@angular/core'; +import { trigger, state, style, - transition, - animate -} from '@angular/core'; + animate, + transition +} from '@angular/animations'; // #enddocregion imports import { Heroes } from './hero.service'; diff --git a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts index ab91490604..4744f06e50 100644 --- a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts +++ b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts @@ -9,7 +9,7 @@ describe('AOT Compilation', function () { browser.get(''); }); - it('should load page and click button', function (done) { + it('should load page and click button', function (done: any) { let headingSelector = element.all(by.css('h1')).get(0); expect(headingSelector.getText()).toEqual('Hello Angular'); diff --git a/public/docs/_examples/cb-ts-to-js/js/example-config.json b/public/docs/_examples/cb-ts-to-js/js/example-config.json index e69de29bb2..81f31aaf0d 100644 --- a/public/docs/_examples/cb-ts-to-js/js/example-config.json +++ b/public/docs/_examples/cb-ts-to-js/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts index 28fe22a9cb..5b46dd77d9 100644 --- a/public/docs/_examples/dependency-injection/e2e-spec.ts +++ b/public/docs/_examples/dependency-injection/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by, ElementFinder } from 'protractor'; @@ -163,7 +163,7 @@ describe('Dependency Injection Tests', function () { describe('after button click', function() { - beforeAll(function (done) { + beforeAll(function (done: any) { let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0); buttonEle.click().then(done, done); }); diff --git a/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts index 7c9e8a56e5..1b1a065e4c 100644 --- a/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts +++ b/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import { Component, Injector } from '@angular/core'; +import { Component, Injector, OnInit } from '@angular/core'; import { Car, Engine, Tires } from './car/car'; import { Hero } from './heroes/hero'; @@ -19,16 +19,22 @@ import { Logger } from './logger.service'; `, providers: [Car, Engine, Tires, heroServiceProvider, Logger] }) -export class InjectorComponent { - car: Car = this.injector.get(Car); +export class InjectorComponent implements OnInit { + car: Car; // #docregion get-hero-service - heroService: HeroService = this.injector.get(HeroService); + heroService: HeroService; // #enddocregion get-hero-service - hero: Hero = this.heroService.getHeroes()[0]; + hero: Hero; constructor(private injector: Injector) { } + ngOnInit() { + this.car = this.injector.get(Car); + this.heroService = this.injector.get(HeroService); + this.hero = this.heroService.getHeroes()[0]; + } + get rodent() { let rousDontExist = `R.O.U.S.'s? I don't think they exist!`; return this.injector.get(ROUS, rousDontExist); diff --git a/public/docs/_examples/deployment/ts/src/index.html b/public/docs/_examples/deployment/ts/src/index.html index ba6ba3dea6..770e64bc4d 100644 --- a/public/docs/_examples/deployment/ts/src/index.html +++ b/public/docs/_examples/deployment/ts/src/index.html @@ -16,7 +16,7 @@ - + diff --git a/public/docs/_examples/forms/js/example-config.json b/public/docs/_examples/forms/js/example-config.json index e69de29bb2..81f31aaf0d 100644 --- a/public/docs/_examples/forms/js/example-config.json +++ b/public/docs/_examples/forms/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/public/docs/_examples/forms/js/src/index.html b/public/docs/_examples/forms/js/src/index.html index 9715d2476e..3a41d74a3b 100644 --- a/public/docs/_examples/forms/js/src/index.html +++ b/public/docs/_examples/forms/js/src/index.html @@ -24,9 +24,9 @@ - + diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.1.html b/public/docs/_examples/homepage-hello-world/ts/src/index.1.html index a92d32fa9c..37c1bf787c 100644 --- a/public/docs/_examples/homepage-hello-world/ts/src/index.1.html +++ b/public/docs/_examples/homepage-hello-world/ts/src/index.1.html @@ -12,9 +12,9 @@ - + - + diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.1.html b/public/docs/_examples/homepage-tabs/ts/src/index.1.html index 7d0a0131e6..a25071b484 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/index.1.html +++ b/public/docs/_examples/homepage-tabs/ts/src/index.1.html @@ -13,9 +13,9 @@ - + - + diff --git a/public/docs/_examples/homepage-todo/ts/src/index.1.html b/public/docs/_examples/homepage-todo/ts/src/index.1.html index 2fcc1e01e9..4e8d034fd3 100644 --- a/public/docs/_examples/homepage-todo/ts/src/index.1.html +++ b/public/docs/_examples/homepage-todo/ts/src/index.1.html @@ -13,9 +13,9 @@ - + - + diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index ae481f7415..6220cba22c 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -12,26 +12,27 @@ "author": "", "license": "MIT", "dependencies": { - "@angular/common": "2.4.5", - "@angular/compiler": "2.4.5", - "@angular/compiler-cli": "2.4.5", - "@angular/core": "2.4.5", - "@angular/forms": "2.4.5", - "@angular/http": "2.4.5", - "@angular/platform-browser": "2.4.5", - "@angular/platform-browser-dynamic": "2.4.5", - "@angular/platform-server": "2.4.5", - "@angular/router": "3.4.5", - "@angular/tsc-wrapped": "^0.5.0", - "@angular/upgrade": "2.4.5", - "angular-in-memory-web-api": "~0.2.4", + "@angular/animations": "~4.0.0", + "@angular/common": "~4.0.0", + "@angular/compiler": "~4.0.0", + "@angular/compiler-cli": "~4.0.0", + "@angular/core": "~4.0.0", + "@angular/forms": "~4.0.0", + "@angular/http": "~4.0.0", + "@angular/platform-browser": "~4.0.0", + "@angular/platform-browser-dynamic": "~4.0.0", + "@angular/platform-server": "~4.0.0", + "@angular/router": "~4.0.0", + "@angular/tsc-wrapped": "~4.0.0", + "@angular/upgrade": "~4.0.0", + "angular-in-memory-web-api": "~0.3.1", "core-js": "^2.4.1", "rxjs": "5.0.1", "systemjs": "0.19.39", - "zone.js": "^0.7.4" + "zone.js": "^0.8.4" }, "devDependencies": { - "@angular/cli": "^1.0.0-rc.0", + "@angular/cli": "^1.0.0-rc.4", "@types/angular": "^1.5.16", "@types/angular-animate": "^1.5.5", "@types/angular-cookies": "^1.4.2", @@ -79,7 +80,7 @@ "style-loader": "^0.13.1", "ts-node": "^1.3.0", "tslint": "^3.15.1", - "typescript": "~2.0.10", + "typescript": "~2.2.0", "webpack": "2.2.1", "webpack-dev-server": "2.4.1", "webpack-merge": "^3.0.0" diff --git a/public/docs/_examples/quickstart/js/example-config.json b/public/docs/_examples/quickstart/js/example-config.json index e69de29bb2..81f31aaf0d 100644 --- a/public/docs/_examples/quickstart/js/example-config.json +++ b/public/docs/_examples/quickstart/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 541a11373a..28aee2b92e 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -17,10 +17,10 @@ "@angular/router": "~3.4.0", "@angular/upgrade": "~2.4.0", - "angular-in-memory-web-api": "~0.2.4", + "angular-in-memory-web-api": "~0.3.1", "core-js": "^2.4.1", "rxjs": "5.0.1", - "zone.js": "^0.7.4" + "zone.js": "^0.8.4" }, "devDependencies": { "concurrently": "^3.0.0", diff --git a/public/docs/_examples/router/ts/src/app/app.module.ts b/public/docs/_examples/router/ts/src/app/app.module.ts index d580964e52..d6153158c9 100644 --- a/public/docs/_examples/router/ts/src/app/app.module.ts +++ b/public/docs/_examples/router/ts/src/app/app.module.ts @@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // #docregion inspect-config import { Router } from '@angular/router'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // #enddocregion inspect-config import { AppComponent } from './app.component'; @@ -24,7 +25,8 @@ import { DialogService } from './dialog.service'; FormsModule, HeroesModule, LoginRoutingModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule ], declarations: [ AppComponent, diff --git a/public/docs/_examples/server-communication/e2e-spec.ts b/public/docs/_examples/server-communication/e2e-spec.ts index 2b6571b039..a85c7489f8 100644 --- a/public/docs/_examples/server-communication/e2e-spec.ts +++ b/public/docs/_examples/server-communication/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by } from 'protractor'; @@ -56,19 +56,19 @@ describe('Server Communication', function () { }); describe('Fetches after each keystroke', function () { - it('should fetch results after "B"', function(done) { + it('should fetch results after "B"', function(done: any) { testForRefreshedResult('B', done); }); - it('should fetch results after "Ba"', function(done) { + it('should fetch results after "Ba"', function(done: any) { testForRefreshedResult('a', done); }); - it('should fetch results after "Bas"', function(done) { + it('should fetch results after "Bas"', function(done: any) { testForRefreshedResult('s', done); }); - it('should fetch results after "Basic"', function(done) { + it('should fetch results after "Basic"', function(done: any) { testForRefreshedResult('ic', done); }); }); @@ -87,19 +87,19 @@ describe('Server Communication', function () { expect(resultList.count()).toBe(0, 'result list must be empty'); }); - it('should fetch results after "Java"', function(done) { + it('should fetch results after "Java"', function(done: any) { testForNewResult('Java', done); }); - it('should fetch results after "JavaS"', function(done) { + it('should fetch results after "JavaS"', function(done: any) { testForStaleResult('S', done); }); - it('should fetch results after "JavaSc"', function(done) { + it('should fetch results after "JavaSc"', function(done: any) { testForStaleResult('c', done); }); - it('should fetch results after "JavaScript"', function(done) { + it('should fetch results after "JavaScript"', function(done: any) { testForStaleResult('ript', done); }); diff --git a/public/docs/_examples/styleguide/js/example-config.json b/public/docs/_examples/styleguide/js/example-config.json index e69de29bb2..81f31aaf0d 100644 --- a/public/docs/_examples/styleguide/js/example-config.json +++ b/public/docs/_examples/styleguide/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index b142993c2a..8f9e3954c2 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -9,17 +9,17 @@ }, "license": "MIT", "dependencies": { - "@angular/common": "~2.4.0", - "@angular/compiler": "~2.4.0", - "@angular/core": "~2.4.0", - "@angular/forms": "~2.4.0", - "@angular/http": "~2.4.0", - "@angular/platform-browser": "~2.4.0", - "@angular/platform-browser-dynamic": "~2.4.0", - "@angular/router": "~3.4.0", + "@angular/common": "~4.0.0", + "@angular/compiler": "~4.0.0", + "@angular/core": "~4.0.0", + "@angular/forms": "~4.0.0", + "@angular/http": "~4.0.0", + "@angular/platform-browser": "~4.0.0", + "@angular/platform-browser-dynamic": "~4.0.0", + "@angular/router": "~4.0.0", "core-js": "^2.4.1", "rxjs": "5.0.1", - "zone.js": "^0.7.4" + "zone.js": "^0.8.4" }, "devDependencies": { "@types/node": "^6.0.45", diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index d32667a8c0..5158d78b27 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "The latest Angular release is 2.4. View the change log to see enhancements, fixes, and breaking changes." + "banner": "The latest Angular release is 4.0. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself. If you’re looking for Angular v2 documents, you’ll find them at v2.angular.io." }, "quickstart": { diff --git a/public/docs/js/latest/cheatsheet.jade b/public/docs/js/latest/cheatsheet.jade deleted file mode 100644 index eec36cfb3f..0000000000 --- a/public/docs/js/latest/cheatsheet.jade +++ /dev/null @@ -1,4 +0,0 @@ -- var base = current.path[4] ? '.' : './guide'; - -.l-content-small.grid-fluid.docs-content.cheatsheet - ngio-cheatsheet(src= base + '/cheatsheet.json') diff --git a/public/docs/js/latest/guide/cheatsheet.jade b/public/docs/js/latest/guide/cheatsheet.jade index 51a21522a9..f89f522a0c 100644 --- a/public/docs/js/latest/guide/cheatsheet.jade +++ b/public/docs/js/latest/guide/cheatsheet.jade @@ -1 +1 @@ -extends ../cheatsheet +extends ../../../ts/latest/guide/cheatsheet diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 7ed7f56785..2e0e874075 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "TypeScript", "menuTitle": "Docs Home", - "banner": "The latest Angular release is 2.4. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself." + "banner": "The latest Angular release is 4.0. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself. If you’re looking for Angular v2 documents, you’ll find them at v2.angular.io." }, "quickstart": { diff --git a/public/docs/ts/latest/cheatsheet.jade b/public/docs/ts/latest/cheatsheet.jade deleted file mode 100644 index eec36cfb3f..0000000000 --- a/public/docs/ts/latest/cheatsheet.jade +++ /dev/null @@ -1,4 +0,0 @@ -- var base = current.path[4] ? '.' : './guide'; - -.l-content-small.grid-fluid.docs-content.cheatsheet - ngio-cheatsheet(src= base + '/cheatsheet.json') diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade index aaf5a9d533..b83c18073a 100644 --- a/public/docs/ts/latest/guide/change-log.jade +++ b/public/docs/ts/latest/guide/change-log.jade @@ -5,6 +5,8 @@ block includes The Angular documentation is a living document with continuous improvements. This log calls attention to recent significant changes. + ## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io). + ## All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13) We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you. diff --git a/public/docs/ts/latest/guide/cheatsheet.jade b/public/docs/ts/latest/guide/cheatsheet.jade index 51a21522a9..1e787be3e3 100644 --- a/public/docs/ts/latest/guide/cheatsheet.jade +++ b/public/docs/ts/latest/guide/cheatsheet.jade @@ -1 +1,391 @@ -extends ../cheatsheet +// SCSS from +// resources/css/module/_cheatsheet.scss +// resources/css/layout/_grids.scss: grid-fluid +// resources/css/layout/_layout.scss: docs-content, l-content-small +
+ + + + + + + + + + +
Bootstrapping

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +

+
platformBrowserDynamic().bootstrapModule(AppModule);

Bootstraps the app, using the root component from the specified NgModule.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NgModules

import { NgModule } from '@angular/core'; +

+
@NgModule({ declarations: ..., imports: ...,
     exports: ..., providers: ..., bootstrap: ...})
class MyModule {}

Defines a module that contains components, directives, pipes, and providers.

+
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]

List of components, directives, and pipes that belong to this module.

+
imports: [BrowserModule, SomeOtherModule]

List of modules to import into this module. Everything from the imported modules +is available to declarations of this module.

+
exports: [MyRedComponent, MyDatePipe]

List of components, directives, and pipes visible to modules that import this module.

+
providers: [MyService, { provide: ... }]

List of dependency injection providers visible both to the contents of this module and to importers of this module.

+
bootstrap: [MyAppComponent]

List of components to bootstrap when this module is bootstrapped.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Template syntax
<input [value]="firstName">

Binds property value to the result of expression firstName.

+
<div [attr.role]="myAriaRole">

Binds attribute role to the result of expression myAriaRole.

+
<div [class.extra-sparkle]="isDelightful">

Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

+
<div [style.width.px]="mySize">

Binds style property width to the result of expression mySize in pixels. Units are optional.

+
<button (click)="readRainbow($event)">

Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.

+
<div title="Hello {{ponyName}}">

Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: +<div [title]="'Hello ' + ponyName">

+
<p>Hello {{ponyName}}</p>

Binds text content to an interpolated string, for example, "Hello Seabiscuit".

+
<my-cmp [(title)]="name">

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

+
<video #movieplayer ...>
  <button (click)="movieplayer.play()">
</video>

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

+
<p *myUnless="myExpression">...</p>

The * symbol turns the current element into an embedded template. Equivalent to: +<template [myUnless]="myExpression"><p>...</p></template>

+
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

+
<p>Employer: {{employer?.companyName}}</p>

The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

+
<svg:rect x="0" y="0" width="100" height="100"/>

An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

+
<svg>
  <rect x="0" y="0" width="100" height="100"/>
</svg>

An <svg> root element is detected as an SVG element automatically, without the prefix.

+
+ + + + + + + + + + + + + + + + + + + +
Built-in directives

import { CommonModule } from '@angular/common'; +

+
<section *ngIf="showSection">

Removes or recreates a portion of the DOM tree based on the showSection expression.

+
<li *ngFor="let item of list">

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

+
<div [ngSwitch]="conditionExpression">
  <template [ngSwitchCase]="case1Exp">...</template>
  <template ngSwitchCase="case2LiteralString">...</template>
  <template ngSwitchDefault>...</template>
</div>

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

+
<div [ngClass]="{active: isActive, disabled: isDisabled}">

Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.

+
+ + + + + + + + + + +
Forms

import { FormsModule } from '@angular/forms'; +

+
<input [(ngModel)]="userName">

Provides two-way data-binding, parsing, and validation for form controls.

+
+ + + + + + + + + + + + + + + + + + + +
Class decorators

import { Directive, ... } from '@angular/core'; +

+
@Component({...})
class MyComponent() {}

Declares that a class is a component and provides metadata about the component.

+
@Directive({...})
class MyDirective() {}

Declares that a class is a directive and provides metadata about the directive.

+
@Pipe({...})
class MyPipe() {}

Declares that a class is a pipe and provides metadata about the pipe.

+
@Injectable()
class MyService() {}

Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. +

+
+ + + + + + + + + + + + + +
Directive configuration

@Directive({ property1: value1, ... }) +

+
selector: '.cool-button:not(a)'

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, +[attribute], .class, and :not().

+

Does not support parent-child relationship selectors.

+
providers: [MyService, { provide: ... }]

List of dependency injection providers for this directive and its children.

+
+ + + + + + + + + + + + + + + + + + + +
Component configuration

+@Component extends @Directive, +so the @Directive configuration applies to components as well

+
moduleId: module.id

If set, the templateUrl and styleUrl are resolved relative to the component.

+
viewProviders: [MyService, { provide: ... }]

List of dependency injection providers scoped to this component's view.

+
template: 'Hello {{name}}'
templateUrl: 'my-component.html'

Inline template or external template URL of the component's view.

+
styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

List of inline CSS styles or external stylesheet URLs for styling the component’s view.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class field decorators for directives and components

import { Input, ... } from '@angular/core'; +

+
@Input() myProperty;

Declares an input property that you can update via property binding (example: +<my-cmp [myProperty]="someExpression">).

+
@Output() myEvent = new EventEmitter();

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

+
@HostBinding('class.valid') isValid;

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

+
@HostListener('click', ['$event']) onClick(e) {...}

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

+
@ContentChild(myPredicate) myChildComponent;

Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

+
@ContentChildren(myPredicate) myChildComponents;

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

+
@ViewChild(myPredicate) myChildComponent;

Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

+
@ViewChildren(myPredicate) myChildComponents;

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Directive and component change detection and lifecycle hooks

(implemented as class methods) +

+
constructor(myService: MyService, ...) { ... }

Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

+
ngOnChanges(changeRecord) { ... }

Called after every change to input properties and before processing content or child views.

+
ngOnInit() { ... }

Called after the constructor, initializing input properties, and the first call to ngOnChanges.

+
ngDoCheck() { ... }

Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.

+
ngAfterContentInit() { ... }

Called after ngOnInit when the component's or directive's content has been initialized.

+
ngAfterContentChecked() { ... }

Called after every check of the component's or directive's content.

+
ngAfterViewInit() { ... }

Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

+
ngAfterViewChecked() { ... }

Called after every check of the component's view. Applies to components only.

+
ngOnDestroy() { ... }

Called once, before the instance is destroyed.

+
+ + + + + + + + + + + + + + + + +
Dependency injection configuration
{ provide: MyService, useClass: MyMockService }

Sets or overrides the provider for MyService to the MyMockService class.

+
{ provide: MyService, useFactory: myFactory }

Sets or overrides the provider for MyService to the myFactory factory function.

+
{ provide: MyValue, useValue: 41 }

Sets or overrides the provider for MyValue to the value 41.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Routing and navigation

import { Routes, RouterModule, ... } from '@angular/router'; +

+
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'path/:routeParam', component: MyComponent },
  { path: 'staticPath', component: ... },
  { path: '**', component: ... },
  { path: 'oldPath', redirectTo: '/staticPath' },
  { path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes);

Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.

+

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

Marks the location to load the component of the active route.

+

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.

+
<a [routerLink]="[ '/path' ]" routerLinkActive="active">

The provided classes are added to the element when the routerLink becomes the current active route.

+
class CanActivateGuard implements CanActivate {
    canActivate(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivate: [CanActivateGuard] }

An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.

+
class CanDeactivateGuard implements CanDeactivate<T> {
    canDeactivate(
      component: T,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] }

An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.

+
class CanActivateChildGuard implements CanActivateChild {
    canActivateChild(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
    children: ... }

An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.

+
class ResolveGuard implements Resolve<T> {
    resolve(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] }

An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.

+
class CanLoadGuard implements CanLoad {
    canLoad(
      route: Route
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }

An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.

+
+ +
diff --git a/scripts/examples-install-preview.sh b/scripts/examples-install-preview.sh index 41096da1e6..d5361f5698 100755 --- a/scripts/examples-install-preview.sh +++ b/scripts/examples-install-preview.sh @@ -3,4 +3,8 @@ set -ex -o pipefail ./scripts/examples-install.sh -(cd public/docs/_examples && npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,forms,router,upgrade}-builds#$PREVIEW_BRANCH --no-optional) +# For master branches (ng4) also install typescript@^2.1.5 +if [[ "$PREVIEW_BRANCH" == "master" ]]; then + EXTRA_PACKAGES="typescript@^2.1.5" +fi +(cd public/docs/_examples && npm install angular/{animations,core,common,compiler,compiler-cli,platform-browser,platform-browser-dynamic,platform-server,http,forms,router,tsc-wrapped,upgrade}-builds#$PREVIEW_BRANCH $EXTRA_PACKAGES --no-optional) diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js index c08f9f5d35..4bec36d7b3 100644 --- a/tools/api-builder/angular.io-package/index.js +++ b/tools/api-builder/angular.io-package/index.js @@ -44,29 +44,33 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe if (!fs.existsSync(angular_repo_path)) { throw new Error('build-api-docs task requires the angular repo to be at ' + angular_repo_path); } - readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules'); - readTypeScriptModules.ignoreExportsMatching = [/^_/]; + readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'packages'); + readTypeScriptModules.ignoreExportsMatching = [/^(_|ɵ)/]; readTypeScriptModules.sourceFiles = [ - '@angular/common/index.ts', - '@angular/common/testing/index.ts', - '@angular/core/index.ts', - '@angular/core/testing/index.ts', - '@angular/forms/index.ts', - '@angular/http/index.ts', - '@angular/http/testing/index.ts', - '@angular/platform-browser/index.ts', - '@angular/platform-browser/testing/index.ts', - '@angular/platform-browser-dynamic/index.ts', - '@angular/platform-browser-dynamic/testing/index.ts', - '@angular/platform-server/index.ts', - '@angular/platform-server/testing/index.ts', - '@angular/platform-webworker/index.ts', - '@angular/platform-webworker-dynamic/index.ts', - '@angular/router/index.ts', - '@angular/router/testing/index.ts', - '@angular/upgrade/index.ts', - '@angular/upgrade/static.ts' + 'animations/index.ts', + 'animations/browser/index.ts', + 'animations/browser/testing.ts', + 'common/index.ts', + 'common/testing/index.ts', + 'core/index.ts', + 'core/testing/index.ts', + 'forms/index.ts', + 'http/index.ts', + 'http/testing/index.ts', + 'platform-browser/index.ts', + 'platform-browser/animations/index.ts', + 'platform-browser/testing/index.ts', + 'platform-browser-dynamic/index.ts', + 'platform-browser-dynamic/testing/index.ts', + 'platform-server/index.ts', + 'platform-server/testing/index.ts', + 'platform-webworker/index.ts', + 'platform-webworker-dynamic/index.ts', + 'router/index.ts', + 'router/testing/index.ts', + 'upgrade/index.ts', + 'upgrade/static.ts' ]; readTypeScriptModules.hidePrivateMembers = true; diff --git a/tools/doc-shredder/doc-shredder.js b/tools/doc-shredder/doc-shredder.js index a4f124221c..b8ed7e68d5 100644 --- a/tools/doc-shredder/doc-shredder.js +++ b/tools/doc-shredder/doc-shredder.js @@ -138,7 +138,7 @@ function createShredExamplePackage(shredOptions) { readFilesProcessor.sourceFiles = [ { // Process all candidate files in `src` and its subfolders ... include: includeFiles , - exclude: [ '**/node_modules/**', '**/dist/**', '**/packages/**', '**/dart/build/**'], + exclude: [ '**/node_modules/**', '**/dist/**', '**/dart/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 @@ -190,7 +190,7 @@ function createShredJadePackage(shredOptions) { readFilesProcessor.sourceFiles = [ { // Process all candidate files in `src` and its subfolders ... include: includeFiles , - exclude: [ '**/node_modules/**', '**/packages/**', '**/dart/build/**', '**/_code-examples.jade'], + exclude: [ '**/node_modules/**', '**/dart/build/**', '**/_code-examples.jade'], // 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.jadeDir @@ -244,7 +244,7 @@ var createShredMapPackage = function(mapOptions) { readFilesProcessor.sourceFiles = [ { // Process all candidate files in `src` and its subfolders ... include: includeFiles, - exclude: ['**/node_modules/**', '**/packages/**', '**/dart/build/**'], + exclude: ['**/node_modules/**', '**/dart/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.jadeDir diff --git a/tools/plunker-builder/translator/rules/indexHtml.js b/tools/plunker-builder/translator/rules/indexHtml.js index 68263885d1..3f6a20a942 100644 --- a/tools/plunker-builder/translator/rules/indexHtml.js +++ b/tools/plunker-builder/translator/rules/indexHtml.js @@ -49,7 +49,7 @@ var rulesToApply = [ { pattern: 'script', from: 'node_modules/zone.js/dist/zone.js', - to: 'https://unpkg.com/zone.js@0.7.4?main=browser' + to: 'https://unpkg.com/zone.js@0.8.4?main=browser' }, { pattern: 'script',