diff --git a/gulpfile.js b/gulpfile.js index 05a7d1d92f..4350650dd2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -461,7 +461,7 @@ gulp.task('_copy-example-boilerplate', function (done) { return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done); }); -//Builds Angular 2 Docs CSS file from Bootstrap npm LESS source +//Builds Angular Docs CSS file from Bootstrap npm LESS source //and copies the result to the _examples folder to be included as //part of the example boilerplate. function buildStyles(cb, done){ diff --git a/harp.json b/harp.json index e1b6aa9125..8309b019c8 100644 --- a/harp.json +++ b/harp.json @@ -85,7 +85,7 @@ "picture": "/resources/images/bios/tobias.jpg", "twitter": "tbosch1009", "website": "https://plus.google.com/+TobiasBosch", - "bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular 2.", + "bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular.", "type": "Google" }, @@ -184,7 +184,7 @@ "picture": "/resources/images/bios/hansl.jpg", "twitter": "hanslatwork", "website": "http://www.codingatwork.com/", - "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular2, using Material Design components and the CLI tool.", + "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular, using Material Design components and the CLI tool.", "type": "Google" }, @@ -316,6 +316,12 @@ "bio": "Max Sills is Angular's Open Source lawyer.", "type": "Google" }, + "shannon": { + "name": "Shannon Ayres", + "picture": "/resources/images/bios/shannon.jpg", + "bio": "Shannon is a technical editor in Developer Relations at Google. She loves movies, especially Sunset Boulevard, and her favorite TV show is The Walking Dead. Her mission: Righting wrong writing!", + "type": "Google" + }, "pawel": { "name": "Pawel Kozlowski", @@ -354,7 +360,7 @@ "picture": "/resources/images/bios/marclaval.jpg", "twitter": "marclaval", "website": "https://github.com/mlaval", - "bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular 2.", + "bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular.", "type": "Community" }, @@ -372,7 +378,7 @@ "picture": "/resources/images/bios/patrick-stapleton.jpg", "twitter": "gdi2290", "website": "https://angularclass.com", - "bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular2, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular 2 server-side rendering as Universal Angular 2 and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.", + "bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular2, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.", "type": "Community" }, diff --git a/package.json b/package.json index 96040cee6b..5ab4ceea6d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "angular.io", "version": "0.0.0", "private": true, - "description": "Angular 2 documentation", + "description": "Angular documentation", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -48,7 +48,7 @@ "gulp-tslint": "^5.0.0", "gulp-util": "^3.0.6", "gulp-watch": "^4.3.4", - "harp": "git://github.com/filipesilva/harp.git#8da8d3497ddbfcbcbadd8be63e0fd731d7310cc4", + "harp": "0.21.0-pre.1", "html2jade": "^0.8.4", "indent-string": "^2.1.0", "jasmine-core": "^2.3.4", @@ -77,4 +77,4 @@ "jstransformer-marked": "^1.0.1" }, "homepage": "http://angular.io/" -} \ No newline at end of file +} diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index b4afb2ce7c..479bef42db 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -18,7 +18,7 @@ else h3.text-headline 资源库 ul.text-body - // TODO: (ericjim) make a libraries page to showcase all angular 2 libraries + // TODO: (ericjim) make a libraries page to showcase all angular libraries //li Libraries li About li 关于 diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade index a28242c552..463ce9a786 100644 --- a/public/_includes/_head-include.jade +++ b/public/_includes/_head-include.jade @@ -12,7 +12,7 @@ if title == "Angular" else if language title #{title} - #{language} else - title #{title} - Angular 2 + title #{title} - Angular meta(charset="utf-8") meta(http-equiv="X-UA-Compatible" content="IE=edge") @@ -22,14 +22,14 @@ meta(name="robots" content="all") meta(name="referrer" content="origin") meta(name="viewport" id="viewport" content="width=device-width, initial-scale=1") -meta(property="og:title" content="Angular 2") +meta(property="og:title" content="Angular") meta(property="og:image" content="/resources/images/logos/standard/shield-large.png") meta(property="og:image:type" content="image/png") meta(property="og:image:width" content="184") meta(property="og:image:height" content="200") meta(property="og:description" content="#{description}") -meta(itemprop="name" content="Angular 2") +meta(itemprop="name" content="Angular") meta(itemprop="description" content="#{description}") meta(itemprop="image" content="/resources/images/logos/standard/shield-large.png") diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index 7efde1434c..d54f759625 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -44,20 +44,20 @@ mixin tree(directory, urlPrefix, name, latest) //- BUTTON TITLE GENERATION if language == 'ts' if version == "latest" - - var title = 'Angular 2 for TypeScript' + - var title = 'Angular for TypeScript' else - var title = 'Angular ' + version + ' for TypeScript' if language == 'js' if version == "latest" - - var title = 'Angular 2 for JavaScript' + - var title = 'Angular for JavaScript' else - var title = 'Angular ' + version + ' for JavaScript' if language == 'dart' if version == "latest" - - var title = 'Angular 2 for Dart' + - var title = 'Angular for Dart' else - var title = 'Angular ' + version + ' for Dart' @@ -69,8 +69,8 @@ nav.dropdown ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''") - mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript") - mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript") + mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript") + mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript") //- Disable cross-language link for API entry pages (but keep for top API search page): if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]) - mixin tree(public.docs.dart, "/docs/dart", "Angular 2 for Dart") + mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart") diff --git a/public/contribute.jade b/public/contribute.jade index ce4a9d5caa..139127dc13 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -5,14 +5,14 @@ p 我们希望你能给我们的源代码做出贡献,让Angular项目变得更好。 .l-sub-section - h3 Angular 2 + h3 Angular - p Angular 2 is a next generation mobile and desktop application development platform. + p Angular is a next generation mobile and desktop application development platform. - p Angular 2是下一代移动与桌面应用开发平台。 + p Angular是下一代移动与桌面应用开发平台。 - a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2 - a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) 为Angular 2做贡献 + a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular + a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) 为Angular做贡献 .l-sub-section h3 Angular for JavaScript or Dart diff --git a/public/docs/_examples/_protractor/protractor.config.js b/public/docs/_examples/_protractor/protractor.config.js index f6a2140311..92bdbfeee2 100644 --- a/public/docs/_examples/_protractor/protractor.config.js +++ b/public/docs/_examples/_protractor/protractor.config.js @@ -26,7 +26,7 @@ exports.config = { // Framework to use. Jasmine is recommended. framework: 'jasmine', - // For angular2 tests + // For angular tests useAllAngular2AppRoots: true, baseUrl: 'http://localhost:8080', diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts index 9b6319db66..31eefbf345 100644 --- a/public/docs/_examples/animations/e2e-spec.ts +++ b/public/docs/_examples/animations/e2e-spec.ts @@ -4,7 +4,7 @@ * The tests here basically just checking that the end styles * of each animation are in effect. * - * Relies on the Angular 2 testability only becoming stable once + * Relies on the Angular testability only becoming stable once * animation(s) have finished. * * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations diff --git a/public/docs/_examples/animations/ts/plnkr.json b/public/docs/_examples/animations/ts/plnkr.json index 5a4139282b..4fface319e 100644 --- a/public/docs/_examples/animations/ts/plnkr.json +++ b/public/docs/_examples/animations/ts/plnkr.json @@ -1,5 +1,5 @@ { - "description": "Angular 2 Animations", + "description": "Angular Animations", "files":[ "!**/*.d.ts", "!**/*.js" diff --git a/public/docs/_examples/architecture/dart/web/index.html b/public/docs/_examples/architecture/dart/web/index.html index a422e64542..840f107c53 100644 --- a/public/docs/_examples/architecture/dart/web/index.html +++ b/public/docs/_examples/architecture/dart/web/index.html @@ -1,7 +1,7 @@ - Architecture of Angular 2 + Architecture of Angular diff --git a/public/docs/_examples/architecture/e2e-spec.ts b/public/docs/_examples/architecture/e2e-spec.ts index 54bf9be8f2..0bdcdd0069 100644 --- a/public/docs/_examples/architecture/e2e-spec.ts +++ b/public/docs/_examples/architecture/e2e-spec.ts @@ -10,7 +10,7 @@ class Hero { describe('Architecture', () => { - const expectedTitle = 'Architecture of Angular 2'; + const expectedTitle = 'Architecture of Angular'; const expectedH2 = ['Hero List', 'Sales Tax Calculator']; beforeAll(() => browser.get('')); diff --git a/public/docs/_examples/architecture/ts/app/mini-app.ts b/public/docs/_examples/architecture/ts/app/mini-app.ts index 8a35a607a2..b064428be3 100644 --- a/public/docs/_examples/architecture/ts/app/mini-app.ts +++ b/public/docs/_examples/architecture/ts/app/mini-app.ts @@ -13,7 +13,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-app', - template: 'Welcome to Angular 2' + template: 'Welcome to Angular' }) export class AppComponent { constructor(logger: Logger) { diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html index e365c39f02..090bd17c7b 100644 --- a/public/docs/_examples/architecture/ts/index.html +++ b/public/docs/_examples/architecture/ts/index.html @@ -1,7 +1,7 @@ - Architecture of Angular 2 + Architecture of Angular diff --git a/public/docs/_examples/architecture/ts/mini-app.html b/public/docs/_examples/architecture/ts/mini-app.html index a17a191e90..ecb7dd21ae 100644 --- a/public/docs/_examples/architecture/ts/mini-app.html +++ b/public/docs/_examples/architecture/ts/mini-app.html @@ -1,7 +1,7 @@ - Architecture of Angular 2 + Architecture of Angular diff --git a/public/docs/_examples/architecture/ts/plnkr.json b/public/docs/_examples/architecture/ts/plnkr.json index 3acf69014c..9a4180a9d4 100644 --- a/public/docs/_examples/architecture/ts/plnkr.json +++ b/public/docs/_examples/architecture/ts/plnkr.json @@ -1,5 +1,5 @@ { - "description": "Intro to Angular2", + "description": "Intro to Angular", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts index 1f7c00704c..fe72681ee3 100644 --- a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts +++ b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts @@ -9,7 +9,7 @@ describe('AOT Compilation', function () { it('should load page and click button', function (done) { let headingSelector = element.all(by.css('h1')).get(0); - expect(headingSelector.getText()).toEqual('My First Angular 2 App'); + expect(headingSelector.getText()).toEqual('My First Angular App'); expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true); expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true); diff --git a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.html b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.html index c6a7babb8b..4d7dd8c63f 100644 --- a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.html +++ b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.html @@ -1,6 +1,6 @@ -

My First Angular 2 App

+

My First Angular App

List of Heroes

{{hero}}
diff --git a/public/docs/_examples/cb-set-document-title/ts/plnkr.json b/public/docs/_examples/cb-set-document-title/ts/plnkr.json index 0131610c20..1863d49471 100644 --- a/public/docs/_examples/cb-set-document-title/ts/plnkr.json +++ b/public/docs/_examples/cb-set-document-title/ts/plnkr.json @@ -1,5 +1,5 @@ { - "description": "Set The Document Title In Angular 2", + "description": "Set The Document Title In Angular", "files": [ "!**/*.d.ts", "!**/*.js", diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled index f214b75d93..ef30b01ec1 100644 --- a/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled +++ b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled @@ -7,6 +7,6 @@ describe('cli-quickstart App', () => { it('should display message saying app works', () => { let pageTitle = element(by.css('cli-quickstart-app h1')).getText(); - expect(pageTitle).toEqual('My First Angular 2 App'); + expect(pageTitle).toEqual('My First Angular App'); }); }); diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts index 5510df7476..8c6b3a43cc 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; // #enddocregion metadata // #docregion title, class export class CliQuickstartAppComponent { - title = 'My First Angular 2 App'; + title = 'My First Angular App'; } // #enddocregion title, class diff --git a/public/docs/_examples/forms/js/app/hero-form.component.js b/public/docs/_examples/forms/js/app/hero-form.component.js index 428ff82d35..505993a1fd 100644 --- a/public/docs/_examples/forms/js/app/hero-form.component.js +++ b/public/docs/_examples/forms/js/app/hero-form.component.js @@ -48,5 +48,5 @@ // #docregion first, final }); - // #enddocregion first, final })(window.app || (window.app = {})); +// #enddocregion first, final diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html index aa342316ab..5637880406 100644 --- a/public/docs/_examples/homepage-hello-world/ts/index.1.html +++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html @@ -2,7 +2,7 @@ - Angular 2 Hello World + Angular Hello World diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html index 794935d3bb..283343ace7 100644 --- a/public/docs/_examples/homepage-hello-world/ts/index.html +++ b/public/docs/_examples/homepage-hello-world/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Hello World + Angular Hello World diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html index 600739b704..6ff25956dc 100644 --- a/public/docs/_examples/homepage-tabs/ts/index.1.html +++ b/public/docs/_examples/homepage-tabs/ts/index.1.html @@ -2,7 +2,7 @@ - Angular 2 Tabs + Angular Tabs diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html index 1fe2ebc8ba..66ce8f3ecc 100644 --- a/public/docs/_examples/homepage-tabs/ts/index.html +++ b/public/docs/_examples/homepage-tabs/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Tabs + Angular Tabs diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html index 181cf44ce2..26800d3e05 100644 --- a/public/docs/_examples/homepage-todo/ts/index.1.html +++ b/public/docs/_examples/homepage-todo/ts/index.1.html @@ -2,7 +2,7 @@ - Angular 2 Todos + Angular Todos diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html index 2bddce017c..8839065224 100644 --- a/public/docs/_examples/homepage-todo/ts/index.html +++ b/public/docs/_examples/homepage-todo/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Todos + Angular Todos diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html index 6fa866c6e6..07cf7d4a03 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/index.html +++ b/public/docs/_examples/lifecycle-hooks/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Lifecycle Hooks + Angular Lifecycle Hooks diff --git a/public/docs/_examples/plunker.README.md b/public/docs/_examples/plunker.README.md index 5bcc99414d..fa2e46f47a 100644 --- a/public/docs/_examples/plunker.README.md +++ b/public/docs/_examples/plunker.README.md @@ -1,2 +1,2 @@ -### Angular 2 Documentation Example +### Angular Documentation Example diff --git a/public/docs/_examples/quickstart/e2e-spec.ts b/public/docs/_examples/quickstart/e2e-spec.ts index 4a6d169756..5a1c683cfd 100644 --- a/public/docs/_examples/quickstart/e2e-spec.ts +++ b/public/docs/_examples/quickstart/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; describe('QuickStart E2E Tests', function () { - let expectedMsg = 'My First Angular 2 App'; + let expectedMsg = 'My First Angular App'; beforeEach(function () { browser.get(''); diff --git a/public/docs/_examples/quickstart/js/app/app.component.js b/public/docs/_examples/quickstart/js/app/app.component.js index f86b3bde46..69d3e9127e 100644 --- a/public/docs/_examples/quickstart/js/app/app.component.js +++ b/public/docs/_examples/quickstart/js/app/app.component.js @@ -10,7 +10,7 @@ ng.core.Component({ // #enddocregion ng-namespace-funcs selector: 'my-app', - template: '

My First Angular 2 App

' + template: '

My First Angular App

' // #docregion ng-namespace-funcs }) // #enddocregion component diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html index 551e4fb134..03fcbb37c4 100644 --- a/public/docs/_examples/quickstart/js/index.html +++ b/public/docs/_examples/quickstart/js/index.html @@ -2,7 +2,7 @@ - Angular 2 QuickStart JS + Angular QuickStart JS diff --git a/public/docs/_examples/quickstart/ts/app/app.component.ts b/public/docs/_examples/quickstart/ts/app/app.component.ts index ea76b32116..e6c635440b 100644 --- a/public/docs/_examples/quickstart/ts/app/app.component.ts +++ b/public/docs/_examples/quickstart/ts/app/app.component.ts @@ -6,7 +6,7 @@ import { Component } from '@angular/core'; // #docregion metadata @Component({ selector: 'my-app', - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) // #enddocregion metadata // #docregion class diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html index fef30ef98b..4ee082433c 100644 --- a/public/docs/_examples/quickstart/ts/index.html +++ b/public/docs/_examples/quickstart/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 QuickStart + Angular QuickStart diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 4fe519331e..35efebb2c2 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -1,5 +1,5 @@ { - "name": "angular2-quickstart", + "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js index d92e1361d0..852c46168d 100644 --- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js +++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js @@ -1,6 +1,6 @@ // #docregion /** - * System configuration for Angular 2 samples + * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html index c2d2656c84..d265bef2f9 100644 --- a/public/docs/_examples/server-communication/ts/index.html +++ b/public/docs/_examples/server-communication/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Http Demo + Angular Http Demo diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html index da815d8e69..2dc2548cc4 100644 --- a/public/docs/_examples/structural-directives/ts/index.html +++ b/public/docs/_examples/structural-directives/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Structural Directives + Angular Structural Directives diff --git a/public/docs/_examples/styleguide/e2e-spec.ts b/public/docs/_examples/styleguide/e2e-spec.ts index 6dc2753038..321e86c8a1 100644 --- a/public/docs/_examples/styleguide/e2e-spec.ts +++ b/public/docs/_examples/styleguide/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; describe('Documentation StyleGuide E2E Tests', function() { - let expectedMsg = 'My First Angular 2 App'; + let expectedMsg = 'My First Angular App'; beforeEach(function () { browser.get(''); diff --git a/public/docs/_examples/styleguide/js/app.js b/public/docs/_examples/styleguide/js/app.js index 61a0f2ae31..d38669cd78 100644 --- a/public/docs/_examples/styleguide/js/app.js +++ b/public/docs/_examples/styleguide/js/app.js @@ -8,7 +8,7 @@ app.AppComponent = selector: 'my-app', // #enddocregion // #docregion view - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) // #enddocregion // #docregion class @@ -48,7 +48,7 @@ app.AppComponent = function AppComponent () {} app.AppComponent.annotations = [ new ng.core.Component({ selector: 'my-app', - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) ]; // #enddocregion diff --git a/public/docs/_examples/styleguide/ts/app/app.component.ts b/public/docs/_examples/styleguide/ts/app/app.component.ts index 7659920b9f..8b71f6ddc4 100644 --- a/public/docs/_examples/styleguide/ts/app/app.component.ts +++ b/public/docs/_examples/styleguide/ts/app/app.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-app', - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) export class AppComponent { } diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js index fa3e0cc61f..cc06fc9422 100644 --- a/public/docs/_examples/systemjs.config.js +++ b/public/docs/_examples/systemjs.config.js @@ -1,5 +1,5 @@ /** - * System configuration for Angular 2 samples + * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { diff --git a/public/docs/_examples/systemjs.config.plunker.build.js b/public/docs/_examples/systemjs.config.plunker.build.js index 5334adf005..36ad2c7d16 100644 --- a/public/docs/_examples/systemjs.config.plunker.build.js +++ b/public/docs/_examples/systemjs.config.plunker.build.js @@ -1,7 +1,7 @@ /** * PLUNKER VERSION FOR CURRENT ANGULAR BUILD * (based on systemjs.config.js in angular.io) - * System configuration for Angular 2 samples + * System configuration for Angular samples * Adjust as necessary for your application needs. * * UNTESTED ! diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 26b8a17aab..ccfee00019 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -1,7 +1,7 @@ /** * PLUNKER VERSION * (based on systemjs.config.js in angular.io) - * System configuration for Angular 2 samples + * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { diff --git a/public/docs/_examples/testing/ts/app-specs.html b/public/docs/_examples/testing/ts/app-specs.html index c51f6cdedc..c41fbf88ea 100644 --- a/public/docs/_examples/testing/ts/app-specs.html +++ b/public/docs/_examples/testing/ts/app-specs.html @@ -30,6 +30,7 @@ diff --git a/public/docs/_examples/testing/ts/app/about.component.spec.ts b/public/docs/_examples/testing/ts/app/about.component.spec.ts new file mode 100644 index 0000000000..dbc7361823 --- /dev/null +++ b/public/docs/_examples/testing/ts/app/about.component.spec.ts @@ -0,0 +1,26 @@ +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { AboutComponent } from './about.component'; +import { HighlightDirective } from './shared/highlight.directive'; + +let fixture: ComponentFixture; + +describe('AboutComponent (highlightDirective)', () => { + // #docregion tests + beforeEach(() => { + fixture = TestBed.configureTestingModule({ + declarations: [ AboutComponent, HighlightDirective], + schemas: [ NO_ERRORS_SCHEMA ] + }) + .createComponent(AboutComponent); + fixture.detectChanges(); // initial binding + }); + + it('should have skyblue

', () => { + const de = fixture.debugElement.query(By.css('h2')); + expect(de.styles['backgroundColor']).toBe('skyblue'); + }); + // #enddocregion tests +}); diff --git a/public/docs/_examples/testing/ts/app/about.component.ts b/public/docs/_examples/testing/ts/app/about.component.ts index b2690f5a93..90e7132b4c 100644 --- a/public/docs/_examples/testing/ts/app/about.component.ts +++ b/public/docs/_examples/testing/ts/app/about.component.ts @@ -1,12 +1,9 @@ // #docregion -import { Component } from '@angular/core'; - +import { Component } from '@angular/core'; @Component({ template: `

About

-

All about this sample

- `, - styleUrls: ['app/shared/styles.css'] +

All about this sample

` }) export class AboutComponent { } diff --git a/public/docs/_examples/testing/ts/app/app-routing.module.ts b/public/docs/_examples/testing/ts/app/app-routing.module.ts new file mode 100644 index 0000000000..6096a513df --- /dev/null +++ b/public/docs/_examples/testing/ts/app/app-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AboutComponent } from './about.component'; + +@NgModule({ + imports: [ + RouterModule.forRoot([ + { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + { path: 'about', component: AboutComponent }, + { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'} + ]) + ], + exports: [ RouterModule ] // re-export the module declarations +}) +export class AppRoutingModule { }; diff --git a/public/docs/_examples/testing/ts/app/app.component.html b/public/docs/_examples/testing/ts/app/app.component.html index 3690f3cf11..232bcebb6d 100644 --- a/public/docs/_examples/testing/ts/app/app.component.html +++ b/public/docs/_examples/testing/ts/app/app.component.html @@ -1,3 +1,4 @@ + diff --git a/public/docs/_examples/testing/ts/app/app.component.router.spec.ts b/public/docs/_examples/testing/ts/app/app.component.router.spec.ts index 36e34a983e..db0effd427 100644 --- a/public/docs/_examples/testing/ts/app/app.component.router.spec.ts +++ b/public/docs/_examples/testing/ts/app/app.component.router.spec.ts @@ -7,9 +7,7 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick, import { RouterTestingModule } from '@angular/router/testing'; import { SpyLocation } from '@angular/common/testing'; -// tslint:disable:no-unused-variable -import { newEvent } from '../testing'; -// tslint:enable:no-unused-variable +import { click } from '../testing'; // r - for relatively obscure router symbols import * as r from '@angular/router'; @@ -48,9 +46,8 @@ describe('AppComponent & RouterTestingModule', () => { it('should navigate to "About" on click', fakeAsync(() => { createComponent(); - // page.aboutLinkDe.triggerEventHandler('click', null); // fails - // page.aboutLinkDe.nativeElement.dispatchEvent(newEvent('click')); // fails - page.aboutLinkDe.nativeElement.click(); // fails in phantom + click(page.aboutLinkDe); + // page.aboutLinkDe.nativeElement.click(); // ok but fails in phantom advance(); expectPathToBe('/about'); 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 c9fd54535f..2f10eec6d5 100644 --- a/public/docs/_examples/testing/ts/app/app.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts @@ -1,108 +1,94 @@ +// #docplaster import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; -import { BannerComponent } from './banner.component'; -import { SharedModule } from './shared/shared.module'; + // #docregion setup-schemas + import { NO_ERRORS_SCHEMA } from '@angular/core'; + // #enddocregion setup-schemas + // #docregion setup-stubs-w-imports + import { Component } from '@angular/core'; + // #docregion setup-schemas + import { AppComponent } from './app.component'; + // #enddocregion setup-schemas + import { BannerComponent } from './banner.component'; + import { RouterLinkStubDirective } from '../testing'; + // #docregion setup-schemas + import { RouterOutletStubComponent } from '../testing'; -import { Router, FakeRouter, FakeRouterLinkDirective, FakeRouterOutletComponent -} from '../testing'; + // #enddocregion setup-schemas + @Component({selector: 'app-welcome', template: ''}) + class WelcomeStubComponent {} + // #enddocregion setup-stubs-w-imports let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { + // #docregion setup-stubs, setup-stubs-w-imports beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ - AppComponent, BannerComponent, - FakeRouterLinkDirective, FakeRouterOutletComponent - ], - providers: [{ provide: Router, useClass: FakeRouter }], - schemas: [NO_ERRORS_SCHEMA] + AppComponent, + BannerComponent, WelcomeStubComponent, + RouterLinkStubDirective, RouterOutletStubComponent + ] }) .compileComponents() - .then(() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; }); - })); - + // #enddocregion setup-stubs, setup-stubs-w-imports tests(); }); -function tests() { +//////// Testing w/ NO_ERRORS_SCHEMA ////// +describe('AppComponent & NO_ERRORS_SCHEMA', () => { + // #docregion setup-schemas + beforeEach( async(() => { + TestBed.configureTestingModule({ + declarations: [ AppComponent, RouterLinkStubDirective ], + schemas: [ NO_ERRORS_SCHEMA ] + }) - it('can instantiate it', () => { - expect(comp).not.toBeNull(); - }); - - it('can get RouterLinks from template', () => { - fixture.detectChanges(); - - const links = fixture.debugElement - // find all elements with an attached FakeRouterLink directive - .queryAll(By.directive(FakeRouterLinkDirective)) - // use injector to get the RouterLink directive instance attached to each element - .map(de => de.injector.get(FakeRouterLinkDirective) as FakeRouterLinkDirective); - - expect(links.length).toBe(3, 'should have 3 links'); - expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard'); - expect(links[1].linkParams).toBe('/heroes', '1st link should go to Heroes'); - }); - - it('can click Heroes link in template', () => { - fixture.detectChanges(); - - // Heroes RouterLink DebugElement - const heroesLinkDe = fixture.debugElement - .queryAll(By.directive(FakeRouterLinkDirective))[1]; - - expect(heroesLinkDe).toBeDefined('should have a 2nd RouterLink'); - - const link = heroesLinkDe.injector.get(FakeRouterLinkDirective) as FakeRouterLinkDirective; - - expect(link.navigatedTo).toBeNull('link should not have navigate yet'); - - heroesLinkDe.triggerEventHandler('click', null); - - fixture.detectChanges(); - expect(link.navigatedTo).toBe('/heroes'); - }); -} + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); + // #enddocregion setup-schemas + tests(); +}); //////// Testing w/ real root module ////// -// Best to avoid // Tricky because we are disabling the router and its configuration +// Better to use RouterTestingModule import { AppModule } from './app.module'; +import { AppRoutingModule } from './app-routing.module'; describe('AppComponent & AppModule', () => { beforeEach( async(() => { TestBed.configureTestingModule({ - imports: [ AppModule ], + imports: [ AppModule ] }) + // Get rid of app's Router configuration otherwise many failures. + // Doing so removes Router declarations; add the Router stubs .overrideModule(AppModule, { - // Must get rid of `RouterModule.forRoot` to prevent attempt to configure a router - // Can't remove it because it doesn't have a known type (`forRoot` returns an object) - // therefore, must reset the entire `imports` with just the necessary stuff - set: { imports: [ SharedModule ]} - }) - - // Separate override because cannot both `set` and `add/remove` in same override - .overrideModule(AppModule, { + remove: { + imports: [ AppRoutingModule ] + }, add: { - declarations: [ FakeRouterLinkDirective, FakeRouterOutletComponent ], - providers: [{ provide: Router, useClass: FakeRouter }] + declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ] } }) @@ -117,3 +103,46 @@ describe('AppComponent & AppModule', () => { tests(); }); +function tests() { + let links: RouterLinkStubDirective[]; + let linkDes: DebugElement[]; + + // #docregion test-setup + beforeEach(() => { + // trigger initial data binding + fixture.detectChanges(); + + // find DebugElements with an attached RouterLinkStubDirective + linkDes = fixture.debugElement + .queryAll(By.directive(RouterLinkStubDirective)); + + // get the attached link directive instances using the DebugElement injectors + links = linkDes + .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective); + }); + // #enddocregion test-setup + + it('can instantiate it', () => { + expect(comp).not.toBeNull(); + }); + + // #docregion tests + it('can get RouterLinks from template', () => { + expect(links.length).toBe(3, 'should have 3 links'); + expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard'); + expect(links[1].linkParams).toBe('/heroes', '1st link should go to Heroes'); + }); + + it('can click Heroes link in template', () => { + const heroesLinkDe = linkDes[1]; + const heroesLink = links[1]; + + expect(heroesLink.navigatedTo).toBeNull('link should not have navigated yet'); + + heroesLinkDe.triggerEventHandler('click', null); + fixture.detectChanges(); + + expect(heroesLink.navigatedTo).toBe('/heroes'); + }); + // #docregion tests +} diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts index 156feee06d..9b785144ab 100644 --- a/public/docs/_examples/testing/ts/app/app.component.ts +++ b/public/docs/_examples/testing/ts/app/app.component.ts @@ -1,6 +1,5 @@ // #docregion -import { Component } from '@angular/core'; - +import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html' diff --git a/public/docs/_examples/testing/ts/app/app.module.ts b/public/docs/_examples/testing/ts/app/app.module.ts index adea748781..d3c288ad11 100644 --- a/public/docs/_examples/testing/ts/app/app.module.ts +++ b/public/docs/_examples/testing/ts/app/app.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + import { AboutComponent } from './about.component'; import { BannerComponent } from './banner.component'; import { HeroService, @@ -19,11 +19,7 @@ import { SharedModule } from './shared/shared.module'; imports: [ BrowserModule, DashboardModule, - RouterModule.forRoot([ - { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, - { path: 'about', component: AboutComponent }, - { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'} - ]), + AppRoutingModule, SharedModule ], providers: [ HeroService, TwainService, UserService ], diff --git a/public/docs/_examples/testing/ts/app/bag/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag/bag.spec.ts index 1fede16bd7..d67bf66fd0 100644 --- a/public/docs/_examples/testing/ts/app/bag/bag.spec.ts +++ b/public/docs/_examples/testing/ts/app/bag/bag.spec.ts @@ -26,7 +26,7 @@ import { NgModel, NgControl } from '@angular/forms'; import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; -import { addMatchers, newEvent } from '../../testing'; +import { addMatchers, newEvent, click } from '../../testing'; beforeEach( addMatchers ); @@ -180,7 +180,7 @@ describe('TestBed Component Tests', () => { const comp = fixture.componentInstance; const hero = comp.heroes[0]; - heroes[0].triggerEventHandler('click', null); + click(heroes[0]); fixture.detectChanges(); const selected = fixture.debugElement.query(By.css('p')); @@ -213,7 +213,7 @@ describe('TestBed Component Tests', () => { fixture.detectChanges(); expect(span.textContent).toMatch(/is off/i, 'before click'); - btn.triggerEventHandler('click', null); + click(btn); fixture.detectChanges(); expect(span.textContent).toMatch(/is on/i, 'after click'); }); @@ -610,7 +610,7 @@ describe('Lifecycle hooks w/ MyIfParentComp', () => { getChild(); const btn = fixture.debugElement.query(By.css('button')); - btn.triggerEventHandler('click', null); + click(btn); fixture.detectChanges(); expect(child.ngOnDestroyCalled).toBe(true); diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts index 86e0a88d2e..0ae563a831 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts @@ -4,7 +4,7 @@ import { async, ComponentFixture, TestBed import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; -import { addMatchers } from '../../testing'; +import { addMatchers, click } from '../../testing'; import { Hero } from '../model/hero'; import { DashboardHeroComponent } from './dashboard-hero.component'; @@ -53,10 +53,22 @@ describe('DashboardHeroComponent when tested directly', () => { let selectedHero: Hero; comp.selected.subscribe((hero: Hero) => selectedHero = hero); + // #docregion trigger-event-handler heroEl.triggerEventHandler('click', null); + // #enddocregion trigger-event-handler expect(selectedHero).toBe(expectedHero); }); // #enddocregion click-test + + // #docregion click-test-2 + it('should raise selected event when clicked', () => { + let selectedHero: Hero; + comp.selected.subscribe((hero: Hero) => selectedHero = hero); + + click(heroEl); // triggerEventHandler helper + expect(selectedHero).toBe(expectedHero); + }); + // #enddocregion click-test-2 }); ////////////////// @@ -89,7 +101,7 @@ describe('DashboardHeroComponent when inside a test host', () => { }); it('should raise selected event when clicked', () => { - heroEl.triggerEventHandler('click', null); + click(heroEl); // selected hero should be the same data bound hero expect(testHost.selectedHero).toBe(testHost.hero); }); @@ -102,8 +114,7 @@ import { Component } from '@angular/core'; // #docregion test-host @Component({ template: ` - - ` + ` }) class TestHostComponent { hero = new Hero(42, 'Test Name'); diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts index 981e51db0f..0b0f9e213a 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts @@ -2,9 +2,9 @@ import { async, inject, ComponentFixture, TestBed } from '@angular/core/testing'; -import { addMatchers } from '../../testing'; -import { HeroService } from '../model'; -import { FakeHeroService } from '../model/testing'; +import { addMatchers, click } from '../../testing'; +import { HeroService } from '../model'; +import { FakeHeroService } from '../model/testing'; import { By } from '@angular/platform-browser'; import { Router } from '@angular/router'; @@ -12,11 +12,11 @@ import { Router } from '@angular/router'; import { DashboardComponent } from './dashboard.component'; import { DashboardModule } from './dashboard.module'; -// #docregion fake-router -class FakeRouter { - navigateByUrl(url: string) { return url; } +// #docregion router-stub +class RouterStub { + navigateByUrl(url: string) { return url; } } -// #enddocregion fake-router +// #enddocregion router-stub beforeEach ( addMatchers ); @@ -39,7 +39,7 @@ describe('DashboardComponent (deep)', () => { function clickForDeep() { // get first
DebugElement const heroEl = fixture.debugElement.query(By.css('.hero')); - heroEl.triggerEventHandler('click', null); + click(heroEl); } }); @@ -73,7 +73,7 @@ function compileAndCreate() { TestBed.configureTestingModule({ providers: [ { provide: HeroService, useClass: FakeHeroService }, - { provide: Router, useClass: FakeRouter } + { provide: Router, useClass: RouterStub } ] }) .compileComponents().then(() => { diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts index 7c7f4cc077..bc2b707906 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts @@ -7,10 +7,7 @@ import { Hero, HeroService } from '../model'; @Component({ selector: 'app-dashboard', templateUrl: 'app/dashboard/dashboard.component.html', - styleUrls: [ - 'app/shared/styles.css', - 'app/dashboard/dashboard.component.css' - ] + styleUrls: ['app/dashboard/dashboard.component.css'] }) export class DashboardComponent implements OnInit { diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.html b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.html index 6927fc83ad..7e86a668f6 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.html +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.html @@ -1,10 +1,11 @@ +

{{hero.name | titlecase}} Details

{{hero.id}}
- - + +
diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.no-testbed.spec.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.no-testbed.spec.ts index 73c22f29e7..a6c1af98d7 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.no-testbed.spec.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.no-testbed.spec.ts @@ -1,12 +1,12 @@ import { HeroDetailComponent } from './hero-detail.component'; import { Hero } from '../model'; -import { FakeActivatedRoute } from '../../testing'; +import { ActivatedRouteStub } from '../../testing'; ////////// Tests //////////////////// describe('HeroDetailComponent - no TestBed', () => { - let activatedRoute: FakeActivatedRoute; + let activatedRoute: ActivatedRouteStub; let comp: HeroDetailComponent; let expectedHero: Hero; let hds: any; @@ -14,7 +14,7 @@ describe('HeroDetailComponent - no TestBed', () => { beforeEach( done => { expectedHero = new Hero(42, 'Bubba'); - activatedRoute = new FakeActivatedRoute(); + activatedRoute = new ActivatedRouteStub(); activatedRoute.testParams = { id: expectedHero.id }; router = jasmine.createSpyObj('router', ['navigate']); diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts index 0dd52ed54e..03eb393c33 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts @@ -1,3 +1,4 @@ +// #docplaster import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; @@ -6,100 +7,197 @@ import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { - addMatchers, newEvent, - ActivatedRoute, FakeActivatedRoute, Router, FakeRouter + ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub } from '../../testing'; -import { HEROES, FakeHeroService } from '../model/testing'; - -import { HeroModule } from './hero.module'; +import { Hero } from '../model'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroDetailService } from './hero-detail.service'; -import { Hero, HeroService } from '../model'; +import { HeroModule } from './hero.module'; ////// Testing Vars ////// -let activatedRoute: FakeActivatedRoute; +let activatedRoute: ActivatedRouteStub; let comp: HeroDetailComponent; let fixture: ComponentFixture; let page: Page; -////////// Tests //////////////////// - +////// Tests ////// describe('HeroDetailComponent', () => { + beforeEach(() => { + activatedRoute = new ActivatedRouteStub(); + }); + describe('with HeroModule setup', heroModuleSetup); + describe('when override its provided HeroDetailService', overrideSetup); + describe('with FormsModule setup', formsModuleSetup); + describe('with SharedModule setup', sharedModuleSetup); +}); + +//////////////////// +function overrideSetup() { + // #docregion stub-hds + class StubHeroDetailService { + testHero = new Hero(42, 'Test Hero'); + + getHero(id: number | string): Promise { + return Promise.resolve(true).then(() => Object.assign({}, this.testHero) ); + } + + saveHero(hero: Hero): Promise { + return Promise.resolve(true).then(() => Object.assign(this.testHero, hero) ); + } + } + // #enddocregion stub-hds + + // the `id` value is irrelevant because ignored by service stub + beforeEach(() => activatedRoute.testParams = { id: 99999 } ); + + // #docregion setup-override + beforeEach( async(() => { + TestBed.configureTestingModule({ + imports: [ HeroModule ], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: Router, useClass: RouterStub}, + // #enddocregion setup-override + // HeroDetailService at this level is IRRELEVANT! + { provide: HeroDetailService, useValue: {} } + // #docregion setup-override + ] + }) + + // Override component's own provider + // #docregion override-component-method + .overrideComponent(HeroDetailComponent, { + set: { + providers: [ + { provide: HeroDetailService, useClass: StubHeroDetailService } + ] + } + }) + // #enddocregion override-component-method + + .compileComponents(); + })); + // #enddocregion setup-override + + // #docregion override-tests + let hds: StubHeroDetailService; beforeEach( async(() => { - addMatchers(); - activatedRoute = new FakeActivatedRoute(); + createComponent(); + // get the component's injected StubHeroDetailService + hds = fixture.debugElement.injector.get(HeroDetailService); + })); - TestBed.configureTestingModule({ - imports: [ HeroModule ], + it('should display stub hero\'s name', () => { + expect(page.nameDisplay.textContent).toBe(hds.testHero.name); + }); - // DON'T RE-DECLARE because already declared in HeroModule - // declarations: [HeroDetailComponent, TitleCasePipe], // No! + it('should save stub hero change', fakeAsync(() => { + const origName = hds.testHero.name; + const newName = 'New Name'; + page.nameInput.value = newName; + page.nameInput.dispatchEvent(newEvent('input')); // tell Angular + + expect(comp.hero.name).toBe(newName, 'component hero has new name'); + expect(hds.testHero.name).toBe(origName, 'service hero unchanged before save'); + + click(page.saveBtn); + tick(); // wait for async save to complete + expect(hds.testHero.name).toBe(newName, 'service hero has new name after save'); + expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called'); + })); + // #enddocregion override-tests + + it('fixture injected service is not the component injected service', + inject([HeroDetailService], (service: HeroDetailService) => { + + expect(service).toEqual({}, 'service injected from fixture'); + expect(hds).toBeTruthy('service injected into component'); + })); +} + +//////////////////// +import { HEROES, FakeHeroService } from '../model/testing'; +import { HeroService } from '../model'; + +const firstHero = HEROES[0]; + +function heroModuleSetup() { + // #docregion setup-hero-module + beforeEach( async(() => { + TestBed.configureTestingModule({ + imports: [ HeroModule ], + // #enddocregion setup-hero-module + // declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION + // #docregion setup-hero-module providers: [ { provide: ActivatedRoute, useValue: activatedRoute }, { provide: HeroService, useClass: FakeHeroService }, - { provide: Router, useClass: FakeRouter}, + { provide: Router, useClass: RouterStub}, ] }) .compileComponents(); })); + // #enddocregion setup-hero-module - describe('when navigate to hero id=' + HEROES[0].id, () => { + // #docregion route-good-id + describe('when navigate to existing hero', () => { let expectedHero: Hero; beforeEach( async(() => { - expectedHero = HEROES[0]; + expectedHero = firstHero; activatedRoute.testParams = { id: expectedHero.id }; createComponent(); })); + // #docregion selected-tests it('should display that hero\'s name', () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); + // #enddocregion route-good-id it('should navigate when click cancel', () => { - page.cancelBtn.triggerEventHandler('click', null); + click(page.cancelBtn); expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called'); }); - it('should save when click save', () => { - page.saveBtn.triggerEventHandler('click', null); + it('should save when click save but not navigate immediately', () => { + click(page.saveBtn); expect(page.saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called'); + expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called'); }); - it('should navigate when click click save resolves', fakeAsync(() => { - page.saveBtn.triggerEventHandler('click', null); - tick(); // waits for async save to "complete" before navigating + it('should navigate when click save and save resolves', fakeAsync(() => { + click(page.saveBtn); + tick(); // wait for async save to complete expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called'); })); - // #docregion title-case-pipe - it('should convert original hero name to Title Case', () => { - expect(page.nameDisplay.textContent).toBe(comp.hero.name); - }); - // #enddocregion title-case-pipe - it('should convert hero name to Title Case', fakeAsync(() => { const inputName = 'quick BROWN fox'; - const expectedName = 'Quick Brown Fox'; + const titleCaseName = 'Quick Brown Fox'; - // simulate user entering new name in input + // simulate user entering new name into the input box page.nameInput.value = inputName; // dispatch a DOM event so that Angular learns of input value change. - // detectChanges() makes ngModel push input value to component property - // and Angular updates the output span page.nameInput.dispatchEvent(newEvent('input')); + + // Tell Angular to update the output span through the title pipe fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedName, 'hero name display'); - expect(comp.hero.name).toBe(inputName, 'comp.hero.name'); + + expect(page.nameDisplay.textContent).toBe(titleCaseName); })); - + // #enddocregion title-case-pipe + // #enddocregion selected-tests + // #docregion route-good-id }); + // #enddocregion route-good-id + // #docregion route-no-id describe('when navigate with no hero id', () => { beforeEach( async( createComponent )); @@ -111,7 +209,9 @@ describe('HeroDetailComponent', () => { expect(page.nameDisplay.textContent).toBe(''); }); }); + // #enddocregion route-no-id + // #docregion route-bad-id describe('when navigate to non-existant hero id', () => { beforeEach( async(() => { activatedRoute.testParams = { id: 99999 }; @@ -123,11 +223,10 @@ describe('HeroDetailComponent', () => { expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called'); }); }); - - /////////////////////////// + // #enddocregion route-bad-id // Why we must use `fixture.debugElement.injector` in `Page()` - it('cannot use `inject` to get component\'s provided service', () => { + it('cannot use `inject` to get component\'s provided HeroDetailService', () => { let service: HeroDetailService; fixture = TestBed.createComponent(HeroDetailComponent); expect( @@ -141,26 +240,85 @@ describe('HeroDetailComponent', () => { service = fixture.debugElement.injector.get(HeroDetailService); expect(service).toBeDefined('debugElement.injector'); }); -}); +} + +///////////////////// +import { FormsModule } from '@angular/forms'; +import { TitleCasePipe } from '../shared/title-case.pipe'; + +function formsModuleSetup() { + // #docregion setup-forms-module + beforeEach( async(() => { + TestBed.configureTestingModule({ + imports: [ FormsModule ], + declarations: [ HeroDetailComponent, TitleCasePipe ], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: FakeHeroService }, + { provide: Router, useClass: RouterStub}, + ] + }) + .compileComponents(); + })); + // #enddocregion setup-forms-module + + it('should display 1st hero\'s name', fakeAsync(() => { + const expectedHero = firstHero; + activatedRoute.testParams = { id: expectedHero.id }; + createComponent().then(() => { + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); +} + +/////////////////////// +import { SharedModule } from '../shared/shared.module'; + +function sharedModuleSetup() { + // #docregion setup-shared-module + beforeEach( async(() => { + TestBed.configureTestingModule({ + imports: [ SharedModule ], + declarations: [ HeroDetailComponent ], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: FakeHeroService }, + { provide: Router, useClass: RouterStub}, + ] + }) + .compileComponents(); + })); + // #enddocregion setup-shared-module + + it('should display 1st hero\'s name', fakeAsync(() => { + const expectedHero = firstHero; + activatedRoute.testParams = { id: expectedHero.id }; + createComponent().then(() => { + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); +} /////////// Helpers ///// +// #docregion create-component /** Create the HeroDetailComponent, initialize it, set test variables */ function createComponent() { fixture = TestBed.createComponent(HeroDetailComponent); comp = fixture.componentInstance; page = new Page(); - // change detection triggers ngOnInit which gets a hero + // 1st change detection triggers ngOnInit which gets a hero fixture.detectChanges(); return fixture.whenStable().then(() => { - // got the hero and updated component - // change detection updates the view + // 2nd change detection displays the async-fetched hero fixture.detectChanges(); page.addPageElements(); }); } +// #enddocregion create-component +// #docregion page class Page { gotoSpy: jasmine.Spy; navSpy: jasmine.Spy; @@ -173,19 +331,20 @@ class Page { constructor() { // Use component's injector to see the services it injected. - let compInjector = fixture.debugElement.injector; - let hds = compInjector.get(HeroDetailService); - let router = compInjector.get(Router); - this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough(); - this.saveSpy = spyOn(hds, 'saveHero').and.callThrough(); - this.navSpy = spyOn(router, 'navigate').and.callThrough(); + const compInjector = fixture.debugElement.injector; + const hds = compInjector.get(HeroDetailService); + const router = compInjector.get(Router); + + this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough(); + this.navSpy = spyOn(router, 'navigate'); + this.saveSpy = spyOn(hds, 'saveHero').and.callThrough(); } - /** Add page elements after page initializes */ + /** Add page elements after hero arrives */ addPageElements() { if (comp.hero) { - // have a hero so these DOM elements can be reached - let buttons = fixture.debugElement.queryAll(By.css('button')); + // have a hero so these elements are now in the DOM + const buttons = fixture.debugElement.queryAll(By.css('button')); this.saveBtn = buttons[0]; this.cancelBtn = buttons[1]; this.nameDisplay = fixture.debugElement.query(By.css('span')).nativeElement; @@ -193,4 +352,4 @@ class Page { } } } - +// #enddocregion page diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts index 9350c369af..32a59ef2c2 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts @@ -1,46 +1,51 @@ +/* tslint:disable:member-ordering */ +// #docplaster import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; +import 'rxjs/add/operator/pluck'; import { Hero } from '../model'; import { HeroDetailService } from './hero-detail.service'; +// #docregion prototype @Component({ - selector: 'app-hero-detail', + selector: 'app-hero-detail', templateUrl: 'app/hero/hero-detail.component.html', - styleUrls: [ - 'app/shared/styles.css', - 'app/hero/hero-detail.component.css' - ], + styleUrls: ['app/hero/hero-detail.component.css'], providers: [ HeroDetailService ] }) export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; - + // #docregion ctor constructor( private heroDetailService: HeroDetailService, - private route: ActivatedRoute, + private route: ActivatedRoute, private router: Router) { } + // #enddocregion ctor +// #enddocregion prototype - ngOnInit() { - let id = this.route.snapshot.params['id']; + @Input() hero: Hero; - // tslint:disable-next-line:triple-equals - if (id == undefined) { - // no id; act as if is new - this.hero = new Hero(); - } else { - this.heroDetailService.getHero(id).then(hero => { - if (hero) { - this.hero = hero; - } else { - this.gotoList(); // id not found; navigate to list - } - }); - } + // #docregion ng-on-init + ngOnInit(): void { + // get hero when `id` param changes + this.route.params.pluck('id') + .forEach(id => this.getHero(id)) + .catch(() => this.hero = new Hero()); // no id; should edit new hero + } + // #enddocregion ng-on-init + + private getHero(id: string): void { + this.heroDetailService.getHero(id).then(hero => { + if (hero) { + this.hero = hero; + } else { + this.gotoList(); // id not found; navigate to list + } + }); } - save() { + save(): void { this.heroDetailService.saveHero(this.hero).then(() => this.gotoList()); } @@ -49,4 +54,6 @@ export class HeroDetailComponent implements OnInit { gotoList() { this.router.navigate(['../'], {relativeTo: this.route}); } +// #docregion prototype } +// #enddocregion prototype diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.service.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.service.ts index 970cb1b98b..6239ae5b80 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.service.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.service.ts @@ -2,10 +2,13 @@ import { Injectable } from '@angular/core'; import { Hero, HeroService } from '../model'; +// #docregion prototype @Injectable() export class HeroDetailService { constructor(private heroService: HeroService) { } +// #enddocregion prototype + // Returns a clone which caller may modify safely getHero(id: number | string): Promise { if (typeof id === 'string') { id = parseInt(id as string, 10); @@ -18,4 +21,6 @@ export class HeroDetailService { saveHero(hero: Hero) { return this.heroService.updateHero(hero); } +// #docregion prototype } +// #enddocregion prototype diff --git a/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts b/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts index f997cf787e..dbf9d37d71 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts @@ -4,7 +4,7 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; -import { addMatchers, newEvent, Router, FakeRouter +import { addMatchers, newEvent, Router, RouterStub } from '../../testing'; import { HEROES, FakeHeroService } from '../model/testing'; @@ -28,7 +28,7 @@ describe('HeroListComponent', () => { imports: [HeroModule], providers: [ { provide: HeroService, useClass: FakeHeroService }, - { provide: Router, useClass: FakeRouter} + { provide: Router, useClass: RouterStub} ] }) .compileComponents() @@ -132,7 +132,7 @@ class Page { // Get the component's injected router and spy on it const router = fixture.debugElement.injector.get(Router); - this.navSpy = spyOn(router, 'navigate').and.callThrough(); + this.navSpy = spyOn(router, 'navigate'); }; } diff --git a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts index d4ad30b019..625c402581 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts @@ -6,10 +6,7 @@ import { Hero, HeroService } from '../model'; @Component({ selector: 'app-heroes', templateUrl: 'app/hero/hero-list.component.html', - styleUrls: [ - 'app/shared/styles.css', - 'app/hero/hero-list.component.css' - ] + styleUrls: ['app/hero/hero-list.component.css'] }) export class HeroListComponent implements OnInit { heroes: Promise; diff --git a/public/docs/_examples/testing/ts/app/model/hero.service.ts b/public/docs/_examples/testing/ts/app/model/hero.service.ts index 7f2931a7f6..667d47312b 100644 --- a/public/docs/_examples/testing/ts/app/model/hero.service.ts +++ b/public/docs/_examples/testing/ts/app/model/hero.service.ts @@ -4,7 +4,7 @@ import { Hero } from './hero'; import { HEROES } from './test-heroes'; @Injectable() -/** Dummy HeroService that pretends to be real */ +/** Dummy HeroService. Pretend it makes real http requests */ export class HeroService { getHeroes() { return Promise.resolve(HEROES); @@ -21,9 +21,10 @@ export class HeroService { updateHero(hero: Hero): Promise { return this.getHero(hero.id).then(h => { - return h ? - Object.assign(h, hero) : - Promise.reject(`Hero ${hero.id} not found`) as any as Promise; + if (!h) { + throw new Error(`Hero ${hero.id} not found`); + } + return Object.assign(h, hero); }); } } diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts index c5f13934b9..6c219ab808 100644 --- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts +++ b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts @@ -1,58 +1,100 @@ import { Component, DebugElement } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; +import { By } from '@angular/platform-browser'; -import { HighlightDirective } from './highlight.directive'; +import { HighlightDirective } from './highlight.directive'; +import { newEvent } from '../../testing'; -// Component to test directive +// #docregion test-component @Component({ template: `

Something Yellow

-

Something Gray

-

Something White

- ` - +

The Default (Gray)

+

No Highlight

+ ` }) class TestComponent { } +// #enddocregion test-component -////// Tests ////////// describe('HighlightDirective', () => { let fixture: ComponentFixture; - let h2Des: DebugElement[]; + let des: DebugElement[]; // the three elements w/ the directive + let bareH2: DebugElement; // the

w/o the directive + // #docregion selected-tests beforeEach(() => { fixture = TestBed.configureTestingModule({ declarations: [ HighlightDirective, TestComponent ] }) .createComponent(TestComponent); - h2Des = fixture.debugElement.queryAll(By.css('h2')); + fixture.detectChanges(); // initial binding + + // all elements with an attached HighlightDirective + des = fixture.debugElement.queryAll(By.directive(HighlightDirective)); + + // the h2 without the HighlightDirective + bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])')); }); - it('should have `HighlightDirective`', () => { - // The HighlightDirective listed in

tokens means it is attached - expect(h2Des[0].providerTokens).toContain(HighlightDirective, 'HighlightDirective'); + // color tests + it('should have three highlighted elements', () => { + expect(des.length).toBe(3); }); - it('should color first

background "yellow"', () => { - fixture.detectChanges(); - const h2 = h2Des[0].nativeElement as HTMLElement; - expect(h2.style.backgroundColor).toBe('yellow'); + it('should color 1st

background "yellow"', () => { + expect(des[0].styles['backgroundColor']).toBe('yellow'); }); - it('should color second

background w/ default color', () => { - fixture.detectChanges(); - const h2 = h2Des[1].nativeElement as HTMLElement; - expect(h2.style.backgroundColor).toBe(HighlightDirective.defaultColor); + it('should color 2nd

background w/ default color', () => { + const dir = des[1].injector.get(HighlightDirective) as HighlightDirective; + expect(des[1].styles['backgroundColor']).toBe(dir.defaultColor); }); - it('should NOT color third

(no directive)', () => { - // no directive - expect(h2Des[2].providerTokens).not.toContain(HighlightDirective, 'HighlightDirective'); + it('should bind background to value color', () => { + // easier to work with nativeElement + const input = des[2].nativeElement as HTMLInputElement; + expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor'); + + // dispatch a DOM event so that Angular responds to the input value change. + input.value = 'green'; + input.dispatchEvent(newEvent('input')); fixture.detectChanges(); - const h2 = h2Des[2].nativeElement as HTMLElement; - expect(h2.style.backgroundColor).toBe('', 'backgroundColor'); + expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor'); + }); + + // customProperty tests + it('all highlighted elements should have a true customProperty', () => { + const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true); + expect(allTrue).toBe(true); + }); + + it('bare

should not have a customProperty', () => { + expect(bareH2.properties['customProperty']).toBeUndefined(); + }); + // #enddocregion selected-tests + + // injected directive + // attached HighlightDirective can be injected + it('can inject `HighlightDirective` in 1st

', () => { + const dir = des[0].injector.get(HighlightDirective); + expect(dir).toBeTruthy(); + }); + + it('cannot inject `HighlightDirective` in 3rd

