-
-
- `,
-// #enddocregion template
- providers: [
- HeroService,
- DialogService,
- provideRouter(routes),
- CanDeactivateGuard,
- { provide: LocationStrategy,
- useClass: HashLocationStrategy } // .../#/crisis-center/
- ],
- directives: [ROUTER_DIRECTIVES]
-})
-export class AppComponent {
-}
diff --git a/public/docs/_examples/router/ts/app/app.routes.1.ts b/public/docs/_examples/router/ts/app/app.routes.1.ts
index f22d480744..14a0ebe946 100644
--- a/public/docs/_examples/router/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.1.ts
@@ -14,7 +14,7 @@ import { HeroDetailComponent } from './heroes/hero-detail.component';
// #docregion
// #docregion route-config
-export const routes: RouterConfig = [
+const routes: RouterConfig = [
// #docregion route-defs
{ path: 'crisis-center', component: CrisisCenterComponent },
{ path: 'heroes', component: HeroListComponent },
diff --git a/public/docs/_examples/router/ts/app/app.routes.2.ts b/public/docs/_examples/router/ts/app/app.routes.2.ts
index c79e8ad17c..e2e3d1f9fc 100644
--- a/public/docs/_examples/router/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.2.ts
@@ -8,7 +8,7 @@ import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
-export const routes: RouterConfig = [
+const routes: RouterConfig = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 9254169331..644e86bffd 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -28,6 +28,7 @@ import { AppComponent as S0704 } from '../07-04/app';
import { AppComponent as S0901 } from '../09-01/app';
const routes: RouterConfig = [
+ { path: '', redirectTo: '/01-01', pathMatch: 'full' },
{ path: '01-01', component: S0101 },
{ path: '02-07', component: S0207 },
{ path: '02-08', component: S0208 },
@@ -56,6 +57,6 @@ const routes: RouterConfig = [
{ path: '09-01', component: S0901 },
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts
index b58fbb68dd..759f9e261b 100644
--- a/public/docs/_examples/style-guide/ts/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@@ -4,12 +4,12 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import 'rxjs/add/operator/map';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { appRouterProviders } from './app.routes';
import { HeroData } from './hero-data';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
- APP_ROUTER_PROVIDERS,
+ appRouterProviders,
HTTP_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: XHRBackend, useClass: InMemoryBackendService },
diff --git a/public/docs/_examples/testing/ts/app/app.component.spec.ts b/public/docs/_examples/testing/ts/app/app.component.spec.ts
index 9cf6d82e1a..f6c30b0e76 100644
--- a/public/docs/_examples/testing/ts/app/app.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts
@@ -5,13 +5,10 @@ import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {
- beforeEach, beforeEachProviders,
- describe, ddescribe, xdescribe,
- expect, it, iit, xit,
async, inject
} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { Hero, HeroService, MockHeroService } from './mock-hero.service';
@@ -45,7 +42,7 @@ describe('AppComponent', () => {
it('can get title from template', () => {
fixture.detectChanges();
let titleEl = fixture.debugElement.query(By.css('h1')).nativeElement;
- expect(titleEl).toHaveText(comp.title);
+ expect(titleEl.textContent).toContain(comp.title);
});
it('can get RouterLinks from template', () => {
diff --git a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
index 1251185160..d73882372c 100644
--- a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
+++ b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
@@ -19,13 +19,11 @@ import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import {
- beforeEach, beforeEachProviders,
- describe, ddescribe, xdescribe,
- expect, it, iit, xit,
+ addProviders,
async, inject
} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { ViewMetadata } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@@ -143,20 +141,20 @@ xdescribe('async & inject testing errors', () => {
restoreJasmineIt();
}, 10000);
- describe('using beforeEachProviders', () => {
- beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]);
+ describe('using addProviders', () => {
+ addProviders([{ provide: FancyService, useValue: new FancyService() }]);
beforeEach(
inject([FancyService], (service: FancyService) => { expect(service.value).toEqual('real value'); }));
- describe('nested beforeEachProviders', () => {
+ describe('nested addProviders', () => {
it('should fail when the injector has already been used', () => {
patchJasmineBeforeEach();
expect(() => {
- beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]);
+ addProviders([{ provide: FancyService, useValue: new FancyService() }]);
})
- .toThrowError('beforeEachProviders was called after the injector had been used ' +
+ .toThrowError('addProviders was called after the injector had been used ' +
'in a beforeEach or it block. This invalidates the test injector');
restoreJasmineBeforeEach();
});
diff --git a/public/docs/_examples/testing/ts/app/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag.spec.ts
index 80790fca67..7218e91f1b 100644
--- a/public/docs/_examples/testing/ts/app/bag.spec.ts
+++ b/public/docs/_examples/testing/ts/app/bag.spec.ts
@@ -1,7 +1,7 @@
// Based on https://github.com/angular/angular/blob/master/modules/angular2/test/testing/testing_public_spec.ts
/* tslint:disable */
import {
- BadTemplateUrl, ButtonComp,
+ ButtonComp,
ChildChildComp, ChildComp, ChildWithChildComp,
ExternalTemplateComp,
FancyService, MockFancyService,
@@ -16,14 +16,12 @@ import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import {
- beforeEach, beforeEachProviders,
- describe, ddescribe, xdescribe,
- expect, it, iit, xit,
- async, inject,
+ addProviders,
+ inject, async,
fakeAsync, tick, withProviders
} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { ViewMetadata } from '@angular/core';
@@ -31,47 +29,6 @@ import { Observable } from 'rxjs/Rx';
//////// SPECS /////////////
-/// Verify can use Angular testing's DOM abstraction to access DOM
-
-describe('angular2 jasmine matchers', () => {
- describe('toHaveCssClass', () => {
- it('should assert that the CSS class is present', () => {
- let el = document.createElement('div');
- el.classList.add('bombasto');
- expect(el).toHaveCssClass('bombasto');
- });
-
- it('should assert that the CSS class is not present', () => {
- let el = document.createElement('div');
- el.classList.add('bombasto');
- expect(el).not.toHaveCssClass('fatias');
- });
- });
-
- describe('toHaveCssStyle', () => {
- it('should assert that the CSS style is present', () => {
- let el = document.createElement('div');
- expect(el).not.toHaveCssStyle('width');
-
- el.style.setProperty('width', '100px');
- expect(el).toHaveCssStyle('width');
- });
-
- it('should assert that the styles are matched against the element', () => {
- let el = document.createElement('div');
- expect(el).not.toHaveCssStyle({width: '100px', height: '555px'});
-
- el.style.setProperty('width', '100px');
- expect(el).toHaveCssStyle({width: '100px'});
- expect(el).not.toHaveCssStyle({width: '100px', height: '555px'});
-
- el.style.setProperty('height', '555px');
- expect(el).toHaveCssStyle({height: '555px'});
- expect(el).toHaveCssStyle({width: '100px', height: '555px'});
- });
- });
-});
-
describe('using the async helper', () => {
let actuallyDone = false;
@@ -101,7 +58,7 @@ describe('using the async helper', () => {
p.catch(() => { actuallyDone = true; });
}));
- it('should run async test with successful Observable', async(() => {
+ xit('should run async test with successful Observable', async(() => {
let source = Observable.of(true).delay(10);
source.subscribe(
val => {},
@@ -114,9 +71,11 @@ describe('using the async helper', () => {
describe('using the test injector with the inject helper', () => {
describe('setting up Providers with FancyService', () => {
- beforeEachProviders(() => [
- { provide: FancyService, useValue: new FancyService() }
- ]);
+ beforeEach(() => {
+ addProviders([
+ { provide: FancyService, useValue: new FancyService() }
+ ]);
+ });
it('should use FancyService',
inject([FancyService], (service: FancyService) => {
@@ -142,7 +101,7 @@ describe('using the test injector with the inject helper', () => {
);
})));
- it('test should wait for FancyService.getObservableDelayValue',
+ xit('test should wait for FancyService.getObservableDelayValue',
async(inject([FancyService], (service: FancyService) => {
service.getObservableDelayValue().subscribe(
value => { expect(value).toEqual('observable delay value'); }
@@ -197,7 +156,7 @@ describe('test component builder', function() {
tcb.createAsync(ChildComp).then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('Original Child');
+ expect(fixture.nativeElement.textContent).toContain('Original Child');
});
})));
@@ -206,11 +165,11 @@ describe('test component builder', function() {
tcb.createAsync(MyIfComp).then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('MyIf()');
+ expect(fixture.nativeElement.textContent).toContain('MyIf()');
fixture.debugElement.componentInstance.showMore = true;
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('MyIf(More)');
+ expect(fixture.nativeElement.textContent).toContain('MyIf(More)');
});
})));
@@ -262,7 +221,7 @@ describe('test component builder', function() {
.createAsync(MockChildComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('Mock');
+ expect(fixture.nativeElement.textContent).toContain('Mock');
});
})));
@@ -276,7 +235,7 @@ describe('test component builder', function() {
.createAsync(ChildComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('Modified Child');
+ expect(fixture.nativeElement.textContent).toContain('Modified Child');
});
})));
@@ -288,7 +247,7 @@ describe('test component builder', function() {
.createAsync(ParentComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement).toHaveText('Parent(Mock)');
+ expect(fixture.nativeElement.textContent).toContain('Parent(Mock)');
});
})));
@@ -302,8 +261,8 @@ describe('test component builder', function() {
.createAsync(ParentComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement)
- .toHaveText('Parent(Original Child(ChildChild Mock))');
+ expect(fixture.nativeElement.textContent)
+ .toContain('Parent(Original Child(ChildChild Mock))');
});
})));
@@ -318,8 +277,8 @@ describe('test component builder', function() {
.createAsync(TestProvidersComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement)
- .toHaveText('injected value: mocked out value');
+ expect(fixture.nativeElement.textContent)
+ .toContain('injected value: mocked out value');
});
})));
@@ -333,8 +292,8 @@ describe('test component builder', function() {
.createAsync(TestViewProvidersComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement)
- .toHaveText('injected value: mocked out value');
+ expect(fixture.nativeElement.textContent)
+ .toContain('injected value: mocked out value');
});
})));
@@ -344,8 +303,8 @@ describe('test component builder', function() {
tcb.createAsync(ExternalTemplateComp)
.then(fixture => {
fixture.detectChanges();
- expect(fixture.nativeElement)
- .toHaveText('from external template\n');
+ expect(fixture.nativeElement.textContent)
+ .toContain('from external template\n');
});
})), 10000); // Long timeout because this test makes an actual XHR.
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
index 803ea00535..1b573c32f3 100644
--- a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
@@ -4,13 +4,11 @@ import { DashboardComponent } from './dashboard.component';
import { By } from '@angular/platform-browser';
import {
- beforeEach, beforeEachProviders,
- describe, ddescribe, xdescribe,
- expect, it, iit, xit,
+ addProviders,
async, inject
} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { Hero, HeroService, MockHeroService } from './mock-hero.service';
import { Router, MockRouter } from './mock-router';
@@ -70,13 +68,13 @@ describe('DashboardComponent', () => {
let comp: DashboardComponent;
let mockHeroService: MockHeroService;
- beforeEachProviders(() => {
+ beforeEach(() => {
mockHeroService = new MockHeroService();
- return [
+ addProviders([
{ provide: Router, useClass: MockRouter},
{ provide: MockRouter, useExisting: Router},
{ provide: HeroService, useValue: mockHeroService }
- ];
+ ]);
});
it('can instantiate it',
@@ -138,8 +136,8 @@ describe('DashboardComponent', () => {
expect(heroNames.length).toEqual(4, 'should display 4 heroes');
// the 4th displayed hero should be the 5th mock hero
- expect(heroNames[3].nativeElement)
- .toHaveText(mockHeroService.mockHeroes[4].name);
+ expect(heroNames[3].nativeElement.textContent)
+ .toContain(mockHeroService.mockHeroes[4].name);
});
});
diff --git a/public/docs/_examples/testing/ts/app/expect-proper.ts b/public/docs/_examples/testing/ts/app/expect-proper.ts
deleted file mode 100644
index 77f3deb928..0000000000
--- a/public/docs/_examples/testing/ts/app/expect-proper.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// See https://github.com/angular/angular/issues/9017
-import { expect as expectCore } from '@angular/core/testing';
-import { NgMatchers } from '@angular/platform-browser/testing';
-
-export function expect(spy: Function): NgMatchers;
-export function expect(actual: any): NgMatchers;
-export function expect(actual: any): NgMatchers {
- return expectCore(actual) as NgMatchers;
-}
diff --git a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
index 0c79f7f3aa..375efde560 100644
--- a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
+++ b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
@@ -1,12 +1,10 @@
/* tslint:disable:no-unused-variable */
import {
- beforeEach, beforeEachProviders,
- describe, ddescribe, xdescribe,
- expect, it, iit, xit,
+ addProviders,
async, inject, withProviders
} from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
+import { TestComponentBuilder } from '@angular/core/testing';
import {
MockBackend,
@@ -42,10 +40,12 @@ const makeResponseData = (data: {}) => {return { data }; };
//////// SPECS /////////////
describe('Http-HeroService (mockBackend)', () => {
- beforeEachProviders(() => [
- HTTP_PROVIDERS,
- { provide: XHRBackend, useClass: MockBackend }
- ]);
+ beforeEach(() => {
+ addProviders([
+ HTTP_PROVIDERS,
+ { provide: XHRBackend, useClass: MockBackend }
+ ]);
+ });
it('can instantiate service when inject service',
withProviders(() => [HeroService])
diff --git a/public/docs/_examples/testing/ts/liteserver-test-config.json b/public/docs/_examples/testing/ts/liteserver-test-config.json
new file mode 100644
index 0000000000..6b1a2b5466
--- /dev/null
+++ b/public/docs/_examples/testing/ts/liteserver-test-config.json
@@ -0,0 +1,3 @@
+{
+ "startPath": "unit-tests.html"
+}
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
index 69afde3d34..6f7c5d83a0 100644
--- a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
@@ -1,7 +1,7 @@
// #docregion
import { Hero } from './hero';
-export var HEROES: Hero[] = [
+export const HEROES: Hero[] = [
{id: 11, name: 'Mr. Nice'},
{id: 12, name: 'Narco'},
{id: 13, name: 'Bombasto'},
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
index 8b4d582680..0c34add29c 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
@@ -6,7 +6,7 @@ import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
-export const routes: RouterConfig = [
+const routes: RouterConfig = [
// #docregion redirect-route
{
path: '',
@@ -32,6 +32,6 @@ export const routes: RouterConfig = [
}
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
index 47311fcd8d..075cc37496 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
@@ -9,6 +9,6 @@ const routes: RouterConfig = [
}
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts
index 33097804eb..c6074c3607 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts
@@ -7,7 +7,7 @@ import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
-export const routes: RouterConfig = [
+const routes: RouterConfig = [
{
path: '',
redirectTo: '/dashboard',
@@ -27,6 +27,6 @@ export const routes: RouterConfig = [
}
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
index da35003df1..f04d528627 100644
--- a/public/docs/_examples/toh-5/ts/app/main.ts
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -2,8 +2,8 @@
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [
- APP_ROUTER_PROVIDERS
+ appRouterProviders
]);
diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routes.ts
index 1d9adf33fd..e143b2a3bf 100644
--- a/public/docs/_examples/toh-6/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.routes.ts
@@ -5,7 +5,7 @@ import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
-export const routes: RouterConfig = [
+const routes: RouterConfig = [
{
path: '',
redirectTo: '/dashboard',
@@ -25,6 +25,6 @@ export const routes: RouterConfig = [
}
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index 948e2ca5ba..bda66d0377 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -12,20 +12,20 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { appRouterProviders } from './app.routes';
// #enddocregion v1, final
/*
// #docregion v1
bootstrap(AppComponent, [
- APP_ROUTER_PROVIDERS,
+ appRouterProviders,
HTTP_PROVIDERS
]);
// #enddocregion v1
*/
// #docregion final
bootstrap(AppComponent, [
- APP_ROUTER_PROVIDERS,
+ appRouterProviders,
HTTP_PROVIDERS,
{ provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
{ provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 8d7fa67496..e383ba3355 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -24,6 +24,7 @@
"zone.js": "0.6.12"
},
"devDependencies": {
+ "angular2-template-loader": "^0.4.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
diff --git a/public/docs/dart/latest/cookbook/dynamic-form-deprecated.html b/public/docs/dart/latest/cookbook/dynamic-form-deprecated.html
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/cookbook/dynamic-form-deprecated.html
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/animations.jade b/public/docs/dart/latest/guide/animations.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/dart/latest/guide/animations.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/dart/latest/guide/architecture.jade b/public/docs/dart/latest/guide/architecture.jade
index 2c6f1b04bc..f5f63c07a8 100644
--- a/public/docs/dart/latest/guide/architecture.jade
+++ b/public/docs/dart/latest/guide/architecture.jade
@@ -1,451 +1,72 @@
-include ../_util-fns
+extends ../../../ts/latest/guide/architecture.jade
+
+block includes
+ include ../_util-fns
+ - var _library_module = 'library'
+ - var _at_angular = 'angular2'
:marked
Angular 2 is a framework to help us build client applications in HTML and
either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
- Angular 2 for Dart is published as the `angular2` package, which
- (like many other Dart packages) is available via the Pub tool.
- With Angular, we write applications by composing HTML *templates* with Angularized markup,
- writing *component* classes to manage those templates, adding application logic in *services*,
- and handing the top root component to Angular's *bootstrapper*.
-
- Angular takes over, presenting our application content in a browser and responding to user interactions
- according to the instructions we provided.
-
-
-:marked
- Of course there is more to it than this.
- We're cruising at high altitude in this overview.
- We're looking for landmarks. We should expect the object below to be fuzzy and obscured by occasional clouds.
- Details become more clear and precise when we land in the chapters themselves.
-
-
-:marked
- An Angular 2 for Dart application rests on seven main building blocks:
- 1. [Components](#component)
- 1. [Templates](#template)
- 1. [Metadata](#metadata)
- 1. [Data binding](#data-binding)
- 1. [Directives](#directive)
- 1. [Services](#service)
- 1. [Dependency injection](#dependency-injection)
-
-figure
- img(src="/resources/images/devguide/architecture/overview.png" alt="overview" style="margin-left:-40px;" width="700")
-:marked
- Learn these seven and we're on our way.
-
-.l-main-section
-
-:marked
- ## Components
-figure
- img(src="/resources/images/devguide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
-:marked
- A **component** controls a patch of screen real estate that we could call a *view*.
- A set of navigation links, a list of heroes, a hero editor ...
- they're all views controlled by components.
-
- We define a component's application logic — what it does to support the view — inside a class.
- The class interacts with the view through an API of properties and methods.
-
-
- A `HeroListComponent`, for example, might have a `heroes` property that returns an array of heroes
- that it acquired from a service.
- It might have a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
- The component might be a class like this:
-
-+makeExample('architecture/dart/lib/hero_list_component.dart', 'class', 'lib/hero_list_component.dart')
-:marked
- Angular creates, updates, and destroys components as the user moves through the application.
- The developer can take action at each moment in this lifecycle through optional lifecycle hooks.
-
-
-.l-sub-section
+block angular-parts
:marked
- We may wonder who is calling the component's constructor? Who provides the service parameter?
- For the moment, have faith that Angular will call the constructor and deliver an
- appropriate `HeroService` when we need it.
+ Angular 2 for Dart is published as the `angular2` package, which
+ (like many other Dart packages) is available via the Pub tool.
-.l-main-section
-
-:marked
- ## Templates
-figure
- img(src="/resources/images/devguide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
-:marked
- We define a component's view with its companion **template**. A template is a form of HTML
- that tells Angular how to render the component.
+block modules-in-dart
+ .callout.is-helpful
+ header Dart difference: Modules are compilation units or packages
+ :marked
+ In this guide, the term _module_ refers to a Dart compilation unit, such
+ as a library, or a package. (If a Dart file has no `library` or `part`
+ directive, then that file itself is a library and thus a compilation
+ unit.) For more information about compilation units, see
+ the chapter on "Libraries and Scripts" in the
+ [Dart Language Specification](https://www.dartlang.org/docs/spec/).
- A template looks like regular HTML much of the time ... and then it gets a bit strange. Here is a
- template for our `HeroListComponent`:
-+makeExample('architecture/dart/lib/hero_list_component.html', null, 'lib/hero_list_component.html')
-:marked
- This template features typical HTML elements like `
` and `
`.
- But what are `*ngFor`, {{hero.name}}, `(click)`, `[hero]`, and ``?
- They're examples of Angular's template syntax.
- We'll grow accustomed to that syntax and may even learn to love it.
+block modules-are-optional
+ //- N/A
- Take a look at the last line,
- which has the `` tag.
- That tag adds a custom element representing a component we haven't seen yet,
- a `HeroDetailComponent`.
+block export-qualifier
+ .callout.is-helpful
+ header Dart difference: Public names are exported by default
+ :marked
+ Contrary to TypeScript, a Dart library always exports all names and
+ declarations in its **public** namespace, making explicit `export`
+ qualifiers unnecessary.
+
+ When we say that a module _exports_ a declaration, we mean that the
+ declaration is _public_. For more details about name spaces and export
+ statements, see the section on "Exports" in the
+ [Dart Language Specification](https://www.dartlang.org/docs/spec/).
- The `HeroDetailComponent` is a *different* component than the `HeroListComponent` we've seen.
- The `HeroDetailComponent` (code not shown) presents facts about a particular hero, the
- hero that the user selects from the list presented by the `HeroListComponent`.
- The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
+block ts-import
+ //- N/A
-figure
- img(src="/resources/images/devguide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px" )
-:marked
- Notice how `` rests comfortably among native HTML elements.
- We can and _will_ mix our custom components with native HTML in the same layouts.
-
- In this manner we'll compose complex component trees to build out our richly featured application.
-
-
-.l-main-section
-
-:marked
- ## Metadata
-figure
- img(src="/resources/images/devguide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px" )
-:marked
-
Metadata tells Angular how to process a class.
-
-:marked
- [Looking back at the code](#component-code) for `HeroListComponent`, we see that it's just a class.
- There is no evidence of a framework, no "Angular" in it at all.
-
- In fact, it really is *just a class*. It's not a component until we *tell Angular about it*.
-
- We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class.
-
- In Dart, we attach metadata by using an **annotation**.
- Here's some metadata for `HeroListComponent`:
-
-+makeExample('architecture/dart/lib/hero_list_component.dart', 'metadata', 'lib/hero_list_component.dart')
-:marked
- Here we see the `@Component` annotation, which (no surprise) identifies the class
- immediately below it as a component class.
-
- Annotations often have configuration parameters.
- The `@Component` annotation takes parameters to provide the
- information Angular needs to create and present the component and its view.
-
- Here we see a few of the possible `@Component` parameters:
-
- * `selector`: A CSS selector that tells Angular to create and insert an instance of this component
- where it finds a `` tag in *parent* HTML.
- For example, if an app's HTML contains ``, then
- Angular inserts an instance of the `HeroListComponent` view between those tags.
-
- * `templateUrl`: The address of this component's template, which we showed [above](#the-template).
-
- * `directives`: An array of the components or directives that *this* template requires.
- We saw in the last line of our template that we expect Angular to insert a `HeroDetailComponent`
- in the space indicated by `` tags.
- Angular will do so only if we mention the `HeroDetailComponent` in this `directives` array.
-
- * `providers`: An array of **dependency injection providers** for services that the component requires.
- This is one way to tell Angular that our component's constructor requires a `HeroService`
- so it can get the list of heroes to display. We'll get to dependency injection later.
-figure
- img(src="/resources/images/devguide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px" )
-
-:marked
- At runtime, Angular discovers the metadata specified by the `@Component`
- annotation. That's how Angular learns how to do "the right thing".
-
- The template, metadata, and component together describe the view.
-
- We apply other metadata annotations in a similar fashion to guide Angular behavior.
- `@Injectable`, `@Input`, `@Output`, and `@RouterConfig` are a few of the more popular annotations
- we'll master as our Angular knowledge grows.
-
-:marked
- The architectural takeaway is that we must add metadata to our code
- so that Angular knows what to do.
-
-.l-main-section
-
-:marked
- ## Data binding
- Without a framework, we would be responsible for pushing data values into the HTML controls and turning user responses
- into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
- read as any experienced jQuery programmer can attest.
-figure
- img(src="/resources/images/devguide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px" )
-:marked
- Angular supports **data binding**,
- a mechanism for coordinating parts of a template with parts of a component.
- We add binding markup to the template HTML to tell Angular how to connect both sides.
-
- There are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions —
- as indicated by the arrows in the diagram.
-
-:marked
- We saw three forms of data binding in our [example](#template) template:
-+makeExample('architecture/dart/lib/hero_list_component_1.html', 'binding')(format=".")
-:marked
- * The {{hero.name}} [interpolation](displaying-data.html#interpolation)
- displays the component's `hero.name` property value within the `
` tags.
-
- * The `[hero]` property binding
- passes the value of `selectedHero` from
- the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
-
- * The `(click)` [event binding](user-input.html#click) calls the component's `selectHero` method when the user clicks a hero's name.
-
- **Two-way data binding** is an important fourth form
- that combines property and event binding in a single notation, using the `ngModel` directive.
- We didn't have a two-way binding in the `HeroListComponent` template;
- here's an example from the `HeroDetailComponent` template:
-
-+makeExample('architecture/dart/lib/hero_detail_component.html', 'ng-model', 'lib/hero_detail_component.html (excerpt)')(format=".")
-:marked
- In two-way binding, a data property value flows to the input box from the component as with property binding.
- The user's changes also flow back to the component, resetting the property to the latest value,
- as with event binding.
-
- Angular processes *all* data bindings once per JavaScript event cycle,
- depth-first from the root of the application component tree.
-
-figure
- img(src="/resources/images/devguide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
-:marked
- We don't know all the details yet,
- but it's clear from these examples that data binding plays an important role in communication
- between a template and its component.
-
-figure
- img(src="/resources/images/devguide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
-:marked
- Data binding is also important for communication between parent and child components.
-
-
-.l-main-section
-
-:marked
- ## Directives
-figure
- img(src="/resources/images/devguide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px" )
-:marked
- Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
- according to the instructions given by **directives**.
-
- A directive is a class with directive metadata. In Dart we apply the `@Directive` annotation
- to attach metadata to the class.
-
-:marked
- We already met one form of directive: the component. A component is a *directive-with-a-template*;
- a `@Component` annotation is actually a `@Directive` annotation extended with template-oriented features.
-
-.l-sub-section
+block angular-library-modules
:marked
- While **a component is technically a directive**,
- components are so distinctive and central to Angular applications that we chose
- to separate components from directives in this architectural overview.
-:marked
- Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
+ Angular ships as a collection of libraries within the
+ [**angular2**](https://pub.dartlang.org/packages/angular2) package.
- They tend to appear within an element tag like attributes,
- sometimes by name but more often as the target of an assignment or a binding.
+block angular-imports
+ +makeExcerpt('app/app.component.ts', 'import')
- **Structural** directives alter layout by adding, removing, and replacing elements in DOM.
-
- Our [example](#template) template uses two built-in structural directives:
-+makeExample('architecture/dart/lib/hero_list_component_1.html', 'structural')(format=".")
-:marked
- * [`*ngFor`](displaying-data.html#ng-for) tells Angular to stamp out one `
` per hero in the `heroes` list.
- * [`*ngIf`](displaying-data.html#ng-if) includes the `HeroDetail` component only if a selected hero exists.
-
-.l-sub-section
+block ts-decorator
:marked
- In Dart, **the only value that is true is the boolean value `true`**; all
- other values are false. JavaScript and TypeScript, in contrast, treat values
- such as 1 and most non-null objects as true. For this reason, the JavaScript
- and TypeScript versions of this app can use just `selectedHero` as the value
- of the `*ngIf` expression. The Dart version must use a boolean operator such
- as `!=` instead.
+ Annotations often have configuration parameters.
+ The `@Component` annotation takes parameters to provide the
+ information Angular needs to create and present the component and its view.
-:marked
- **Attribute** directives alter the appearance or behavior of an existing element.
- In templates they look like regular HTML attributes, hence the name.
+ Here are a few of the possible `@Component` parameters:
- The `ngModel` directive, which implements two-way data binding, is
- an example of an attribute directive. `ngModel` modifies the behavior of
- an existing element (typically an ``)
- by setting its display value property and responding to change events.
-
-+makeExample('architecture/dart/lib/hero_detail_component.html', 'ng-model')(format=".")
-:marked
- Angular ships with a small number of other directives that either alter the layout structure
- (for example, `ngSwitch`)
- or modify aspects of DOM elements and components
- (for example, `ngStyle` and `ngClass`).
-
-
- Of course, we can also write our own directives. Components such as
- `HeroListComponent` are one kind of custom directive.
-
-
-.l-main-section
-
-:marked
- ## Services
-figure
- img(src="/resources/images/devguide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px" )
-:marked
- _Services_ is a broad category encompassing any value, function, or feature that our application needs.
-
- Almost anything can be a service.
- A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
-
-:marked
- Examples include:
- * logging service
- * data service
- * message bus
- * tax calculator
- * application configuration
-
- There is nothing specifically _Angular_ about services. Angular itself has no definition of a service.
- There is no service base class, and no place to register a service.
-
- Yet services are fundamental to any Angular application. Our components are big consumers of services.
-
- We prefer our component classes lean. Our components don't fetch data from the server,
- they don't validate user input, and they don't log directly to console. They delegate such tasks to services.
-
- A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template)
- and the application logic (which often includes some notion of a _model_).
- A good component presents properties and methods for data binding.
- It delegates everything nontrivial to services.
-
- Angular doesn't *enforce* these principles.
- It won't complain if we write a "kitchen sink" component with 3000 lines.
-
- Angular does help us *follow* these principles by making it easy to factor our
- application logic into services and make those services available to components through *dependency injection*.
-
-.l-main-section
-
-:marked
- ## Dependency injection
-figure
- img(src="/resources/images/devguide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px" )
-:marked
- Dependency injection is a way to supply a new instance of a class
- with the fully-formed dependencies it requires. Most dependencies are services.
- Angular uses dependency injection to provide new components with the services they need.
-
-:marked
- Angular can tell which services a component needs by looking at the types of its constructor parameters.
- For example, the constructor of our `HeroListComponent` needs a `HeroService`:
-+makeExample('architecture/dart/lib/hero_list_component.dart', 'ctor', 'lib/hero_list_component.dart (excerpt)')(format='.')
-:marked
- When Angular creates a component, it first asks an **injector** for
- the services that the component requires.
-
- An injector maintains a container of service instances that it has previously created.
- If a requested service instance is not in the container, the injector makes one and adds it to the container
- before returning the service to Angular.
- When all requested services have been resolved and returned,
- Angular can call the component's constructor with those services as arguments.
- This is what we mean by *dependency injection*.
-
- The process of `HeroService` injection looks a bit like this:
-figure
- img(src="/resources/images/devguide/architecture/injector-injects.png" alt="Service" )
-:marked
- If the injector doesn't have a `HeroService`, how does it know how to make one?
-
- In brief, we must have previously registered a **provider** of the `HeroService` with the injector.
- A provider is something that can create or return a service, typically the service class itself.
-
- We can register providers at any level of the application component tree.
- We often do so at the root when we bootstrap the application so that
- the same instance of a service is available everywhere.
-+makeExample('architecture/dart/web/main.dart', 'bootstrap', 'web/main.dart (excerpt)')(format='.')
-:marked
- Alternatively, we might register at a component level:
-+makeExample('architecture/dart/lib/hero_list_component.dart', 'providers', 'lib/hero_list_component.dart (excerpt)')(format='.')
-:marked
- Registering at a component level means we get a new instance of the
- service with each new instance of that component.
-
-
-
- Points to remember about dependency injection:
-
- * Dependency injection is wired into the Angular framework and used everywhere.
-
- * The *injector* is the main mechanism.
- * An injector maintains a *container* of service instances that it created.
- * An injector can create a new service instance from a *provider*.
-
- * A *provider* is a recipe for creating a service.
-
- * We register *providers* with injectors.
-
-
-.l-main-section
-:marked
- ## Other stuff
-
- We've learned just a bit about the seven main building blocks of an Angular application:
- 1. [Components](#component)
- 1. [Templates](#template)
- 1. [Metadata](#metadata)
- 1. [Data binding](#data-binding)
- 1. [Directives](#directive)
- 1. [Services](#service)
- 1. [Dependency injection](#dependency-injection)
-
- That's a foundation for everything else in an Angular application,
- and it's more than enough to get going.
- But it doesn't include everything we'll need or want to know.
-
- Here is a brief, alphabetical list of other important Angular features and services.
- Most of them are covered in this Developers Guide (or soon will be).
-
- >**Animations:** A forthcoming animation library makes it easy for developers to animate component behavior
- without deep knowledge of animation techniques or CSS.
-
- >**Bootstrap:** A method to configure and launch the root application component.
-
- >**Change detection:** Learn how Angular decides that a component property value has changed and
- when to update the screen.
- Learn how it uses **zones** to intercept asynchronous activity and run its change detection strategies.
-
- >**Component router:** With the component Router service, users can navigate a multi-screen application
- in a familiar web browsing style using URLs.
-
- >**Events:** The DOM raises events. So can components and services. Angular offers mechanisms for
- publishing and subscribing to events including an implementation of the [RxJS Observable](https://github.com/zenparsing/es-observable) proposal.
-
- >**[Forms](forms.html):** Support complex data entry scenarios with HTML-based validation and dirty checking.
-
- >**HTTP:** Communicate with a server to get data, save data, and invoke server-side actions with this Angular HTTP client.
-
- >**Lifecycle hooks:** We can tap into key moments in the lifetime of a component, from its creation to its destruction,
- by implementing the lifecycle hook interfaces.
-
- >**Pipes:** Services that transform values for display.
- We can put pipes in our templates to improve the user experience. Consider
- this `currency` pipe expression:
-
-:marked
- >It displays a price of "42.33" as `$42.33`.
-
- >**Testing:** Angular provides a
- [testing library](https://pub.dartlang.org/packages/angular2_testing)
- to run unit tests on our application parts as they interact with the Angular framework.
+block dart-bool
+ .callout.is-helpful
+ header Dart difference: Only true is true
+ :marked
+ In Dart, **the only value that is true is the boolean value `true`**; all
+ other values are false. JavaScript and TypeScript, in contrast, treat values
+ such as 1 and most non-null objects as true. For this reason, the JavaScript
+ and TypeScript versions of this app can use just `selectedHero` as the value
+ of the `*ngIf` expression. The Dart version must use a boolean operator such
+ as `!=` instead.
diff --git a/public/docs/dart/latest/guide/component-styles.jade b/public/docs/dart/latest/guide/component-styles.jade
index 71507a7d01..967dc2d8b0 100644
--- a/public/docs/dart/latest/guide/component-styles.jade
+++ b/public/docs/dart/latest/guide/component-styles.jade
@@ -19,7 +19,7 @@ block css-import-url
.alert.is-important
:marked
URLs are currently not interpreted in this way, see
- [issue 8518](href="https://github.com/angular/angular/issues/8518").
+ [issue 8518](https://github.com/angular/angular/issues/8518).
Until this issue is fixed, absolute package-reference style URLs must
be given as is illustrated below.
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index ad695a9732..7236d24c7d 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -101,7 +101,7 @@ block dart-map-alternative
As an alternative to using a configuration `Map`, we can define
a custom configuration class:
- +makeExample('dependency-injection/ts/app/app.config.ts','config-alt','app/app-config.ts (alternative config)')(format='.')
+ +makeExample('lib/app_config.dart (alternative config)','config-alt')
:marked
Defining a configuration class has a few benefits. One key benefit
diff --git a/public/docs/dart/latest/guide/forms-deprecated.html b/public/docs/dart/latest/guide/forms-deprecated.html
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/guide/forms-deprecated.html
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade
index e78d9c19eb..19b7d09aa5 100644
--- a/public/docs/dart/latest/guide/forms.jade
+++ b/public/docs/dart/latest/guide/forms.jade
@@ -517,7 +517,7 @@ figure.image-display
Recall from the previous section that `ngControl` registered this input box with the
`NgForm` directive as "name".
- We didn't add the **[`NgForm`](../api/common/NgForm-directive.html) directive*
+ We didn't add the **[`NgForm`](../api/common/index/NgForm-directive.html) directive*
explicitly. Angular added it surreptitiously, wrapping it around the `