diff --git a/.gitignore b/.gitignore index 15a86a596e..4f8d611769 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ pubspec.lock .DS_Store **/*.iml .idea +.vscode **/js/latest/api **/ts/latest/api **/dart/latest/api @@ -21,8 +22,7 @@ _.* public/docs/xref-*.* _zip-output www -npm-debug.log -npm-debug.log.* +npm-debug*.log* *.plnkr.html plnkr.html *plnkr.no-link.html diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000000..7ed6ff82de --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +5 diff --git a/.travis.yml b/.travis.yml index f09411f763..a8084eae11 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,6 +10,7 @@ env: - DISPLAY=:99.0 - CHROME_BIN=chromium-browser matrix: + - SCRIPT="lint" - SCRIPT="run-e2e-tests --fast" before_install: - npm install -g gulp --no-optional @@ -22,4 +23,4 @@ install: - npm run webdriver:update --prefix public/docs/_examples/_protractor - gulp add-example-boilerplate script: - - gulp $SCRIPT \ No newline at end of file + - gulp $SCRIPT diff --git a/gulpfile.js b/gulpfile.js index 05c97fd08c..e89d3fc26f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -89,6 +89,18 @@ var _exampleProtractorBoilerplateFiles = [ 'tsconfig.json' ]; +var _exampleConfigFilename = 'example-config.json'; + +function isDartPath(path) { + // Testing via indexOf() for now. If we need to match only paths with folders + // named 'dart' vs 'dart*' then try: path.match('/dart(/|$)') != null; + return path.indexOf('/dart') > -1; +} + +function excludeDartPaths(paths) { + return paths.filter(function (p) { return !isDartPath(p); }); +} + /** * Run Protractor End-to-End Specs for Doc Samples * Alias for 'run-e2e-tests' @@ -165,7 +177,6 @@ function runE2e() { // with the corresponding apps that they should run under. Then run // each app/spec collection sequentially. function findAndRunE2eTests(filter, outputFile) { - // create an output file with header. var lang = (argv.lang || '(ts|js)').toLowerCase(); if (lang === 'all') { lang = '(ts|js|dart)'; } @@ -203,8 +214,7 @@ function findAndRunE2eTests(filter, outputFile) { var status = { passed: [], failed: [] }; return examplePaths.reduce(function (promise, examplePath) { return promise.then(function () { - var isDart = examplePath.indexOf('/dart') > -1; - var runTests = isDart ? runE2eDartTests : runE2eTsTests; + var runTests = isDartPath(examplePath) ? runE2eDartTests : runE2eTsTests; return runTests(examplePath, outputFile).then(function(ok) { var arr = ok ? status.passed : status.failed; arr.push(examplePath); @@ -221,18 +231,19 @@ function findAndRunE2eTests(filter, outputFile) { // fileName; then shut down the example. All protractor output is appended // to the outputFile. function runE2eTsTests(appDir, outputFile) { - // spawn tasks to start the app - var appBuildSpawnInfo; - var appRunSpawnInfo; - - if (fs.existsSync(path.join(appDir, 'angular-cli.json'))) { - appBuildSpawnInfo = spawnExt('npm', ['run', 'build:cli'], { cwd: appDir }); - appRunSpawnInfo = spawnExt('npm', ['run', 'http-server:cli', '--', '-s'], { cwd: appDir }); - } else { - appBuildSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir }); - appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir }); + // Grab protractor configuration or defaults to systemjs config. + try { + var exampleConfig = fs.readJsonSync(`${appDir}/${_exampleConfigFilename}`); + } catch (e) { + exampleConfig = { + build: 'tsc', + run: 'http-server:e2e' + }; } + var appBuildSpawnInfo = spawnExt('npm', ['run', exampleConfig.build], { cwd: appDir }); + var appRunSpawnInfo = spawnExt('npm', ['run', exampleConfig.run, '--', '-s'], { cwd: appDir }); + return runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile); } @@ -375,7 +386,7 @@ gulp.task('add-example-boilerplate', function() { }); realPath = path.join(EXAMPLES_PATH, '/typings'); - var typingsPaths = getTypingsPaths(EXAMPLES_PATH); + var typingsPaths = excludeDartPaths(getTypingsPaths(EXAMPLES_PATH)); typingsPaths.forEach(function(linkPath) { gutil.log("symlinking " + linkPath + ' -> ' + realPath) fsUtils.addSymlink(realPath, linkPath); @@ -398,16 +409,18 @@ function copyExampleBoilerplate() { var sourceFiles = _exampleBoilerplateFiles.map(function(fn) { return path.join(EXAMPLES_PATH, fn); }); - var examplePaths = getExamplePaths(EXAMPLES_PATH); + var examplePaths = excludeDartPaths(getExamplePaths(EXAMPLES_PATH)); var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){ return path.join(EXAMPLES_PATH, fn); }); var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH); - return copyFiles(sourceFiles, examplePaths) + // Make boilerplate files read-only to avoid that they be edited by mistake. + var destFileMode = '444'; + return copyFiles(sourceFiles, examplePaths, destFileMode) .then(function() { - return copyFiles(dartWebSourceFiles, dartExampleWebPaths); + return copyFiles(dartWebSourceFiles, dartExampleWebPaths, destFileMode); }) // copy certain files from _examples/_protractor dir to each subdir that contains an e2e-spec file. .then(function() { @@ -415,7 +428,7 @@ function copyExampleBoilerplate() { _exampleProtractorBoilerplateFiles .map(function(name) {return path.join(EXAMPLES_PROTRACTOR_PATH, name);});; var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH); - return copyFiles(protractorSourceFiles, e2eSpecPaths); + return copyFiles(protractorSourceFiles, e2eSpecPaths, destFileMode); }); } @@ -789,16 +802,23 @@ function showHideExampleNodeModules(showOrHide) { } } - +// Copies fileNames into destPaths, setting the mode of the +// files at the destination as optional_destFileMode if given. // returns a promise -function copyFiles(fileNames, destPaths) { +function copyFiles(fileNames, destPaths, optional_destFileMode) { var copy = Q.denodeify(fsExtra.copy); + var chmod = Q.denodeify(fsExtra.chmod); var copyPromises = []; destPaths.forEach(function(destPath) { fileNames.forEach(function(fileName) { var baseName = path.basename(fileName); var destName = path.join(destPath, baseName); var p = copy(fileName, destName, { clobber: true}); + if(optional_destFileMode !== undefined) { + p = p.then(function () { + return chmod(destName, optional_destFileMode); + }); + } copyPromises.push(p); }); }); @@ -841,7 +861,7 @@ function getTypingsPaths(basePath) { function getExamplePaths(basePath, includeBase) { // includeBase defaults to false - return getPaths(basePath, "example-config.json", includeBase) + return getPaths(basePath, _exampleConfigFilename, includeBase) } function getDartExampleWebPaths(basePath) { diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index 01ff0d2067..8976996bb6 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -235,7 +235,7 @@ script. //- Returns truthy iff path is example project relative. - var isProjRelDir = function(path) { -- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.js'); +- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.ts'); - // Last conjunct handles case for shared project e2e test file like - // cb-component-communication/e2e-spec.js (is shared between ts & dart) - // TODO: generalize: compare start with getExampleName(); which needs to be fixed. diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 449fd35581..768c5e9d97 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -1,23 +1,17 @@ +# _exampleBoilerplateFiles .editorconfig -.idea -.vscode -styles.css -typings -typings.json -node_modules -jspm_packages -*.js.map -package.json karma.conf.js karma-test-shim.js +package.json +*/**/styles.css +systemjs.config.js tsconfig.json tslint.json +typings.json wallaby.js -npm-debug*. + protractor.config.js -systemjs.config.js _test-output -_temp **/ts/**/*.js **/ts-snippets/**/*.js *.d.ts diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore index 766f37285b..5df0fe5dc6 100644 --- a/public/docs/_examples/cli-quickstart/ts/.gitignore +++ b/public/docs/_examples/cli-quickstart/ts/.gitignore @@ -36,3 +36,4 @@ Thumbs.db !config/karma.conf.js !config/protractor.conf.js !src/typings.d.ts +!src/tsconfig.json diff --git a/public/docs/_examples/cli-quickstart/ts/example-config.json b/public/docs/_examples/cli-quickstart/ts/example-config.json index e69de29bb2..528f7bd081 100644 --- a/public/docs/_examples/cli-quickstart/ts/example-config.json +++ b/public/docs/_examples/cli-quickstart/ts/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:cli", + "run": "http-server:cli" +} diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json new file mode 100644 index 0000000000..7dbff17dfa --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "declaration": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "module": "commonjs", + "moduleResolution": "node", + "noEmitOnError": true, + "noImplicitAny": false, + "outDir": "../dist/", + "rootDir": ".", + "sourceMap": true, + "target": "es5", + "inlineSources": true + }, + + "files": [ + "main.ts", + "typings.d.ts" + ] +} diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index f72f1f53e8..7c67a39ac2 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -18,7 +18,7 @@ "webdriver:update": "webdriver-manager update", "start:webpack": "webpack-dev-server --inline --progress --port 8080", "test:webpack": "karma start karma.webpack.conf.js", - "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", + "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail", "build:cli": "ng build" }, "keywords": [], diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js index 449e847339..2ae228b717 100644 --- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js +++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js @@ -41,7 +41,7 @@ // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; - }; + } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; @@ -52,7 +52,7 @@ var config = { map: map, packages: packages - } + }; System.config(config); diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js index e362b122a2..27dcf330a5 100644 --- a/public/docs/_examples/systemjs.config.js +++ b/public/docs/_examples/systemjs.config.js @@ -40,7 +40,7 @@ // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; - }; + } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; @@ -51,7 +51,7 @@ var config = { map: map, packages: packages - } + }; System.config(config); diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 9e13e14edb..6093653def 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -66,7 +66,7 @@ }, map: map, packages: packages - } + }; System.config(config); diff --git a/public/docs/_examples/toh-1/dart/example-config.json b/public/docs/_examples/toh-1/dart/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts new file mode 100644 index 0000000000..35615de9ba --- /dev/null +++ b/public/docs/_examples/toh-1/e2e-spec.ts @@ -0,0 +1,26 @@ +/// +describe('Tutorial part 1', () => { + + let expectedH1 = 'Tour of Heroes'; + let expectedTitle = `Angular 2 ${expectedH1}`; + let hero = { id: 1, name: 'Windstorm' }; + let expectedH2 = `${hero.name} details!`; + + beforeEach(() => { + return browser.get(''); + }); + + it(`should have title '${expectedTitle}'`, () => { + expect(browser.getTitle()).toEqual(expectedTitle); + }); + + it(`should have '${expectedH2}'`, () => { + let text = element(by.css('h2')).getText(); + expect(text).toEqual(expectedH2); + }); + + it(`should have input name '${hero.name}'`, () => { + let name = element(by.css('input')).getAttribute('value'); + expect(name).toEqual(hero.name); + }); +}); diff --git a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts index a62447ad91..05180b0c83 100644 --- a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts +++ b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts @@ -37,10 +37,3 @@ export class AppComponent { hero = 'Windstorm'; } // #enddocregion app-component-1 - -// #docregion hero-property-1 -hero: Hero = { - id: 1, - name: 'Windstorm' -}; -// #enddocregion hero-property-1 diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts index 73ac649198..b61fac3c0b 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.ts +++ b/public/docs/_examples/toh-1/ts/app/app.component.ts @@ -22,10 +22,11 @@ export class Hero { }) export class AppComponent { title = 'Tour of Heroes'; + // #docregion hero-property-1 hero: Hero = { id: 1, name: 'Windstorm' }; + // #enddocregion hero-property-1 } - // #enddocregion pt1 diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 8e0d3c84a4..5d10fc55a9 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -1,4 +1,4 @@ -// #docregion pt2 +// #docregion import { Component } from '@angular/core'; export class Hero { @@ -42,7 +42,7 @@ const HEROES: Hero[] = [ `, -// #docregion styles-1 + // #docregion styles styles: [` .selected { background-color: #CFD8DC !important; @@ -92,18 +92,16 @@ const HEROES: Hero[] = [ border-radius: 4px 0 0 4px; } `] -// #enddocregion styles-1 + // #enddocregion styles }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; -// #docregion selected-hero-1 + // #docregion selected-hero selectedHero: Hero; -// #enddocregion selected-hero-1 + // #enddocregion selected-hero -// #docregion on-select-1 + // #docregion on-select onSelect(hero: Hero) { this.selectedHero = hero; } -// #enddocregion on-select-1 + // #enddocregion on-select } - -// #enddocregion pt2 diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts index dae4ddf676..42dbeb9f7d 100644 --- a/public/docs/_examples/toh-2/ts/app/main.ts +++ b/public/docs/_examples/toh-2/ts/app/main.ts @@ -1,7 +1,5 @@ -// #docregion pt1 import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts index 42a0c8b622..20ac18a660 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts @@ -61,5 +61,3 @@ export class AppComponent implements OnInit { onSelect(hero: Hero) { this.selectedHero = hero; } // #docregion on-init } -// #enddocregion on-init -// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts index 80d6ca020c..b36b0ae36c 100644 --- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts @@ -6,7 +6,7 @@ import { Hero } from './hero'; selector: 'my-hero-detail', template: `
-

{{hero.name}} details

+

{{hero.name}} details!

{{hero.id}}
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts index 1374cb25fd..5a15d5c285 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts @@ -6,18 +6,14 @@ import { Injectable } from '@angular/core'; // #enddocregion empty-class import { HEROES } from './mock-heroes'; -// #docregion empty-class -// #docregion getHeroes-stub +// #docregion empty-class, getHeroes-stub @Injectable() export class HeroService { -// #enddocregion empty-class + // #enddocregion empty-class getHeroes() { -// #enddocregion getHeroes-stub + // #enddocregion getHeroes-stub return HEROES; -// #docregion getHeroes-stub + // #docregion getHeroes-stub } -// #docregion empty-class + // #docregion empty-class } -// #enddocregion getHeroes-stub -// #enddocregion empty-class -// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.ts b/public/docs/_examples/toh-4/ts/app/hero.service.ts index d784b43c17..87eb9ec673 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.ts @@ -12,8 +12,8 @@ export class HeroService { getHeroes() { return Promise.resolve(HEROES); } - // #enddocregion get-heroes - // #enddocregion just-get-heroes + // #enddocregion get-heroes, just-get-heroes + // #enddocregion // See the "Take it slow" appendix // #docregion get-heroes-slowly getHeroesSlowly() { @@ -22,7 +22,6 @@ export class HeroService { ); } // #enddocregion get-heroes-slowly + // #docregion // #docregion just-get-heroes } -// #enddocregion just-get-heroes -// #enddocregion diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts index ddd36d7868..69afde3d34 100644 --- a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts +++ b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts @@ -13,4 +13,3 @@ export var HEROES: Hero[] = [ {id: 19, name: 'Magma'}, {id: 20, name: 'Tornado'} ]; -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts index a96c8e0738..07a2317293 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts @@ -11,7 +11,6 @@ import { HeroesComponent } from './heroes.component'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; // #docregion - @Component({ selector: 'my-app', template: ` @@ -20,13 +19,12 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route `, directives: [HeroesComponent], providers: [ -// #enddocregion + // #enddocregion ROUTER_PROVIDERS, -// #docregion + // #docregion HeroService ] }) export class AppComponent { title = 'Tour of Heroes'; } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts index ca3f60efba..6b690a6c63 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts @@ -10,14 +10,14 @@ import { HeroesComponent } from './heroes.component'; @Component({ selector: 'my-app', -// #docregion template + // #docregion template template: `

{{title}}

Heroes `, -// #enddocregion template -// #docregion directives-and-providers + // #enddocregion template + // #docregion directives-and-providers directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS, @@ -37,4 +37,3 @@ import { HeroesComponent } from './heroes.component'; export class AppComponent { title = 'Tour of Heroes'; } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css index 137e9be7be..f4e8082ea1 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.css +++ b/public/docs/_examples/toh-5/ts/app/app.component.css @@ -1,5 +1,4 @@ -/* #docplaster */ -/* #docregion css */ +/* #docregion */ h1 { font-size: 1.2em; color: #999; @@ -28,4 +27,3 @@ nav a:hover { nav a.router-link-active { color: #039be5; } -/* #enddocregion css */ diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts index 8d26ea6d90..5589cd84e9 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.ts @@ -12,7 +12,7 @@ import { HeroService } from './hero.service'; @Component({ selector: 'my-app', -// #docregion template + // #docregion template template: `

{{title}}

`, -// #enddocregion template -// #docregion style-urls + // #enddocregion template + // #docregion style-urls styleUrls: ['app/app.component.css'], -// #enddocregion style-urls + // #enddocregion style-urls directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS, @@ -32,21 +32,21 @@ import { HeroService } from './hero.service'; ] }) @RouteConfig([ -// #docregion dashboard-route + // #docregion dashboard-route { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true }, -// #enddocregion dashboard-route -// #docregion hero-detail-route + // #enddocregion dashboard-route + // #docregion hero-detail-route { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent }, -// #enddocregion hero-detail-route + // #enddocregion hero-detail-route { path: '/heroes', name: 'Heroes', @@ -56,4 +56,3 @@ import { HeroService } from './hero.service'; export class AppComponent { title = 'Tour of Heroes'; } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts index 2d51b37007..e6b9609ab0 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts @@ -24,4 +24,3 @@ export class DashboardComponent implements OnInit { gotoDetail() { /* not implemented yet */} } -// #enddocregion component diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.css b/public/docs/_examples/toh-5/ts/app/dashboard.component.css index ce6e963a5f..f6263074f0 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.css +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.css @@ -1,4 +1,3 @@ -/* #docplaster */ /* #docregion */ [class*='col-'] { float: left; @@ -60,4 +59,3 @@ h4 { min-width: 60px; } } -/* #enddocregion */ diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.html b/public/docs/_examples/toh-5/ts/app/dashboard.component.html index 028eab6eb3..67ac6aa459 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.html +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.html @@ -1,9 +1,9 @@

Top Heroes

- +
- +

{{hero.name}}

diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index 3d54f5ab4b..e58760caad 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -22,12 +22,12 @@ export class DashboardComponent implements OnInit { heroes: Hero[] = []; -// #docregion ctor + // #docregion ctor constructor( private router: Router, private heroService: HeroService) { } -// #enddocregion ctor + // #enddocregion ctor ngOnInit() { this.heroService.getHeroes() @@ -41,4 +41,3 @@ export class DashboardComponent implements OnInit { } // #enddocregion goto-detail } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 08af69c69c..96eb8aa93f 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -1,7 +1,6 @@ // #docplaster // #docregion -// #docregion v2 -// #docregion import-oninit +// #docregion import-oninit, v2 import { Component, OnInit } from '@angular/core'; // #enddocregion import-oninit // #docregion import-route-params @@ -18,25 +17,24 @@ import { HeroService } from './hero.service'; selector: 'my-hero-detail', // #docregion template-url templateUrl: 'app/hero-detail.component.html', - // #enddocregion template-url -// #enddocregion v2 + // #enddocregion template-url, v2 styleUrls: ['app/hero-detail.component.css'] -// #docregion v2 + // #docregion v2 }) // #enddocregion extract-template // #docregion implement export class HeroDetailComponent implements OnInit { -// #enddocregion implement + // #enddocregion implement hero: Hero; -// #docregion ctor + // #docregion ctor constructor( private heroService: HeroService, private routeParams: RouteParams) { } -// #enddocregion ctor + // #enddocregion ctor -// #docregion ng-oninit + // #docregion ng-oninit ngOnInit() { // #docregion get-id let id = +this.routeParams.get('id'); @@ -44,13 +42,11 @@ export class HeroDetailComponent implements OnInit { this.heroService.getHero(id) .then(hero => this.hero = hero); } -// #enddocregion ng-oninit + // #enddocregion ng-oninit -// #docregion go-back + // #docregion go-back goBack() { window.history.back(); } // #enddocregion go-back } -// #enddocregion v2 -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts index 9bae27f006..c1cb8fa3e6 100644 --- a/public/docs/_examples/toh-5/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts @@ -24,4 +24,3 @@ export class HeroService { } // #enddocregion get-hero } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html index cce1853d30..db41c4692e 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.html +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html @@ -17,5 +17,3 @@
- - diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index 300f3065e0..cd43e03b86 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -6,21 +6,18 @@ import { Router } from '@angular/router-deprecated'; import { Hero } from './hero'; import { HeroService } from './hero.service'; -// #docregion metadata -// #docregion heroes-component-renaming +// #docregion heroes-component-renaming, metadata @Component({ selector: 'my-heroes', -// #enddocregion heroes-component-renaming + // #enddocregion heroes-component-renaming templateUrl: 'app/heroes.component.html', styleUrls: ['app/heroes.component.css'] -// #docregion heroes-component-renaming + // #docregion heroes-component-renaming }) -// #enddocregion heroes-component-renaming -// #enddocregion metadata -// #docregion class -// #docregion heroes-component-renaming +// #enddocregion heroes-component-renaming, metadata +// #docregion class, heroes-component-renaming export class HeroesComponent implements OnInit { -// #enddocregion heroes-component-renaming + // #enddocregion heroes-component-renaming heroes: Hero[]; selectedHero: Hero; @@ -41,8 +38,5 @@ export class HeroesComponent implements OnInit { gotoDetail() { this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); } -// #docregion heroes-component-renaming + // #docregion heroes-component-renaming } -// #enddocregion heroes-component-renaming -// #enddocregion class -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts index ddd36d7868..69afde3d34 100644 --- a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts +++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts @@ -13,4 +13,3 @@ export var HEROES: Hero[] = [ {id: 19, name: 'Magma'}, {id: 20, name: 'Tornado'} ]; -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html index 93fa8d4889..4df64edba1 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -1,7 +1,7 @@ - + diff --git a/public/docs/_examples/toh-5/ts/styles.1.css b/public/docs/_examples/toh-5/ts/styles.1.css index 5b77b74d1c..dee6d5b8ca 100644 --- a/public/docs/_examples/toh-5/ts/styles.1.css +++ b/public/docs/_examples/toh-5/ts/styles.1.css @@ -1,5 +1,11 @@ -/* #docregion */ -h2 { +/* #docregion toh-excerpt */ +/* Master Styles */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; @@ -11,23 +17,7 @@ body, input[text], button { color: #888; font-family: Cambria, Georgia; } -button { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} +/* . . . */ /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index 73ea334fc2..bce249dcc1 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts @@ -1,6 +1,8 @@ // #docplaster -// #docregion +// #docregion, variables-imports import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +// #enddocregion variables-imports import { RouteParams } from '@angular/router-deprecated'; import { Hero } from './hero'; @@ -11,11 +13,13 @@ import { HeroService } from './hero.service'; templateUrl: 'app/hero-detail.component.html', styleUrls: ['app/hero-detail.component.css'] }) +// #docregion variables-imports export class HeroDetailComponent implements OnInit { @Input() hero: Hero; @Output() close = new EventEmitter(); error: any; navigated = false; // true if navigated here + // #enddocregion variables-imports constructor( private heroService: HeroService, diff --git a/public/docs/_examples/webpack/e2e-spec.ts b/public/docs/_examples/webpack/e2e-spec.ts new file mode 100644 index 0000000000..8e706597f5 --- /dev/null +++ b/public/docs/_examples/webpack/e2e-spec.ts @@ -0,0 +1,18 @@ +/// +describe('QuickStart E2E Tests', function () { + + let expectedMsg = 'Hello from Angular 2 App with Webpack'; + + beforeEach(function () { + browser.get(''); + }); + + it(`should display: ${expectedMsg}`, function () { + expect(element(by.css('h1')).getText()).toEqual(expectedMsg); + }); + + it('should display an image', function () { + expect(element(by.css('img')).isPresent()).toBe(true); + }); + +}); diff --git a/public/docs/_examples/webpack/ts/example-config.json b/public/docs/_examples/webpack/ts/example-config.json index e69de29bb2..9e587f892f 100644 --- a/public/docs/_examples/webpack/ts/example-config.json +++ b/public/docs/_examples/webpack/ts/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:webpack", + "run": "http-server:cli" +} diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index e485a15883..c25e9dd7d1 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -126,11 +126,10 @@ a(id='toc') 我们遵循[单一职责原则](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle)来创建的所有组件、服务和其它标志等。这样能帮助我们把应用程序弄的干净整洁，易于阅读、维护和测试。 - ### Rule of One - ### 单一法则 - - #### Style 01-01 - #### 风格 01-01 + ### Rule of One + ### 单一法则 + #### Style 01-01 + #### 风格 01-01 .s-rule.do :marked **Do** define one thing (e.g. service or component) per file. @@ -202,12 +201,13 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Small Functions - ### 小函数 - - #### Style 01-02 - #### 风格01-02 .s-rule.do + ### Small Functions + ### 小函数 + + #### Style 01-02 + #### 风格01-02 + :marked **Do** define small functions @@ -263,11 +263,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### General Naming Guidelines - ### 总体命名指导原则 - - #### Style 02-01 - #### 风格02-01 + ### General Naming Guidelines + ### 总体命名知道原则 + #### Style 02-01 + #### 风格02-01 .s-rule.do :marked @@ -307,11 +306,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Separate File Names with Dots and Dashes - ### 使用点和横杠来分隔文件名字 - - #### Style 02-02 - #### 风格02-02 + ### Separate File Names with Dots and Dashes + ### 使用点和横杠来分隔文件名 + #### Style 02-02 + #### 风格02-02 .s-rule.do :marked @@ -376,11 +374,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Components and Directives - ### 组件和指令命名 - - #### Style 02-03 - #### 风格02-03 + ### Components and Directives + ### 组件与指令命名 + #### Style 02-03 + #### 风格02-03 .s-rule.do :marked @@ -478,11 +475,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Service Names - ### 服务名 - - #### Style 02-04 - #### 风格02-04 + ### Service Names + ### 服务名 + #### Style 02-04 + #### 风格02-04 .s-rule.do :marked @@ -563,11 +559,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Bootstrapping - ### 引导程序 - - #### Style 02-05 - #### 风格02-05 + ### Bootstrapping + ### 引导 + #### Style 02-05 + #### 风格02-05 .s-rule.do :marked @@ -600,11 +595,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Directive Selectors - ### 指令的选择器 - - #### Style 02-06 - #### 风格02-06 + ### Directive Selectors + ### 指令的选择器 + #### Style 02-06 + #### 风格02-06 .s-rule.do :marked @@ -631,11 +625,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Custom Prefix for Components - ### 为组件自定义前缀 - - #### Style 02-07 - #### 风格02-07 + ### Custom Prefix for Components + ### 为组件自定义前缀 + #### Style 02-07 + #### 风格02-07 .s-rule.do :marked @@ -680,11 +673,10 @@ a(href="#toc") 回到顶部 :marked :marked - ### Custom Prefix for Directives - ### 为指令添加自定义前缀 - - #### Style 02-08 - #### 风格02-08 + ### Custom Prefix for Directives + ### 为指令添加自定义前缀 + #### Style 02-08 + #### 风格02-08 .s-rule.do :marked @@ -716,11 +708,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Pipe Names - ### 管道名 - - #### Style 02-09 - #### 风格02-09 + ### Pipe Names + ### 管道名 + #### Style 02-09 + #### 风格02-09 .s-rule.do :marked @@ -769,11 +760,9 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Unit Test File Names - ### 单元测试文件命名 - - #### Style 02-10 - #### 风格02-10 + ### Unit Test File Names + ### 单元测试文件名 + #### 风格02-10 .s-rule.do :marked @@ -856,11 +845,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### End to End Test File Names - ### 端到端测试文件命名 - - #### Style 02-11 - #### 风格02-11 + ### End to End Test File Names + ### 端到端测试文件名 + #### Style 02-11 + #### 风格02-11 .s-rule.do :marked @@ -921,11 +909,8 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Classes - ### 类 - - #### Style 03-01 - #### 风格03-01 + ### 类 + #### 风格03-01 .s-rule.do :marked @@ -958,11 +943,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Constants - ### 常量 - - #### Style 03-02 - #### 风格03-02 + ### Constants + ### 常量 + #### Style 03-02 + #### 风格03-02 .s-rule.do :marked @@ -995,11 +979,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Interfaces - ### 接口 - - #### Style 03-03 - #### 风格03-03 + ### Interfaces + ### 接口 + #### Style 03-03 + #### 风格03-03 .s-rule.do :marked @@ -1032,11 +1015,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Properties and Methods - ### 属性和方法名 - - #### Style 03-04 - #### 风格03-04 + ### Properties and Methods + ### 属性和方法 + #### Style 03-04 + #### 样式03-04 .s-rule.do :marked @@ -1081,11 +1063,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Import Destructuring Spacing - ### 导入语句解构表达式中的空格 - - #### Style 03-05 - #### 风格03-05 + ### Import Destructuring Spacing + ### 导入语句解构表达式中的空格 + #### Style 03-05 + #### 风格03-05 .s-rule.do :marked @@ -1111,11 +1092,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Import Line Spacing - ### 导入语句中的空行 - - #### Style 03-06 - #### 风格03-06 + ### Import Line Spacing + ### 导入语句中的空行 + #### Style 03-06 + #### 风格03-06 .s-rule.do :marked @@ -1179,11 +1159,9 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### LIFT - ### LIFT (定位`L`ocate、识别`I`dentity、平面化`F`lattest、尝试`T`ry遵循不重复自己DRY - Do Not Repeat Yourself约定) - - #### Style 04-01 - #### 风格04-01 + ### LIFT + #### Style 04-01 + #### 风格04-01 .s-rule.do :marked @@ -1208,11 +1186,11 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Locate - ### 定位 - - #### Style 04-02 - #### 风格04-02 + ### Locate + ### 定位 + + #### Style 04-02 + #### 风格04-02 .s-rule.do :marked @@ -1232,11 +1210,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Identify - ### 识别 - - #### Style 04-03 - #### 风格04-03 + ### Identify + ### 识别 + #### Style 04-03 + #### 风格04-03 .s-rule.do :marked @@ -1275,11 +1252,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Flat - ### 平面化 - - #### Style 04-04 - #### 风格04-04 + ### Flat + ### 平面化 + #### Style 04-04 + #### 风格04-04 .s-rule.do :marked @@ -1305,11 +1281,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### T-DRY (Try to be DRY) - ### T-DRY(尝试遵循不重复自己DRY的约定) - - #### Style 04-05 - #### 风格04-05 + ### T-DRY (Try to be DRY) + ### T-DRY (尝试遵循不重复自己DRY的约定) + #### Style 04-05 + #### 风格04-05 .s-rule.do :marked @@ -1335,11 +1310,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Overall Structural Guidelines - ### 总体结构指导原则 - - #### Style 04-06 - #### 风格04-06 + ### Overall Structural Guidelines + ### 总体结构指导原则 + #### Style 04-06 + #### 风格04-06 .s-rule.do :marked @@ -1422,11 +1396,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Shared Folder - ### 共享目录 - - #### Style 04-07 - #### 风格04-07 + ### Shared Folder + ### 共享目录 + #### Style 04-07 + #### 风格04-07 .s-rule.do :marked @@ -1495,11 +1468,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Folders-by-Feature Structure - ### 根据特性划分的目录结构 - - #### Style 04-08 - #### 风格04-08 + ### Folders-by-Feature Structure + ### 根据特性划分的目录结构 + #### Style 04-08 + #### 风格04-08 .s-rule.do :marked @@ -1586,11 +1558,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Layout Components - ### 布局组件 - - #### Style 04-09 - #### 风格04-09 + ### Layout Components + ### 布局组件 + #### Style 04-09 + #### 风格04-09 .s-rule.do :marked @@ -1650,11 +1621,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Create and Import Barrels - ### 新建和导入封装桶 - - #### Style 04-10 - #### 风格04-10 + ### Create and Import Barrels + ### 创建和导入封装桶 + #### Style 04-10 + #### 风格04-10 .s-rule.consider :marked @@ -1760,11 +1730,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Lazy Loaded Folders - ### 惰性加载目录 - - #### Style 04-11 - #### 风格04-11 + ### Lazy Loaded Folders + ### 惰性加载目录 + #### Style 04-11 + #### 风格04-11 A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts. 一个独特的应用程序特性或者工作流可能被**惰性加载**或**按需加载**，而非在应用程序启动时就全部加载。 @@ -1788,11 +1757,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Prefix Lazy Loaded Folders with + - ### 为惰性加载目录名字加前缀+ - - #### Style 04-12 - #### 风格04-12 + ### Prefix Lazy Loaded Folders with + + ### 为惰性加载目录名字加前缀+ + #### Style 04-12 + #### 样式04-12 .s-rule.do :marked @@ -1836,11 +1804,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Never Directly Import Lazy Loaded Folders - ### 决不直接导入惰性加载目录 - - #### Style 04-13 - #### 风格 + ### Never Directly Import Lazy Loaded Folders + ### 决不直接导入惰性加载目录 + #### Style 04-13 + #### 风格04-13 .s-rule.avoid :marked @@ -1863,11 +1830,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Lazy Loaded Folders May Import From a Parent + ### Lazy Loaded Folders May Import From a Parent ### 惰性加载目录可以导入父级 - - #### Style 04-14 - #### 风格04-14 + #### Style 04-14 + #### 样式04-14 .s-rule.do :marked @@ -1891,11 +1857,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Use Component Router to Lazy Load - ### 使用组件路由器来惰性加载 - - #### Style 04-15 - #### 风格04-15 + ### Use Component Router to Lazy Load + ### 使用组件路由器来惰性加载 + #### Style 04-15 + #### 风格04-15 .s-rule.do :marked @@ -1917,12 +1882,11 @@ a(href="#toc") 回到顶部 .l-main-section :marked ## Components - ## 组件 - ### Components Selector Naming - ### 组件选择器命名 - - #### Style 05-02 - #### 风格05-02 + + ### Components Selector Naming + ### 组件选择器命名 + #### Style 05-02 + #### 风格05-02 .s-rule.do :marked @@ -1953,11 +1917,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Components as Elements - ### 将组件当做元素 - - #### Style 05-03 - #### 风格05-03 + ### Components as Elements + ### 把组件当做元素 + #### Style 05-03 + #### 风格05-03 .s-rule.do :marked @@ -2003,11 +1966,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Extract Template and Styles to Their Own Files - ### 把模板和样式提取到它们自己的文件 - - #### Style 05-04 - #### 风格05-04 + ### Extract Template and Styles to Their Own Files + ### 把模板和样式提取到它们自己的文件 + #### Style 05-04 + #### 风格05-04 .s-rule.do :marked @@ -2059,11 +2021,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Decorate Input and Output Properties Inline - ### 内联Input和Output属性装饰 - - #### Style 05-12 - #### 风格05-12 + ### Decorate Input and Output Properties Inline + ### 内联Input和Output属性装饰器 + #### Style 05-12 + #### 风格05-12 .s-rule.do :marked @@ -2113,11 +2074,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Avoid Renaming Inputs and Outputs - ### 避免重命名输入和输出 - - #### Style 05-13 - #### 风格05-13 + ### Avoid Renaming Inputs and Outputs + ### 避免重命名输入和输出 + #### Style 05-13 + #### 风格05-13 .s-rule.avoid :marked @@ -2152,11 +2112,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Member Sequence - ### 成员顺序 - - #### Style 05-14 - #### 风格05-14 + ### Member Sequence + ### 成员顺序 + #### Style 05-14 + #### 风格05-14 .s-rule.do :marked @@ -2188,12 +2147,11 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Put Logic in Services - ### 把逻辑放到服务里 - - #### Style 05-15 - #### 风格05-15 - + ### Put Logic in Services + ### 把逻辑放到服务里 + #### Style 05-15 + #### 风格05-15 + .s-rule.do :marked **Do** limit logic in a component to only that required for the view. All other logic should be delegated to services. @@ -2243,11 +2201,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Don't Prefix Output Properties - ### 不要给输出属性加前缀 - - #### Style 05-16 - #### 风格05-16 + ### Don't Prefix Output Properties + ### 不要给输出属性加前缀 + #### Style 05-16 + #### 风格05-16 .s-rule.do :marked @@ -2293,11 +2250,9 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Put Presentation Logic in the Component Class - ### 把展示逻辑放到组件类里 - - #### Style 05-17 - #### 风格05-17 + ### 把展示逻辑放到组件类里 + #### Style 05-17 + #### 风格05-17 .s-rule.do :marked @@ -2339,11 +2294,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Use Directives to Enhance an Existing Element - ### 使用指令来加强已有元素 - - #### Style 06-01 - #### 风格06-01 + ### Use Directives to Enhance an Existing Element + ### 使用指令来加强已有元素 + #### Style 06-01 + #### 风格06-01 .s-rule.do :marked @@ -2375,11 +2329,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Use HostListener and HostBinding Class Decorators - ### 使用HostListener和HostBinding类装饰器 - - #### Style 06-03 - #### 风格06-03 + ### Use HostListener and HostBinding Class Decorators + ### 使用HostListener和HostBinding类装饰器 + #### Style 06-03 + #### 风格06-03 .s-rule.do :marked @@ -2414,11 +2367,10 @@ a(href="#toc") 回到顶部 ## Services ## 服务 - ### Services are Singletons in Same Injector - ### 在同一个注入器内，服务是单例 - - #### Style 07-01 - #### 风格07-01 + ### Services are Singletons in Same Injector + ### 在同一个注入器内，服务是单例 + #### Style 07-01 + #### 风格07-01 .s-rule.do :marked @@ -2447,11 +2399,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Single Responsibility - ### 单一职责 - - #### Style 07-02 - #### 风格07-02 + ### Single Responsibility + ### 单一职责 + #### Style 07-02 + #### 风格07-02 .s-rule.do :marked @@ -2483,11 +2434,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Providing a Service - ### 服务的提供 - - #### Style 07-03 - #### 风格07-03 + ### Providing a Service + ### 提供一个服务 + #### Style 07-03 + #### 风格07-03 .s-rule.do :marked @@ -2532,11 +2482,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Use the @Injectable() Class Decorator - ### 使用@Injectable()类装饰器 - - #### Style 07-04 - #### 风格07-04 + ### Use the @Injectable() Class Decorator + ### 使用@Injectable()类装饰器 + #### Style 07-04 + #### 风格07-04 .s-rule.do :marked @@ -2571,11 +2520,10 @@ a(href="#toc") 回到顶部 ## Data Services ## 数据服务 - ### Separate Data Calls - ### 分离数据调用 - - #### Style 08-01 - #### 风格08-01 + ### Separate Data Calls + ### 分离数据调用 + #### Style 08-01 + #### 风格08-01 .s-rule.do :marked @@ -2625,11 +2573,10 @@ a(href="#toc") Back to top .l-main-section :marked - ### Implement Lifecycle Hooks Interfaces - ### 实现生命周期钩子的接口 - - #### Style 09-01 - #### 风格09-01 + ### Implement Lifecycle Hooks Interfaces + ### 实现生命周期钩子接口 + #### Style 09-01 + #### 风格09-01 .s-rule.do :marked @@ -2667,11 +2614,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Component Router - ### 组件路由器 - - #### Style 10-01 - #### 风格10-01 + ### Component Router + ### 组件路由器 + #### Style 10-01 + #### 风格10-01 .s-rule.do :marked @@ -2731,11 +2677,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### Codelyzer - ### Codelyzer - - #### Style A-01 - #### 风格A-01 + ### Codelyzer + ### Codelyzer + #### Style A-01 + #### 风格A-01 .s-rule.do :marked @@ -2755,11 +2700,10 @@ a(href="#toc") 回到顶部 .l-main-section :marked - ### File Templates and Snippets - ### 文件模板和代码片段 - - #### Style A-02 - #### 风格A-02 + ### File Templates and Snippets + ### 文档模板和代码片段 + #### Style A-02 + #### 风格A-02 .s-rule.do :marked diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 8f2596a993..d656503f77 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -117,7 +117,7 @@ code-example(language="bash"). 现在，有了一个`Hero`类，我们就要把组件`hero`属性的类型换成`Hero`了。 然后以`1`为id、以“Windstorm”为名字，初始化它。 -+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (hero属性)')(format=".") ++makeExample('toh-1/ts/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".") :marked Because we changed the hero from a string to an object, diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index dcd04c06d9..47beb4437b 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -71,7 +71,7 @@ code-example(language="bash"). 我们先在`app.component.ts`的底部创建一个由十位英雄组成的数组。 -+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (英雄数组)') ++makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)') :marked The `HEROES` array is of type `Hero`, the class defined in part one, @@ -84,11 +84,11 @@ code-example(language="bash"). ### Exposing heroes ### 导出英雄们 - Let’s create a property in `AppComponent` that exposes the heroes for binding. + Let’s create a public property in `AppComponent` that exposes the heroes for binding. - 我们在`AppComponent`上创建一个属性，用来暴露这些英雄，以供绑定。 + 我们在`AppComponent`上创建一个公开属性，用来暴露这些英雄，以供绑定。 -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (英雄数组属性)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)') :marked We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array. @@ -113,7 +113,7 @@ code-example(language="bash"). 我们的组件有了`heroes`属性，我们再到模板中创建一个无序列表来显示他们。 我们将在标题和英雄详情之间，插入下面这段HTML代码。 -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (英雄模板)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)') :marked Now we have a template that we can fill with our heroes. @@ -160,7 +160,7 @@ code-example(language="bash"). 引号中赋值给`ngFor`的那段儿文本表示“*从`heroes`数组中取出每个英雄，存入一个局部的`hero`变量，并让它在相应的模板实例中可用*”。 - The `let` keyword before "hero" identifies the `hero` as a template input variable. + The `let` keyword before "hero" identifies `hero` as a template input variable. We can reference this variable within the template to access a hero’s properties. `hero`前的`let`关键字表示`hero`是一个模板输入变量。 @@ -199,13 +199,16 @@ code-example(language="bash"). 要想给我们的组件添加一些样式，请把`@Component`装饰器的`styles`属性设置为下列CSS类： -+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (添加样式)') ++makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".") :marked Notice that we again use the back-tick notation for multi-line strings. 注意，我们又使用了反引号语法来书写多行字符串。 + That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. + We'll do this in a later chapter. For now let's keep rolling. + When we assign styles to a component they are scoped to that specific component. Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML. @@ -216,14 +219,7 @@ code-example(language="bash"). 用于显示英雄们的这个模板看起来像这样： -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (带样式的英雄们)') - -:marked - That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. - We'll do this in a later chapter. For now let's keep rolling. - - 样式有很多种写法！我们可以像这里一样内联在代码中，也可以把它们移出去，放到各自的文件中，以便给组件编码时更容易。 - 等到后面的章节中我们肯定会这么干，但现在，还是保持现在的节奏吧。 ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)') .l-main-section :marked @@ -251,7 +247,7 @@ code-example(language="bash"). 我们往`
  • `元素上插入一句Angular事件绑定代码，绑定到它的click事件。 - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (捕获click事件)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)') :marked Focus on the event binding @@ -305,7 +301,7 @@ code-example(language="bash"). 在`AppComponent`上，我们不再需要一个固定的`hero`属性。 那就直接把它改为`selectedHero`属性。 - +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)') + +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)') :marked We’ve decided that none of the heroes should be selected before the user picks a hero so @@ -316,7 +312,8 @@ code-example(language="bash"). Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked. 现在，**添加一个`onSelect`方法**，以便在用户点击一个英雄的时候，把它赋给`selectedHero`属性。 - +makeExample('toh-2/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)') + + +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)') :marked We will be showing the selected hero's details in our template. @@ -326,7 +323,7 @@ code-example(language="bash"). 我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用的是以前的`hero`属性。 我们这就修改模板，让它绑定到新的`selectedHero`属性上去。 - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (绑定到selectedHero的名字)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)') :marked ### Hide the empty detail with ngIf ### 利用ngIf隐藏空的详情 @@ -428,19 +425,20 @@ code-example(language="bash"). 关键是CSS类的名字：`selected`。当两位英雄一致时，它为`true`，否则为`false`。 也就是说：“*当两位英雄匹配时，应用上`selected`类，否则不应用*”。 - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (设置CSS类)')(format=".") + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".") :marked Notice in the template that the `class.selected` is surrounded in square brackets (`[]`). - This is the syntax for a Property Binding, a binding in which data flows one way + This is the syntax for a **property binding**, a binding in which data flows one way from the data source (the expression `hero === selectedHero`) to a property of `class`. 注意，模板中的`class.selected`是括在一对方括号中的。 这就是“属性绑定”的语法，一种从数据源(即`hero === selectedHero`表达式)到`class`属性的单向数据流。 - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".") + + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".") .l-sub-section :marked - Learn more about [Property Binding](../guide/template-syntax.html#property-binding) + Learn more about [property bindings](../guide/template-syntax.html#property-binding) in the Template Syntax chapter. 学习关于[属性绑定](../guide/template-syntax.html#property-binding) @@ -464,7 +462,7 @@ code-example(language="bash"). 完整的`app.component.ts`文件如下： - +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts') + +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts') .l-main-section :marked diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade index 0f57038c27..0cba44a573 100644 --- a/public/docs/ts/latest/tutorial/toh-pt3.jade +++ b/public/docs/ts/latest/tutorial/toh-pt3.jade @@ -41,7 +41,7 @@ p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-3')]。 我们要启动TypeScript编译器，它会监视文件变更，并启动开发服务器。只要敲： -code-example(format="." language="bash"). +code-example(language="bash"). npm start :marked @@ -82,7 +82,7 @@ code-example(format="." language="bash"). 在`app`目录下添加一个名叫`hero-detail.component.ts`的文件，并且创建`HeroDetailComponent`。代码如下： -+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (初始版本)')(format=".") ++makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".") .l-sub-section :marked ### Naming conventions @@ -100,10 +100,11 @@ code-example(format="." language="bash"). 我们的所有组件名都以`Component`结尾。所有组件的文件名都以`.component`结尾。 - We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about + We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)** + (AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about case sensitivity on the server or in source control. - 这里我们使用小写中线命名法(也叫烤串命名法)拼写文件名，所以不用担心它在服务器或者版本控制系统中出现大小写问题。 + 这里我们使用小写**[中线命名法](../guide/glossary.html#!#dash-case)**(也叫**[烤串命名法](../guide/glossary.html#!#kebab-case)**)拼写文件名，所以不用担心它在服务器或者版本控制系统中出现大小写问题。