', () => { + const dir = bareH2.injector.get(HighlightDirective, null); + expect(dir).toBe(null); + }); + + // DebugElement.providerTokens + // attached HighlightDirective should be listed in the providerTokens + it('should have `HighlightDirective` in 1st

providerTokens', () => { + expect(des[0].providerTokens).toContain(HighlightDirective); + }); + + it('should not have `HighlightDirective` in 3rd

providerTokens', () => { + expect(bareH2.providerTokens).not.toContain(HighlightDirective); }); }); diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts index 9c091b3638..4a45c8d5aa 100644 --- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts +++ b/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts @@ -1,13 +1,12 @@ +// #docregion import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core'; @Directive({ selector: '[highlight]' }) -/** - * Set backgroundColor for the attached element ton highlight color and - * set element `customProperty` = true - */ +/** Set backgroundColor for the attached element to highlight color + * and set the element's customProperty to true */ export class HighlightDirective implements OnChanges { - static defaultColor = 'rgb(211, 211, 211)'; // lightgray + defaultColor = 'rgb(211, 211, 211)'; // lightgray @Input('highlight') bgColor: string; @@ -18,7 +17,6 @@ export class HighlightDirective implements OnChanges { ngOnChanges() { this.renderer.setElementStyle( this.el.nativeElement, 'backgroundColor', - this.bgColor || HighlightDirective.defaultColor ); + this.bgColor || this.defaultColor ); } } - diff --git a/public/docs/_examples/testing/ts/app/shared/styles.css b/public/docs/_examples/testing/ts/app/shared/styles.css deleted file mode 100644 index b26317fa5e..0000000000 --- a/public/docs/_examples/testing/ts/app/shared/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* MISSING */ diff --git a/public/docs/_examples/testing/ts/app/welcome.component.spec.ts b/public/docs/_examples/testing/ts/app/welcome.component.spec.ts index ec59ef5bc2..f99687148f 100644 --- a/public/docs/_examples/testing/ts/app/welcome.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/welcome.component.spec.ts @@ -13,15 +13,20 @@ describe('WelcomeComponent', () => { let userService: UserService; // the actually injected service let welcomeEl: DebugElement; // the element with the welcome message + let userServiceStub: { + isLoggedIn: boolean; + user: { name: string} + }; + // #docregion setup beforeEach(() => { - // fake UserService for test purposes - // #docregion fake-userservice - const fakeUserService = { + // stub UserService for test purposes + // #docregion user-service-stub + userServiceStub = { isLoggedIn: true, user: { name: 'Test User'} }; - // #enddocregion fake-userservice + // #enddocregion user-service-stub // #docregion config-test-module TestBed.configureTestingModule({ @@ -29,7 +34,7 @@ describe('WelcomeComponent', () => { // #enddocregion setup // providers: [ UserService ] // a real service would be a problem! // #docregion setup - providers: [ {provide: UserService, useValue: fakeUserService } ] + providers: [ {provide: UserService, useValue: userServiceStub } ] }); // #enddocregion config-test-module @@ -80,4 +85,8 @@ describe('WelcomeComponent', () => { expect(content).toMatch(/log in/i, '"log in"'); }); // #enddocregion tests + + it('orig stub and injected UserService are not the same object', () => { + expect(userServiceStub === userService).toBe(false); + }); }); diff --git a/public/docs/_examples/testing/ts/browser-test-shim.js b/public/docs/_examples/testing/ts/browser-test-shim.js index 1573c72ebd..1cbabc3f64 100644 --- a/public/docs/_examples/testing/ts/browser-test-shim.js +++ b/public/docs/_examples/testing/ts/browser-test-shim.js @@ -9,7 +9,7 @@ Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. // Uncomment to get full stacktrace output. Sometimes helpful, usually not. // Error.stackTraceLimit = Infinity; // -jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; +jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000; var baseURL = document.baseURI; baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/'; diff --git a/public/docs/_examples/testing/ts/testing/fake-router.ts b/public/docs/_examples/testing/ts/testing/fake-router.ts deleted file mode 100644 index d42a3f8ad9..0000000000 --- a/public/docs/_examples/testing/ts/testing/fake-router.ts +++ /dev/null @@ -1,49 +0,0 @@ - // export for convenience. -export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router'; - -import { Component, Directive, Injectable, Input } from '@angular/core'; -import { NavigationExtras } from '@angular/router'; - -@Directive({ - selector: '[routerLink]', - host: { - '(click)': 'onClick()', - '[attr.href]': 'visibleHref', - '[class.router-link-active]': 'isRouteActive' - } -}) -export class FakeRouterLinkDirective { - - isRouteActive = false; - visibleHref: string; // the url displayed on the anchor element. - - @Input('routerLink') linkParams: any; - navigatedTo: any = null; - - onClick() { - this.navigatedTo = this.linkParams; - } -} - -@Component({selector: 'router-outlet', template: ''}) -export class FakeRouterOutletComponent { } - -@Injectable() -export class FakeRouter { - lastCommand: any[]; - navigate(commands: any[], extras?: NavigationExtras) { - this.lastCommand = commands; - return commands; - } -} - -@Injectable() -export class FakeActivatedRoute { - testParams: {} = {}; - - get snapshot() { - return { - params: this.testParams - }; - } -} diff --git a/public/docs/_examples/testing/ts/testing/index.ts b/public/docs/_examples/testing/ts/testing/index.ts index f648a212e9..e3de5164ca 100644 --- a/public/docs/_examples/testing/ts/testing/index.ts +++ b/public/docs/_examples/testing/ts/testing/index.ts @@ -1,9 +1,17 @@ +import { DebugElement } from '@angular/core'; import { tick, ComponentFixture } from '@angular/core/testing'; export * from './jasmine-matchers'; -export * from './fake-router'; +export * from './router-stubs'; + +///// Short utilities ///// + +/** Wait a tick, then detect changes */ +export function advance(f: ComponentFixture): void { + tick(); + f.detectChanges(); +} -// Short utilities /** * Create custom DOM event the old fashioned way * @@ -16,8 +24,20 @@ export function newEvent(eventName: string, bubbles = false, cancelable = false) return evt; } -/** Wait a tick, then detect changes */ -export function advance(f: ComponentFixture): void { - tick(); - f.detectChanges(); +// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button +// #docregion click-event +/** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */ +export const ButtonClickEvents = { + left: { button: 0 }, + right: { button: 2 } +}; + +/** Simulate element click. Defaults to mouse left-button click event. */ +export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void { + if (el instanceof HTMLElement) { + el.click(); + } else { + el.triggerEventHandler('click', eventObj); + } } +// #enddocregion click-event diff --git a/public/docs/_examples/testing/ts/testing/router-stubs.ts b/public/docs/_examples/testing/ts/testing/router-stubs.ts new file mode 100644 index 0000000000..75a2858f65 --- /dev/null +++ b/public/docs/_examples/testing/ts/testing/router-stubs.ts @@ -0,0 +1,57 @@ + // export for convenience. +export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router'; + +import { Component, Directive, Injectable, Input } from '@angular/core'; +import { NavigationExtras } from '@angular/router'; + +// #docregion router-link +@Directive({ + selector: '[routerLink]', + host: { + '(click)': 'onClick()' + } +}) +export class RouterLinkStubDirective { + @Input('routerLink') linkParams: any; + navigatedTo: any = null; + + onClick() { + this.navigatedTo = this.linkParams; + } +} +// #enddocregion router-link + +@Component({selector: 'router-outlet', template: ''}) +export class RouterOutletStubComponent { } + +@Injectable() +export class RouterStub { + navigate(commands: any[], extras?: NavigationExtras) { } +} + + +// Only implements params and part of snapshot.params +// #docregion activated-route-stub +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +@Injectable() +export class ActivatedRouteStub { + + // ActivatedRoute.params is Observable + private subject = new BehaviorSubject(this.testParams); + params = this.subject.asObservable(); + + // Test parameters + private _testParams: {}; + get testParams() { return this._testParams; } + set testParams(params: {}) { + this._testParams = params; + this.subject.next(params); + } + + // ActivatedRoute.snapshot.params + get snapshot() { + return { params: this.testParams }; + } +} +// #enddocregion activated-route-stub diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts index 51a935acab..11e51e4df9 100644 --- a/public/docs/_examples/toh-1/e2e-spec.ts +++ b/public/docs/_examples/toh-1/e2e-spec.ts @@ -4,7 +4,7 @@ type WPromise = webdriver.promise.Promise; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; class Hero { id: number; diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html index e9c099696b..4445befc9a 100644 --- a/public/docs/_examples/toh-1/ts/index.html +++ b/public/docs/_examples/toh-1/ts/index.html @@ -1,7 +1,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/toh-2/e2e-spec.ts b/public/docs/_examples/toh-2/e2e-spec.ts index 617ca38a1f..cde9e93edf 100644 --- a/public/docs/_examples/toh-2/e2e-spec.ts +++ b/public/docs/_examples/toh-2/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; const expectedH2 = 'My Heroes'; const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html index e9c099696b..4445befc9a 100644 --- a/public/docs/_examples/toh-2/ts/index.html +++ b/public/docs/_examples/toh-2/ts/index.html @@ -1,7 +1,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/toh-3/e2e-spec.ts b/public/docs/_examples/toh-3/e2e-spec.ts index 0f9c747b90..f1e51f5b39 100644 --- a/public/docs/_examples/toh-3/e2e-spec.ts +++ b/public/docs/_examples/toh-3/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; const expectedH2 = 'My Heroes'; const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html index e9c099696b..4445befc9a 100644 --- a/public/docs/_examples/toh-3/ts/index.html +++ b/public/docs/_examples/toh-3/ts/index.html @@ -1,7 +1,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/toh-4/e2e-spec.ts b/public/docs/_examples/toh-4/e2e-spec.ts index 8c109167af..456297b6d2 100644 --- a/public/docs/_examples/toh-4/e2e-spec.ts +++ b/public/docs/_examples/toh-4/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; const expectedH2 = 'My Heroes'; const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html index e9c099696b..4445befc9a 100644 --- a/public/docs/_examples/toh-4/ts/index.html +++ b/public/docs/_examples/toh-4/ts/index.html @@ -1,7 +1,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/toh-5/e2e-spec.ts b/public/docs/_examples/toh-5/e2e-spec.ts index 2ae0d5b93b..6935ff19a2 100644 --- a/public/docs/_examples/toh-5/e2e-spec.ts +++ b/public/docs/_examples/toh-5/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; const targetHero = { id: 15, name: 'Magneta' }; const targetHeroDashboardIndex = 3; const nameSuffix = 'X'; diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html index 4df64edba1..f8383d0c94 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -5,7 +5,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/toh-6/dart/web/main.dart b/public/docs/_examples/toh-6/dart/web/main.dart index 614e95be10..89f2225150 100644 --- a/public/docs/_examples/toh-6/dart/web/main.dart +++ b/public/docs/_examples/toh-6/dart/web/main.dart @@ -23,9 +23,6 @@ void main() { bootstrap(AppComponent, [ provide(BrowserClient, useFactory: () => new BrowserClient(), deps: []) ]); - // Simplify bootstrap provider list to [BrowserClient] - // once there is a fix for: - // https://github.com/dart-lang/angular2/issues/37 } // #enddocregion v1 */ diff --git a/public/docs/_examples/toh-6/e2e-spec.ts b/public/docs/_examples/toh-6/e2e-spec.ts index 3b4ec4c805..8152ac308c 100644 --- a/public/docs/_examples/toh-6/e2e-spec.ts +++ b/public/docs/_examples/toh-6/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `Angular 2 ${expectedH1}`; +const expectedTitle = `Angular ${expectedH1}`; const targetHero = { id: 15, name: 'Magneta' }; const targetHeroDashboardIndex = 3; const nameSuffix = 'X'; diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html index 8bbbc6123d..41faa36c28 100644 --- a/public/docs/_examples/toh-6/ts/index.html +++ b/public/docs/_examples/toh-6/ts/index.html @@ -2,7 +2,7 @@ - Angular 2 Tour of Heroes + Angular Tour of Heroes diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts diff --git a/public/docs/_examples/webpack/e2e-spec.ts b/public/docs/_examples/webpack/e2e-spec.ts index 59bf5c5708..1e88bfccf1 100644 --- a/public/docs/_examples/webpack/e2e-spec.ts +++ b/public/docs/_examples/webpack/e2e-spec.ts @@ -2,7 +2,7 @@ 'use strict'; describe('QuickStart E2E Tests', function () { - let expectedMsg = 'Hello from Angular 2 App with Webpack'; + let expectedMsg = 'Hello from Angular App with Webpack'; beforeEach(function () { browser.get(''); diff --git a/public/docs/_examples/webpack/ts/config/karma-test-shim.js b/public/docs/_examples/webpack/ts/config/karma-test-shim.js index 973543a02a..2ea37fbd72 100644 --- a/public/docs/_examples/webpack/ts/config/karma-test-shim.js +++ b/public/docs/_examples/webpack/ts/config/karma-test-shim.js @@ -2,7 +2,7 @@ Error.stackTraceLimit = Infinity; require('core-js/es6'); -require('reflect-metadata'); +require('core-js/es7/reflect'); require('zone.js/dist/zone'); require('zone.js/dist/long-stack-trace-zone'); diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index 5e3630dc2a..3995e724db 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -1,7 +1,7 @@ { "name": "angular2-webpack", "version": "1.0.0", - "description": "A webpack starter for angular 2", + "description": "A webpack starter for Angular", "scripts": { "start": "webpack-dev-server --inline --progress --port 8080", "test": "karma start", @@ -41,7 +41,6 @@ "raw-loader": "^0.5.1", "rimraf": "^2.5.2", "style-loader": "^0.13.1", - "ts-loader": "^0.8.1", "typescript": "^2.0.2", "typings": "^1.3.2", "webpack": "^1.13.0", diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.html b/public/docs/_examples/webpack/ts/src/app/app.component.html index a333a7a72f..b06ff16d11 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.html +++ b/public/docs/_examples/webpack/ts/src/app/app.component.html @@ -1,6 +1,6 @@
-

Hello from Angular 2 App with Webpack

+

Hello from Angular App with Webpack

diff --git a/public/docs/_examples/webpack/ts/src/vendor.ts b/public/docs/_examples/webpack/ts/src/vendor.ts index ede1e2717d..8ffd09240a 100644 --- a/public/docs/_examples/webpack/ts/src/vendor.ts +++ b/public/docs/_examples/webpack/ts/src/vendor.ts @@ -1,5 +1,5 @@ // #docregion -// Angular 2 +// Angular import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; diff --git a/public/docs/_includes/_ts-temp.jade b/public/docs/_includes/_ts-temp.jade index a4f4bd22d3..9d99e887b7 100644 --- a/public/docs/_includes/_ts-temp.jade +++ b/public/docs/_includes/_ts-temp.jade @@ -8,26 +8,9 @@ if language == 'js' if language == 'ts' - lang = 'TypeScript' -- var page = '' -if current.path[4] - - var page = current.path[4] + '.html' - +- var page = current.path[4] ? current.path[4] + '.html' : '' +- if (page === 'index.html') page = '' - var path = '/docs/ts/latest/'+ current.path[3] + '/' + page - -- var name = 'it' -- var secondaryPath = public.docs[current.path[1]][current.path[2]][current.path[3]] -if secondaryPath - - var data = secondaryPath._data - - var listType = data._listtype - - var items = listType == 'api' ? secondaryPath : data - - for item, slug in items - if slug == current.path[4] - - name = 'the ' + item.title + ' chapter' - -p.translated-cn. +:marked 这个章节在 #{lang} 语种下还不可用。 建议您阅读TypeScript版本。 -a(href=path, class='md-primary md-button md-ink-ripple').translated-cn. - 阅读!{name}TypeScript版本 -// != partial(path) diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade index 8291c74e59..0586577c79 100644 --- a/public/docs/_includes/styleguide/_code-examples.jade +++ b/public/docs/_includes/styleguide/_code-examples.jade @@ -116,7 +116,7 @@ include ../../../_includes/_util-fns selector: 'my-app', // #enddocregion component // #docregion view - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) // #enddocregion view // #docregion class @@ -143,7 +143,7 @@ include ../../../_includes/_util-fns // #enddocregion twoparts, import @Component({ selector: 'my-app', - template: '

My first Angular 2 App

' + template: '

My first Angular App

' }) class AppComponent { } @@ -160,7 +160,6 @@ include ../../../_includes/_util-fns code-example(format="linenums" language="html"). <!-- #docregion --> ... - <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.sfx.dev.js"></script> <script src="app.js"></script> ... @@ -285,9 +284,9 @@ include ../../../_includes/_util-fns Styling selected portions of the json is also supported. code-example(format="" language="js"). - +makeJson('styleguide/package.1.json', {paths: 'dependencies'}, "package.json dependencies", { pnk: [/(\S*traceur.*)/, /(\Sangular2.*)/, /(\Ssystem.*)/ ]}) + +makeJson('styleguide/package.1.json', {paths: 'dependencies'}, "package.json dependencies", { pnk: [/(\S*zone.*)/, /(\Score-js.*)/, /(\Ssystem.*)/ ]}) - +makeJson('styleguide/package.1.json', {paths: 'dependencies'}, "package.json dependencies", { pnk: [/(\S*traceur.*)/, /(\Sangular2.*)/, /(\Ssystem.*)/ ]}) + +makeJson('styleguide/package.1.json', {paths: 'dependencies'}, "package.json dependencies", { pnk: [/(\S*zone.*)/, /(\Score-js.*)/, /(\Ssystem.*)/ ]}) :marked As well as styling across multiple lines. @@ -422,7 +421,7 @@ include ../../../_includes/_util-fns .alert.is-important. The '@example' and '@exampleTabs' inline tags MUST always appear at the beginning of a line. - Example files referenced by inline tags are all assumed to be in the 'modules/angular2' folder in the angular/angular repo. + Example files referenced by inline tags are all assumed to be in the 'modules/@angular' folder in the angular/angular repo. :marked #### @example inline tag parameters diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index 420f3b50f8..c23053213e 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -4,66 +4,74 @@ "title": "Angular Docs", "subtitle": "Dart", "menuTitle": "Docs Home", - "banner": "Current release is beta.21. View the change Log to see enhancements, fixes, and breaking changes." + "banner": "Angular release is beta.21. View the change log to see enhancements, fixes, and breaking changes." }, "quickstart": { "icon": "query-builder", - "title": "5 Min Quickstart", - "description": "Get up and running with Angular 2" + "title": "Quickstart", + "subtitle": "Dart", + "description": "Get up and running with Angular", + "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." }, "tutorial": { "icon": "list", "title": "Tutorial", - "banner": "Angular 2 is currently in Release Candidate." + "subtitle": "Dart" }, "guide": { "icon": "list", "title": "Developer Guides", - "banner": "Angular 2 is currently in Release Candidate." + "subtitle": "Dart" }, "cookbook": { "icon": "list", "title": "Cookbook", + "subtitle": "Dart", "banner": "How to solve common implementation challenges." }, "api/": { "icon": "book", - "title": "API Preview", + "title": "API Reference", + "subtitle": "Dart", "reference": true }, "cheatsheet": { "title": "Angular Cheat Sheet", + "subtitle": "Dart", "intro": "A quick guide to Angular syntax. (Content is provisional and may change.)", "reference": false }, "glossary": { "title": "Glossary", - "intro": "Brief definitions of the most important words in the Angular 2 vocabulary", + "subtitle": "Dart", + "intro": "Brief definitions of the most important words in the Angular vocabulary", "reference": false }, "resources": { "icon": "play-circle-fill", "title": "Angular Resources", - "banner": "Angular 2 is currently in Release Candidate.", + "subtitle": "Dart", "resources": true }, "help": { "icon": "chat", "title": "Help & Support", + "subtitle": "From our team & community", "resources": true }, "styleguide": { "title": "Docs Style Guide", + "subtitle": "Dart", "intro": "Design & Layout Patterns For Documentation" } } diff --git a/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/aot-compiler.jade b/public/docs/dart/latest/cookbook/aot-compiler.jade new file mode 100644 index 0000000000..c743361ac8 --- /dev/null +++ b/public/docs/dart/latest/cookbook/aot-compiler.jade @@ -0,0 +1 @@ +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/component-communication.jade b/public/docs/dart/latest/cookbook/component-communication.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/component-communication.jade +++ b/public/docs/dart/latest/cookbook/component-communication.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/component-relative-paths.jade b/public/docs/dart/latest/cookbook/component-relative-paths.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/component-relative-paths.jade +++ b/public/docs/dart/latest/cookbook/component-relative-paths.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/dependency-injection.jade b/public/docs/dart/latest/cookbook/dependency-injection.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/cookbook/dependency-injection.jade +++ b/public/docs/dart/latest/cookbook/dependency-injection.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade +++ b/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/dynamic-form.jade b/public/docs/dart/latest/cookbook/dynamic-form.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/dynamic-form.jade +++ b/public/docs/dart/latest/cookbook/dynamic-form.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/form-validation.jade b/public/docs/dart/latest/cookbook/form-validation.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/form-validation.jade +++ b/public/docs/dart/latest/cookbook/form-validation.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/index.jade b/public/docs/dart/latest/cookbook/index.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/index.jade +++ b/public/docs/dart/latest/cookbook/index.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/ngmodule-faq.jade b/public/docs/dart/latest/cookbook/ngmodule-faq.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/ngmodule-faq.jade +++ b/public/docs/dart/latest/cookbook/ngmodule-faq.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/rc4-to-rc5.jade b/public/docs/dart/latest/cookbook/rc4-to-rc5.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/rc4-to-rc5.jade +++ b/public/docs/dart/latest/cookbook/rc4-to-rc5.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/set-document-title.jade b/public/docs/dart/latest/cookbook/set-document-title.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/cookbook/set-document-title.jade +++ b/public/docs/dart/latest/cookbook/set-document-title.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/ts-to-js.jade b/public/docs/dart/latest/cookbook/ts-to-js.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/cookbook/ts-to-js.jade +++ b/public/docs/dart/latest/cookbook/ts-to-js.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/visual-studio-2015.jade b/public/docs/dart/latest/cookbook/visual-studio-2015.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/cookbook/visual-studio-2015.jade +++ b/public/docs/dart/latest/cookbook/visual-studio-2015.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_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 index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/animations.jade +++ b/public/docs/dart/latest/guide/animations.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/architecture.jade b/public/docs/dart/latest/guide/architecture.jade index 9bf1256210..c72080b6e9 100644 --- a/public/docs/dart/latest/guide/architecture.jade +++ b/public/docs/dart/latest/guide/architecture.jade @@ -6,7 +6,7 @@ block includes - var _at_angular = 'angular2' :marked - Angular 2 is a framework to help us build client applications in HTML and + Angular 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. block angular-parts diff --git a/public/docs/dart/latest/guide/browser-support.jade b/public/docs/dart/latest/guide/browser-support.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/browser-support.jade +++ b/public/docs/dart/latest/guide/browser-support.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade index 863ee5e9bd..3eaa3ae40e 100644 --- a/public/docs/dart/latest/guide/forms.jade +++ b/public/docs/dart/latest/guide/forms.jade @@ -89,7 +89,7 @@ figure.image-display :marked ## Setup - Create a new project folder (`angular2_forms`) and create 3 files: + Create a new project folder (`angular_forms`) and create 3 files: `pubspec.yaml`, `web/index.html`, and `web/main.dart`. (These files should be familiar from the [QuickStart](../quickstart.html).) Put these contents in the files: @@ -160,7 +160,7 @@ figure.image-display There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before. - Understanding this component requires only the Angular 2 concepts covered in previous chapters. + Understanding this component requires only the Angular concepts covered in previous chapters. 1. The code imports a standard set of symbols from the Angular library. @@ -629,7 +629,7 @@ figure.image-display :marked ## Conclusion - The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation, and more: + The Angular form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation, and more: - An Angular HTML form template. - A form component class with a `Component` decorator. diff --git a/public/docs/dart/latest/guide/ngmodule.jade b/public/docs/dart/latest/guide/ngmodule.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/ngmodule.jade +++ b/public/docs/dart/latest/guide/ngmodule.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/router.jade b/public/docs/dart/latest/guide/router.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/guide/router.jade +++ b/public/docs/dart/latest/guide/router.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/guide/security.jade b/public/docs/dart/latest/guide/security.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/guide/security.jade +++ b/public/docs/dart/latest/guide/security.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/guide/server-communication.jade b/public/docs/dart/latest/guide/server-communication.jade index ef79633e6d..5dd2f5bace 100644 --- a/public/docs/dart/latest/guide/server-communication.jade +++ b/public/docs/dart/latest/guide/server-communication.jade @@ -17,7 +17,7 @@ block http-providers Actually, it is unnecessary to include `BrowserClient` in the list of providers. ***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri], the template compiler _generates_ dependency injection code, hence all the - identifiers used in DI have to be collected by the Angular 2 transformer + identifiers used in DI have to be collected by the Angular transformer so that the libraries containing these identifiers can be transformed. Unless special steps are taken, Dart libraries like `http` diff --git a/public/docs/dart/latest/guide/style-guide.jade b/public/docs/dart/latest/guide/style-guide.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/guide/style-guide.jade +++ b/public/docs/dart/latest/guide/style-guide.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/guide/template-syntax.jade b/public/docs/dart/latest/guide/template-syntax.jade index b754481889..bee8fc97a7 100644 --- a/public/docs/dart/latest/guide/template-syntax.jade +++ b/public/docs/dart/latest/guide/template-syntax.jade @@ -82,7 +82,7 @@ block dart-no-truthy-falsey the value `true`; all other values are `false`. TypeScript and JavaScript, on the other hand, treat many values (including non-null objects) as true. - A TypeScript Angular 2 program, for example, often has code like + A TypeScript Angular program, for example, often has code like `*ngIf="currentHero"` where a Dart program has code like `*ngIf="currentHero != null"`. @@ -109,7 +109,7 @@ block dart-safe-nav-op :marked The safe navigation operator (`?.`) is part of the Dart language. It's considered a template expression operator because - Angular 2 supports `?.` even in TypeScript and JavaScript apps. + Angular supports `?.` even in TypeScript and JavaScript apps. block json-pipe //- TODO: explain alternative in Dart diff --git a/public/docs/dart/latest/guide/testing.jade b/public/docs/dart/latest/guide/testing.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/guide/testing.jade +++ b/public/docs/dart/latest/guide/testing.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/guide/typescript-configuration.jade b/public/docs/dart/latest/guide/typescript-configuration.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/typescript-configuration.jade +++ b/public/docs/dart/latest/guide/typescript-configuration.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/upgrade.jade b/public/docs/dart/latest/guide/upgrade.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/upgrade.jade +++ b/public/docs/dart/latest/guide/upgrade.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index bd73ed73da..10e02bc436 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -23,7 +23,7 @@ include ../_util-fns :marked The `(click)` to the left of the equal sign identifies the button's click event as the **target of the binding**. The text within quotes on the right is the **template statement** in which we - respond to the click event by calling the component's `onClickMe` method. A template statement is a subset + respond to the click event by calling the component's `onClickMe` method. A [template statement](./template-syntax.html#template-statements) is a subset of Dart with restrictions and a few added tricks. When writing a binding we must be aware of a template statement's **execution context**. @@ -49,7 +49,6 @@ include ../_util-fns which we pass to the component's `onKey()` method. The user data we want is in that variable somewhere. -important .callout.is-important header $event vs. \$event :marked @@ -67,7 +66,7 @@ important The `onKey()` component method is where we extract the user's input from the event object, adding that input to the list of user data that we're accumulating in the component's `values` property. - We then use interpolation + We then use [interpolation](./template-syntax.html#interpolation) to display the accumulating `values` property back on screen. Enter the letters "abc", and then backspace to remove them. diff --git a/public/docs/dart/latest/guide/webpack.jade b/public/docs/dart/latest/guide/webpack.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/dart/latest/guide/webpack.jade +++ b/public/docs/dart/latest/guide/webpack.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/index.jade b/public/docs/dart/latest/index.jade index 1781aa6eba..338a52da92 100644 --- a/public/docs/dart/latest/index.jade +++ b/public/docs/dart/latest/index.jade @@ -1,22 +1,4 @@ -.clearfix - a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") - h2.text-headline.text-uppercase Quickstart - p A short beginner guide explaining the basic concepts of Angular - - footer View Quickstart - - a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") - h2.text-headline.text-uppercase Developer Guide - p An intermediate development guide covering all major features of Angular - - footer View Guide - - a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") - h2.text-headline.text-uppercase API Reference - p An advanced reference of all Angular Classes, Methods, etc. - - footer View API - +include ../../ts/latest/index div.c12.l-space-top-3 .alert.is-helpful. diff --git a/public/docs/dart/latest/styleguide.jade b/public/docs/dart/latest/styleguide.jade index 29caa74a86..b8afd2b812 100644 --- a/public/docs/dart/latest/styleguide.jade +++ b/public/docs/dart/latest/styleguide.jade @@ -1 +1 @@ -!= partial("../../_includes/styleguide/_styleguide") +include ../../_includes/styleguide/_styleguide diff --git a/public/docs/dart/latest/testing/application-under-test.jade b/public/docs/dart/latest/testing/application-under-test.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/testing/application-under-test.jade +++ b/public/docs/dart/latest/testing/application-under-test.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/testing/first-app-tests.jade b/public/docs/dart/latest/testing/first-app-tests.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/testing/first-app-tests.jade +++ b/public/docs/dart/latest/testing/first-app-tests.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/testing/index.jade b/public/docs/dart/latest/testing/index.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/testing/index.jade +++ b/public/docs/dart/latest/testing/index.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/testing/jasmine-testing-101.jade b/public/docs/dart/latest/testing/jasmine-testing-101.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/testing/jasmine-testing-101.jade +++ b/public/docs/dart/latest/testing/jasmine-testing-101.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/testing/testing-an-angular-pipe.jade b/public/docs/dart/latest/testing/testing-an-angular-pipe.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/dart/latest/testing/testing-an-angular-pipe.jade +++ b/public/docs/dart/latest/testing/testing-an-angular-pipe.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/tutorial/index.jade b/public/docs/dart/latest/tutorial/index.jade index f18795e25e..d586842a35 100644 --- a/public/docs/dart/latest/tutorial/index.jade +++ b/public/docs/dart/latest/tutorial/index.jade @@ -1,5 +1,5 @@ -include ../_util-fns +extends ../../../ts/_cache/tutorial/index.jade -+includeShared('{ts}', 'intro') -+includeShared('{ts}', 'main') +block includes + include ../_util-fns diff --git a/public/docs/index.jade b/public/docs/index.jade index 2fe2d058f1..39741c3082 100644 --- a/public/docs/index.jade +++ b/public/docs/index.jade @@ -2,13 +2,13 @@ .l-sub-section h3 TypeScript - p: Angular 2 TS - 最新版本 + p: Angular TS - 最新版本 h3 JavaScript - p Angular 2 JS - 最新版本 + p Angular JS - 最新版本 h3 Dart - p: Angular 2 Dart - 最新版本 \ No newline at end of file + p: Angular 2 Dart - 最新版本 diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 22e6851bd4..67e96e2f7f 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,66 +4,73 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "Angular 2 release is 2.0.0. View the change Log to see enhancements, fixes, and breaking changes." + "banner": "Angular release is 2.0.0. View the change log to see enhancements, fixes, and breaking changes." }, "quickstart": { "icon": "query-builder", - "title": "5 Min Quickstart", - "description": "Get up and running with Angular 2" + "title": "Quickstart", + "subtitle": "JavaScript", + "description": "Get up and running with Angular", + "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." }, "tutorial": { "icon": "list", "title": "Tutorial", - "banner": "Angular 2 is currently in Release Candidate." + "subtitle": "JavaScript" }, "guide": { "icon": "list", "title": "Developer Guides", - "banner": "Angular 2 is currently in Release Candidate." + "subtitle": "JavaScript" }, "cookbook": { "icon": "list", "title": "Cookbook", - "banner": "How to solve common implementation challenges." + "subtitle": "JavaScript" }, "api/": { "icon": "book", - "title": "API Preview", + "title": "API Reference", + "subtitle": "JavaScript", "reference": true }, "cheatsheet": { "title": "Angular Cheat Sheet", + "subtitle": "JavaScript", "intro": "A quick guide to Angular syntax. (Content is provisional and may change.)", "reference": false }, "glossary": { "title": "Glossary", - "intro": "Brief definitions of the most important words in the Angular 2 vocabulary", + "subtitle": "JavaScript", + "intro": "Brief definitions of the most important words in the Angular vocabulary", "reference": false }, "resources": { "icon": "play-circle-fill", "title": "Angular Resources", - "banner": "Angular 2 is currently in Release Candidate.", + "subtitle": "JavaScript", "resources": true }, "help": { "icon": "chat", "title": "Help & Support", + "subtitle": "From our team & community", "resources": true }, "styleguide": { "title": "Docs Style Guide", + "subtitle": "JavaScript", "intro": "Design & Layout Patterns For Documentation" } } diff --git a/public/docs/js/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/js/latest/cookbook/a1-a2-quick-reference.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/js/latest/cookbook/a1-a2-quick-reference.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/aot-compiler.jade b/public/docs/js/latest/cookbook/aot-compiler.jade new file mode 100644 index 0000000000..c743361ac8 --- /dev/null +++ b/public/docs/js/latest/cookbook/aot-compiler.jade @@ -0,0 +1 @@ +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/component-communication.jade b/public/docs/js/latest/cookbook/component-communication.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/component-communication.jade +++ b/public/docs/js/latest/cookbook/component-communication.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/component-relative-paths.jade b/public/docs/js/latest/cookbook/component-relative-paths.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/component-relative-paths.jade +++ b/public/docs/js/latest/cookbook/component-relative-paths.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/dependency-injection.jade b/public/docs/js/latest/cookbook/dependency-injection.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/js/latest/cookbook/dependency-injection.jade +++ b/public/docs/js/latest/cookbook/dependency-injection.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/js/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/js/latest/cookbook/dynamic-form-deprecated.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/js/latest/cookbook/dynamic-form-deprecated.jade +++ b/public/docs/js/latest/cookbook/dynamic-form-deprecated.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/js/latest/cookbook/dynamic-form.jade b/public/docs/js/latest/cookbook/dynamic-form.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/js/latest/cookbook/dynamic-form.jade +++ b/public/docs/js/latest/cookbook/dynamic-form.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/js/latest/cookbook/form-validation.jade b/public/docs/js/latest/cookbook/form-validation.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/form-validation.jade +++ b/public/docs/js/latest/cookbook/form-validation.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/index.jade b/public/docs/js/latest/cookbook/index.jade index a3a1b000b7..ee19ecaf9f 100644 --- a/public/docs/js/latest/cookbook/index.jade +++ b/public/docs/js/latest/cookbook/index.jade @@ -1,3 +1 @@ -include ../../../../_includes/_util-fns - -+includeShared('../../../ts/latest/cookbook/index.jade', 'cookbook') +include ../../../ts/latest/cookbook/index.jade diff --git a/public/docs/js/latest/cookbook/ngmodule-faq.jade b/public/docs/js/latest/cookbook/ngmodule-faq.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/ngmodule-faq.jade +++ b/public/docs/js/latest/cookbook/ngmodule-faq.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/rc4-to-rc5.jade b/public/docs/js/latest/cookbook/rc4-to-rc5.jade index 6778b6af28..c743361ac8 100644 --- a/public/docs/js/latest/cookbook/rc4-to-rc5.jade +++ b/public/docs/js/latest/cookbook/rc4-to-rc5.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") +include ../../../_includes/_ts-temp diff --git a/public/docs/js/latest/cookbook/set-document-title.jade b/public/docs/js/latest/cookbook/set-document-title.jade index f8df2a84a6..4782ba81d3 100644 --- a/public/docs/js/latest/cookbook/set-document-title.jade +++ b/public/docs/js/latest/cookbook/set-document-title.jade @@ -1 +1 @@ -!= partial("../../../_includes/_ts-temp") \ No newline at end of file +include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index 61f33bc328..3032fec285 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/public/docs/js/latest/cookbook/ts-to-js.jade @@ -1,18 +1,18 @@ include ../../../../_includes/_util-fns :marked - Everything that we can do in Angular 2 in TypeScript, we can also do + Everything that we can do in Angular in TypeScript, we can also do in JavaScript. Translating from one language to the other is mostly a matter of changing the way we organize our code and the way we access - Angular 2 APIs. + Angular APIs. - 在Angular 2中,所有能用TypeScript完成的事,也都能用JavaScript完成。 - 从一个语言换成另一个语言,最多只会影响源代码的组织方式和访问Angular 2 API的方法。 + 在Angular中,所有能用TypeScript完成的事,也都能用JavaScript完成。 + 从一个语言换成另一个语言,最多只会影响源代码的组织方式和访问Angular API的方法。 - Since TypeScript is a popular language option in Angular 2, many of the + Since TypeScript is a popular language option in Angular, many of the code examples you see on the Internet as well as on this site are written in TypeScript. This cookbook contains recipes for translating these kinds of - code examples to ES5, so that they can be applied to Angular 2 JavaScript + code examples to ES5, so that they can be applied to Angular JavaScript applications. TypeScript是个广受欢迎的Angular 2语言选项,你在网络上和本站上看到的很多范例代码都是用TypeScript写的。 @@ -67,30 +67,30 @@ table(width="100%") tr(style=top) td :marked - ### Importing Angular 2 Code + ### Importing Angular Code - ### 导入Angular 2代码 + ### 导入Angular代码 - In TypeScript code, Angular 2 classes, functions, and other members + In TypeScript code, Angular classes, functions, and other members are imported with TypeScript `import` statements: - 在TypeScript代码中,Angular 2是利用TypeScript的`import`语句来导入类、函数和其他成员的。 + 在TypeScript代码中,Angular是利用TypeScript的`import`语句来导入类、函数和其他成员的。 +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." ) td :marked - ### Accessing Angular 2 Code through the ng global + ### Accessing Angular Code through the ng global - ### 通过全局变量`ng`来访问Angular 2代码 + ### 通过全局变量`ng`来访问Angular代码 In JavaScript code, when using - [the Angular 2 packages](../glossary.html#!#scoped-package), + [the Angular packages](../glossary.html#!#scoped-package), we can access Angular code through the global `ng` object. In the nested members of this object we'll find everything we would import - from `angular2` in TypeScript: + from `angular` in TypeScript: - 在JavaScript中,当使用[Angular 2库](../glossary.html#!#scoped-package)时, + 在JavaScript中,当使用[Angular库](../glossary.html#!#scoped-package)时, 我们可以通过全局的`ng`对象来访问Angular代码。在本对象内嵌的很多成员中,我们会发现TypeScript能从`@angular`库导入的所有对应物。 +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." ) @@ -102,11 +102,11 @@ table(width="100%") ### 导入与导出应用程序代码 - Each file in an Angular 2 TypeScript application constitutes a + Each file in an Angular TypeScript application constitutes a TypeScript module. When we want to make something from a module available to other modules, we `export` it. - 在TypeScript版的Angular 2程序里,每个文件都是一个TypeScript模块。当需要让一个模块在其它模块中可见时,我们要`export`它。 + 在TypeScript版的Angular 程序里,每个文件都是一个TypeScript模块。当需要让一个模块在其它模块中可见时,我们要`export`它。 +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." ) @@ -124,11 +124,11 @@ table(width="100%") ### 共享应用程序代码 - In an Angular 2 JavaScript application, we load each file to the page + In an Angular JavaScript application, we load each file to the page using a `