docs: update to Angular 4.0 (#3415)
This commit is contained in:
Filipe Silva
Ward Bell
parent
77af42dba9
commit
338e9e9438
13
.travis.yml
13
.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:
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"build": "build:babel"
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<!-- Update these package versions as needed -->
|
||||
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
|
||||
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
|
||||
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
||||
<!-- #enddocregion node-module-scripts -->
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"build": "build:babel"
|
||||
}
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
|
||||
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
|
||||
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
|
||||
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
|
||||
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
|
||||
|
||||
<!-- #docregion scripts-hero, scripts-hero-form -->
|
||||
<script src='app/hero.js'></script>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<!-- Polyfills -->
|
||||
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/zone.js@0.7.4"></script>
|
||||
<script src="https://unpkg.com/zone.js@0.8.4"></script>
|
||||
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.0.10/lib/typescript.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.2.1/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<!-- Polyfills -->
|
||||
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/zone.js@0.7.4"></script>
|
||||
<script src="https://unpkg.com/zone.js@0.8.4"></script>
|
||||
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.0.10/lib/typescript.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.2.1/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<!-- Polyfills -->
|
||||
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/zone.js@0.7.4"></script>
|
||||
<script src="https://unpkg.com/zone.js@0.8.4"></script>
|
||||
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.0.10/lib/typescript.js"></script>
|
||||
<script src="https://unpkg.com/typescript@2.2.1/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"build": "build:babel"
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"build": "build:babel"
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"title": "Angular Docs",
|
||||
"subtitle": "JavaScript",
|
||||
"menuTitle": "Docs Home",
|
||||
"banner": "The latest Angular release is <b>2.4</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
|
||||
"banner": "The latest Angular release is <b>4.0</b>. Learn about the latest <a href='guide/change-log.html' title='Documentation change log'>updates to the documentation</a>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular Product Changes'>Angular change log</a> for enhancements, fixes, and breaking changes in Angular itself. If you’re looking for Angular v2 documents, you’ll find them at <a href='https://v2.angular.io' title='Angular v2 docs archive'>v2.angular.io</a>."
|
||||
},
|
||||
|
||||
"quickstart": {
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
- var base = current.path[4] ? '.' : './guide';
|
||||
|
||||
.l-content-small.grid-fluid.docs-content.cheatsheet
|
||||
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||
|
|
@ -1 +1 @@
|
|||
extends ../cheatsheet
|
||||
extends ../../../ts/latest/guide/cheatsheet
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"title": "Angular Docs",
|
||||
"subtitle": "TypeScript",
|
||||
"menuTitle": "Docs Home",
|
||||
"banner": "The latest Angular release is <b>2.4</b>. Learn about the latest <a href='guide/change-log.html' title='Documentation change log'>updates to the documentation</a>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular Product Changes'>Angular change log</a> for enhancements, fixes, and breaking changes in Angular itself."
|
||||
"banner": "The latest Angular release is <b>4.0</b>. Learn about the latest <a href='guide/change-log.html' title='Documentation change log'>updates to the documentation</a>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular Product Changes'>Angular change log</a> for enhancements, fixes, and breaking changes in Angular itself. If you’re looking for Angular v2 documents, you’ll find them at <a href='https://v2.angular.io' title='Angular v2 docs archive'>v2.angular.io</a>."
|
||||
},
|
||||
|
||||
"quickstart": {
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
- var base = current.path[4] ? '.' : './guide';
|
||||
|
||||
.l-content-small.grid-fluid.docs-content.cheatsheet
|
||||
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<div class="l-content-small grid-fluid docs-content cheatsheet">
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Bootstrapping</th>
|
||||
<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>
|
||||
<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>NgModules</th>
|
||||
<th><p><code>import { NgModule } from '@angular/core';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@<b>NgModule</b>({ declarations: ..., imports: ...,<br> exports: ..., providers: ..., bootstrap: ...})<br>class MyModule {}</code></td>
|
||||
<td><p>Defines a module that contains components, directives, pipes, and providers.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>declarations:</b> [MyRedComponent, MyBlueComponent, MyDatePipe]</code></td>
|
||||
<td><p>List of components, directives, and pipes that belong to this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>imports:</b> [BrowserModule, SomeOtherModule]</code></td>
|
||||
<td><p>List of modules to import into this module. Everything from the imported modules
|
||||
is available to <code>declarations</code> of this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>exports:</b> [MyRedComponent, MyDatePipe]</code></td>
|
||||
<td><p>List of components, directives, and pipes visible to modules that import this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
|
||||
<td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>
|
||||
<td><p>List of components to bootstrap when this module is bootstrapped.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Template syntax</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input <b>[value]</b>="firstName"></code></td>
|
||||
<td><p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div <b>[attr.role]</b>="myAriaRole"></code></td>
|
||||
<td><p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div <b>[class.extra-sparkle]</b>="isDelightful"></code></td>
|
||||
<td><p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div <b>[style.width.px]</b>="mySize"></code></td>
|
||||
<td><p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><button <b>(click)</b>="readRainbow($event)"></code></td>
|
||||
<td><p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div title="Hello <b>{{ponyName}}</b>"></code></td>
|
||||
<td><p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
|
||||
<code><div [title]="'Hello ' + ponyName"></code></p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><p>Hello <b>{{ponyName}}</b></p></code></td>
|
||||
<td><p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><my-cmp <b>[(title)]</b>="name"></code></td>
|
||||
<td><p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><video <b>#movieplayer</b> ...><br> <button <b>(click)</b>="movieplayer.play()"><br></video></code></td>
|
||||
<td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><p <b>*myUnless</b>="myExpression">...</p></code></td>
|
||||
<td><p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:
|
||||
<code><template [myUnless]="myExpression"><p>...</p></template></code></p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><p>Card No.: <b>{{cardNumber | myCardNumberFormatter}}</b></p></code></td>
|
||||
<td><p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><p>Employer: <b>{{employer?.companyName}}</b></p></code></td>
|
||||
<td><p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><<b>svg:</b>rect x="0" y="0" width="100" height="100"/></code></td>
|
||||
<td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><<b>svg</b>><br> <rect x="0" y="0" width="100" height="100"/><br></<b>svg</b>></code></td>
|
||||
<td><p>An <code><svg></code> root element is detected as an SVG element automatically, without the prefix.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Built-in directives</th>
|
||||
<th><p><code>import { CommonModule } from '@angular/common';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><section <b>*ngIf</b>="showSection"></code></td>
|
||||
<td><p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><li <b>*ngFor</b>="let item of list"></code></td>
|
||||
<td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div <b>[ngSwitch]</b>="conditionExpression"><br> <template <b>[<b>ngSwitchCase</b>]</b>="case1Exp">...</template><br> <template <b>ngSwitchCase</b>="case2LiteralString">...</template><br> <template <b>ngSwitchDefault</b>>...</template><br></div></code></td>
|
||||
<td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><div <b>[ngClass]</b>="{active: isActive, disabled: isDisabled}"></code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Forms</th>
|
||||
<th><p><code>import { FormsModule } from '@angular/forms';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input <b>[(ngModel)]</b>="userName"></code></td>
|
||||
<td><p>Provides two-way data-binding, parsing, and validation for form controls.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Class decorators</th>
|
||||
<th><p><code>import { Directive, ... } from '@angular/core';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>@Component({...})</b><br>class MyComponent() {}</code></td>
|
||||
<td><p>Declares that a class is a component and provides metadata about the component.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@Directive({...})</b><br>class MyDirective() {}</code></td>
|
||||
<td><p>Declares that a class is a directive and provides metadata about the directive.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@Pipe({...})</b><br>class MyPipe() {}</code></td>
|
||||
<td><p>Declares that a class is a pipe and provides metadata about the pipe.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
|
||||
<td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Directive configuration</th>
|
||||
<th><p><code>@Directive({ property1: value1, ... })</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>selector:</b> '.cool-button:not(a)'</code></td>
|
||||
<td><p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,
|
||||
<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>
|
||||
<p>Does not support parent-child relationship selectors.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
|
||||
<td><p>List of dependency injection providers for this directive and its children.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Component configuration</th>
|
||||
<th><p>
|
||||
<code>@Component</code> extends <code>@Directive</code>,
|
||||
so the <code>@Directive</code> configuration applies to components as well</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>moduleId:</b> module.id</code></td>
|
||||
<td><p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>viewProviders:</b> [MyService, { provide: ... }]</code></td>
|
||||
<td><p>List of dependency injection providers scoped to this component's view.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>template:</b> 'Hello {{name}}'<br><b>templateUrl:</b> 'my-component.html'</code></td>
|
||||
<td><p>Inline template or external template URL of the component's view.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>styles:</b> ['.primary {color: red}']<br><b>styleUrls:</b> ['my-component.css']</code></td>
|
||||
<td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Class field decorators for directives and components</th>
|
||||
<th><p><code>import { Input, ... } from '@angular/core';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>@Input()</b> myProperty;</code></td>
|
||||
<td><p>Declares an input property that you can update via property binding (example:
|
||||
<code><my-cmp [myProperty]="someExpression"></code>).</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@Output()</b> myEvent = new EventEmitter();</code></td>
|
||||
<td><p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code><my-cmp (myEvent)="doSomething()"></code>).</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@HostBinding('class.valid')</b> isValid;</code></td>
|
||||
<td><p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@HostListener('click', ['$event'])</b> onClick(e) {...}</code></td>
|
||||
<td><p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@ContentChild(myPredicate)</b> myChildComponent;</code></td>
|
||||
<td><p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@ContentChildren(myPredicate)</b> myChildComponents;</code></td>
|
||||
<td><p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@ViewChild(myPredicate)</b> myChildComponent;</code></td>
|
||||
<td><p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>@ViewChildren(myPredicate)</b> myChildComponents;</code></td>
|
||||
<td><p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Directive and component change detection and lifecycle hooks</th>
|
||||
<th><p>(implemented as class methods)
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><b>constructor(myService: MyService, ...)</b> { ... }</code></td>
|
||||
<td><p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngOnChanges(changeRecord)</b> { ... }</code></td>
|
||||
<td><p>Called after every change to input properties and before processing content or child views.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngOnInit()</b> { ... }</code></td>
|
||||
<td><p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngDoCheck()</b> { ... }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngAfterContentInit()</b> { ... }</code></td>
|
||||
<td><p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngAfterContentChecked()</b> { ... }</code></td>
|
||||
<td><p>Called after every check of the component's or directive's content.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngAfterViewInit()</b> { ... }</code></td>
|
||||
<td><p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngAfterViewChecked()</b> { ... }</code></td>
|
||||
<td><p>Called after every check of the component's view. Applies to components only.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>ngOnDestroy()</b> { ... }</code></td>
|
||||
<td><p>Called once, before the instance is destroyed.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Dependency injection configuration</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>{ <b>provide</b>: MyService, <b>useClass</b>: MyMockService }</code></td>
|
||||
<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>{ <b>provide</b>: MyService, <b>useFactory</b>: myFactory }</code></td>
|
||||
<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>{ <b>provide</b>: MyValue, <b>useValue</b>: 41 }</code></td>
|
||||
<td><p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>Routing and navigation</th>
|
||||
<th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>const routes: <b>Routes</b> = [<br> { path: '', component: HomeComponent },<br> { path: 'path/:routeParam', component: MyComponent },<br> { path: 'staticPath', component: ... },<br> { path: '**', component: ... },<br> { path: 'oldPath', redirectTo: '/staticPath' },<br> { path: ..., component: ..., data: { message: 'Custom' } }<br>]);<br><br>const routing = RouterModule.forRoot(routes);</code></td>
|
||||
<td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><br><<b>router-outlet</b>></<b>router-outlet</b>><br><<b>router-outlet</b> name="aux"></<b>router-outlet</b>><br></code></td>
|
||||
<td><p>Marks the location to load the component of the active route.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><br><a routerLink="/path"><br><a <b>[routerLink]</b>="[ '/path', routeParam ]"><br><a <b>[routerLink]</b>="[ '/path', { matrixParam: 'value' } ]"><br><a <b>[routerLink]</b>="[ '/path' ]" [queryParams]="{ page: 1 }"><br><a <b>[routerLink]</b>="[ '/path' ]" fragment="anchor"><br></code></td>
|
||||
<td><p>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 <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><a [routerLink]="[ '/path' ]" routerLinkActive="active"></code></td>
|
||||
<td><p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanActivate</b>Guard implements <b>CanActivate</b> {<br> canActivate(<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<boolean>|Promise<boolean>|boolean { ... }<br>}<br><br>{ path: ..., canActivate: [<b>CanActivate</b>Guard] }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b><T> {<br> canDeactivate(<br> component: T,<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<boolean>|Promise<boolean>|boolean { ... }<br>}<br><br>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {<br> canActivateChild(<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<boolean>|Promise<boolean>|boolean { ... }<br>}<br><br>{ path: ..., canActivateChild: [CanActivateGuard],<br> children: ... }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>class <b>Resolve</b>Guard implements <b>Resolve</b><T> {<br> resolve(<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<any>|Promise<any>|any { ... }<br>}<br><br>{ path: ..., resolve: [<b>Resolve</b>Guard] }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanLoad</b>Guard implements <b>CanLoad</b> {<br> canLoad(<br> route: Route<br> ): Observable<boolean>|Promise<boolean>|boolean { ... }<br>}<br><br>{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }</code></td>
|
||||
<td><p>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.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue