diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000..d1c2c2b349 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,30 @@ +module.exports = { + "globals": { + "describe": true, + "beforeEach": true, + "it": true, + "expect": true + }, + "env": { + "node": true + }, + "extends": "eslint:recommended", + "rules": { + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" + ] + } +}; \ No newline at end of file diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000000..2ef123c5bd --- /dev/null +++ b/.firebaserc @@ -0,0 +1,6 @@ +{ + "projects": { + "live": "angular-io", + "ngdocsdev": "ngdocsdev" + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index b6d52bd9b9..679af37907 100644 --- a/.gitignore +++ b/.gitignore @@ -21,10 +21,12 @@ _.* **/resources/zips public/docs/xref-*.* _zip-output -www +www* npm-debug*.log* *.plnkr.html plnkr.html +*.eplnkr.html +eplnkr.html *plnkr.no-link.html public/docs/*/latest/guide/cheatsheet.json protractor-results.txt diff --git a/.nvmrc b/.nvmrc index 7ed6ff82de..1e8b314962 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -5 +6 diff --git a/.travis.yml b/.travis.yml index 755b29e6a7..c8c12208bc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,7 +2,7 @@ dist: trusty sudo: required language: node_js node_js: - - "5" + - "6" os: - linux env: @@ -10,20 +10,20 @@ env: - DBUS_SESSION_BUS_ADDRESS=/dev/null - DISPLAY=:99.0 - CHROME_BIN=chromium-browser - - LATEST_RELEASE=2.0.0-rc.4 + # using SHA instead of version to fix build-compile issue + - LATEST_RELEASE=cfc12c653970c9ad6d807a6a8ebff58edbc568a0 - TASK_FLAGS="--dgeni-log=warn" - # - TASK_FLAGS="" matrix: - TASK=lint - TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh - - TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" - - TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" + - TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" + - TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" matrix: fast_finish: true allow_failures: - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh - - env: TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" + - env: TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v" before_install: - source ./scripts/env-set.sh - ./scripts/before-install.sh @@ -34,3 +34,4 @@ before_script: - sh -e /etc/init.d/xvfb start script: - $WAIT gulp $TASK $TASK_FLAGS + - if [[ -n "$POST_SCRIPT" ]]; then ./scripts/$POST_SCRIPT; fi diff --git a/README.md b/README.md index 0731e20550..c291cccc6e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Angular.io [![Build Status][travis-badge]][travis-badge-url] -Angular.io is site for Angular 2 **documentation** . +Angular.io is site for Angular **documentation** . This site also includes links to other helpful angular resources including Angular 2, Angular 1, Angular Material, and AngularFire. @@ -21,16 +21,18 @@ Filing issues is helpful but **pull requests** that improve the docs are even be Learn how to [contribute to Angular.io](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md). +> **IMPORTANT**: Do _NOT_ make changes to cached files under `public/docs/ts/_cache`. Cached files are updated through a separate workflow. + ## Development Setup This site relies heavily on node and npm. 1. Make sure you are using at least node v.5+ and latest npm; if not install [nvm](https://github.com/creationix/nvm) to get node going on your machine. -1. install these npm packages *globally*: `npm install -g harp gulp` +1. Install these npm packages *globally*: `npm install -g harp gulp` -1. clone this repo and the [angular source code repo](https://github.com/angular/angular) to the same parent directory. -The two cloned repo directories must be sibling. +1. Clone this repo, the [angular/angular source code repo](https://github.com/angular/angular), and the [dart-lang/angular2 source code repo](https://github.com/dart-lang/angular2) to the same parent directory. +The three cloned repo directories must be siblings, with the latter two repo directories named **angular** and **angular-dart**, respectively. 1. cd into root directory `angular.io/` @@ -71,11 +73,11 @@ If you are only going to work on a specific part of the docs, such as the dev gu ## Code Sample Development All documentation is supported by sample code and plunkers. -Such code resides in the `public/docs/_examples` directory, under chapter-specific directories, further divided by language track. +Such code resides in the `public/docs/_examples` directory, under page-specific directories, further divided by language track. For example, the TypeScript QuickStart sample is in `public/docs/_examples/quickstart/ts`. -All samples are in a consistent directory structure using the same styles and the same npm packages, including the latest release of Angular 2. +All samples are in a consistent directory structure using the same styles and the same npm packages, including the latest release of Angular. This consistency is possible in part thanks to gulp-driven tooling. To run the samples locally and confirm that they work properly, take the following extra steps to prepare the environment: diff --git a/gulpfile.js b/gulpfile.js index c6e15ae13f..80b6839cde 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -45,7 +45,8 @@ var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less'); var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder')); var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper')); -var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder')); +var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPlunker')); +var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker')); var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils')); const isSilent = !!argv.silent; @@ -72,9 +73,10 @@ var _apiShredOptions = { logLevel: _dgeniLogLevel }; +const relDartDocApiDir = path.join('doc', 'api'); var _apiShredOptionsForDart = { lang: 'dart', - examplesDir: path.resolve(ngPathFor('dart'), 'examples'), + examplesDir: path.resolve(ngPathFor('dart'), 'example'), fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'), zipDir: path.join(RESOURCES_PATH, 'zips/api'), logLevel: _dgeniLogLevel @@ -89,15 +91,12 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){ var _exampleBoilerplateFiles = [ '.editorconfig', 'a2docs.css', - 'karma.conf.js', - 'karma-test-shim.js', 'package.json', 'styles.css', 'systemjs.config.js', 'tsconfig.json', 'tslint.json', - 'typings.json', - 'wallaby.js' + 'typings.json' ]; var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css']; @@ -118,22 +117,35 @@ var _styleLessName = 'a2docs.less'; // or a regex pattern to match any one of 'ts', 'js', or 'dart'. // Default: 'ts|js' except for the "full site build" tasks (see below), // for which it is 'all'. -// -var lang, langs, buildDartApiDocs = false; + +// langs and skipLangs partition ['ts', 'js', 'dart']. +var lang, langs, skipLangs, buildDartApiDocs = false; function configLangs(langOption) { - const fullSiteBuildTasks = ['build-compile', 'check-serve', 'check-deploy']; + const fullSiteBuildTasks = ['build-compile', 'check-deploy', 'harp-compile']; const buildAllDocs = argv['_'] && fullSiteBuildTasks.some((task) => argv['_'].indexOf(task) >= 0); const langDefault = buildAllDocs ? 'all' : 'ts|js'; - lang = (langOption || langDefault).toLowerCase(); - if (lang === 'all') lang = 'ts|js|dart'; - langs = lang.match(/\w+/g); // the languages in `lang` as an array - gutil.log('Building docs for: ' + lang); + if (langOption === '') { + lang = ''; + langs = []; + } else { + lang = (langOption || langDefault).toLowerCase(); + if (lang === 'all') lang = 'ts|js|dart'; + langs = lang.match(/\w+/g); // the languages in `lang` as an array + } + gutil.log(`Building docs for: [${langs}]`); if (langs.indexOf('dart') >= 0) { buildDartApiDocs = true; // For Dart, be proactive about checking for the repo checkAngularProjectPath(ngPathFor('dart')); + } else { + argv.pub = false; } + skipLangs = []; + ['ts', 'js', 'dart'].forEach(lang => { + if (langs.indexOf(lang) < 0) skipLangs.push(lang); + }); + gutil.log(`Skipped languages: [${skipLangs}]`); } configLangs(argv.lang); @@ -344,10 +356,15 @@ function runE2eDartTests(appDir, outputFile) { gutil.log('http-server failed to launch over ' + deployDir); return false; } - var pubUpgradeSpawnInfo = spawnExt('pub', ['upgrade'], { cwd: appDir }); - var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) { - return spawnExt('pub', ['build'], { cwd: appDir }).promise; - }); + if (argv.pub === false) { + var prepPromise = Promise.resolve(true); + gutil.log('Skipping pub upgrade and pub build (--no-pub flag present)'); + } else { + var pubUpgradeSpawnInfo = spawnExt('pub', ['upgrade'], { cwd: appDir }); + var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) { + return spawnExt('pub', ['build'], { cwd: appDir }).promise; + }); + } return runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile); } @@ -441,10 +458,10 @@ gulp.task('add-example-boilerplate', function(done) { // copies boilerplate files to locations // where an example app is found gulp.task('_copy-example-boilerplate', function (done) { - if (!argv.fast) buildStyles(copyExampleBoilerplate, 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){ @@ -504,23 +521,42 @@ gulp.task('remove-example-boilerplate', function() { // either release or current build packages // Examples: // gulp install-example-angular --build // use current build packages +// gulp install-example-angular --build=2.0.0-b43f954 // use tagged packages // gulp install-example-angular // restore release packages +// +// Find the tags here: https://github.com/angular/core-builds/releases gulp.task('install-example-angular', installExampleAngular); function installExampleAngular() { var sources; var template; var libs = [ - 'core', 'common', 'compiler', + 'core', 'common', 'compiler', 'compiler-cli', 'platform-browser', 'platform-browser-dynamic', 'forms', 'http', 'router', 'upgrade']; + var build = argv.build; + if (build) { + if (typeof build === 'string') { + build = (build[0]==='#' ? '' : '#') + build; + } else { + build = ''; + } + } else{ + build = 'npm'; + } // Like: "angular/core-builds" or "@angular/core" - sources = libs.map( lib => argv.build ? `angular/${lib}-builds` : `@angular/${lib}`); + sources = libs.map( lib => { + return build === 'npm' + ? `@angular/${lib}` + : `git+https://github.com/angular/${lib}-builds${build}`; + }); + + if (argv.build) { sources.push('@angular/tsc-wrapped');} // tsc-wrapped needed for builds sources.push('@angular/router-deprecated'); - gutil.log(`Installing Angular npm packages from ${argv.build ? 'BUILD' : 'RELEASE'}`); + gutil.log(`Installing Angular packages from ${build === 'npm' ? 'NPM' : 'BUILD ' + build}`); var spawnInfo = spawnExt('rm', ['-rf', 'node_modules/@angular'], { cwd: EXAMPLES_PATH}); return spawnInfo.promise @@ -594,8 +630,10 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function() return buildApiDocsForDart(); }); +// Using the --build flag will use systemjs.config.plunker.build.js (for preview builds) gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() { - return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build }); + regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build }); + return embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build, targetSelf: argv.targetSelf }); }); gulp.task('build-dart-cheatsheet', [], function() { @@ -604,20 +642,20 @@ gulp.task('build-dart-cheatsheet', [], function() { gulp.task('dartdoc', ['pub upgrade'], function() { const ngRepoPath = ngPathFor('dart'); - if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'doc'))) { - gutil.log('Skipping dartdoc: --fast flag enabled and "doc" dir exists'); + if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, relDartDocApiDir))) { + gutil.log(`Skipping dartdoc: --fast flag enabled and api dir exists (${relDartDocApiDir})`); return true; } checkAngularProjectPath(ngRepoPath); const topLevelLibFilePath = path.resolve(ngRepoPath, 'lib', 'angular2.dart'); const tmpPath = topLevelLibFilePath + '.disabled'; - if (!fs.existsSync(topLevelLibFilePath)) throw new Error(`Missing file: ${topLevelLibFilePath}`); - fs.renameSync(topLevelLibFilePath, tmpPath); + renameIfExistsSync(topLevelLibFilePath, tmpPath); gutil.log(`Hiding top-level angular2 library: ${topLevelLibFilePath}`); - const dartdoc = spawnExt('dartdoc', ['--output', 'doc/api', '--add-crossdart'], { cwd: ngRepoPath}); + // Remove dartdoc '--add-crossdart' flag while we are fixing links to API pages. + const dartdoc = spawnExt('dartdoc', ['--output', relDartDocApiDir], { cwd: ngRepoPath}); return dartdoc.promise.finally(() => { gutil.log(`Restoring top-level angular2 library: ${topLevelLibFilePath}`); - fs.renameSync(tmpPath, topLevelLibFilePath); + renameIfExistsSync(tmpPath, topLevelLibFilePath); }) }); @@ -678,12 +716,12 @@ gulp.task('git-changed-examples', ['_shred-devguide-examples'], function(){ }); }); -gulp.task('harp-compile', [], function() { +gulp.task('harp-compile', () => { return harpCompile() }); -gulp.task('serve', [], function() { - // Harp will serve files from workspace. +gulp.task('harp-serve', () => { + // Harp will watch and serve workspace files. const cmd = 'npm run harp -- server .'; gutil.log('Launching harp server (over project files)'); gutil.log(` > ${cmd}`); @@ -691,7 +729,7 @@ gulp.task('serve', [], function() { return execPromise(cmd); }); -gulp.task('serve-www', [], function() { +gulp.task('serve-www', () => { // Serve generated site. return execPromise('npm run live-server ./www'); }); @@ -700,13 +738,6 @@ gulp.task('build-compile', ['build-docs'], function() { return harpCompile(); }); -gulp.task('check-serve', ['build-docs'], function() { - return harpCompile().then(function() { - gutil.log('Launching live-server over ./www'); - return execPromise('npm run live-server ./www'); - }); -}); - gulp.task('check-deploy', ['build-docs'], function() { return harpCompile().then(function() { gutil.log('compile ok'); @@ -802,7 +833,7 @@ gulp.task('_shred-clean-devguide', function(cb) { gulp.task('_shred-api-examples', ['_shred-clean-api'], function() { const promises = []; gutil.log('Shredding API examples for languages: ' + langs.join(', ')); - langs.forEach((lang) => { + langs.forEach(lang => { if (lang === 'js') return; // JS is handled via TS. checkAngularProjectPath(ngPathFor(lang)); const options = lang == 'dart' ? _apiShredOptionsForDart : _apiShredOptions; @@ -852,26 +883,40 @@ gulp.task('lint', function() { function harpCompile() { // Supposedly running in production makes harp faster // and less likely to drown in node_modules. - env({ - vars: { NODE_ENV: "production" } - }); + env({ vars: { NODE_ENV: "production" } }); gutil.log("NODE_ENV: " + process.env.NODE_ENV); + if(skipLangs && fs.existsSync('www') && backupApiHtmlFilesExist('www')) { + gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`); + gutil.log(`API docs will be copied from existing www folder.`) + del.sync('www-backup'); // remove existing backup if it exists + renameIfExistsSync('www', 'www-backup'); + } else { + gutil.log(`Harp full site compile, including API docs for all languages.`); + if (skipLangs) + gutil.log(`Ignoring API docs skip set (${skipLangs}) because full ` + + `site has not been built yet or some API HTML files are missing.`); + } + var deferred = Q.defer(); gutil.log('running harp compile...'); showHideExampleNodeModules('hide'); + showHideApiDir('hide'); var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', './www' ]); spawnInfo.promise.then(function(x) { gutil.log("NODE_ENV: " + process.env.NODE_ENV); showHideExampleNodeModules('show'); + showHideApiDir('show'); if (x !== 0) { deferred.reject(x) } else { + restoreApiHtml(); deferred.resolve(x); } }).catch(function(e) { gutil.log("NODE_ENV: " + process.env.NODE_ENV); showHideExampleNodeModules('show'); + showHideApiDir('show'); deferred.reject(e); }); return deferred.promise; @@ -970,6 +1015,54 @@ function showHideExampleNodeModules(showOrHide) { } } +// Show/hide the API docs harp source folder for every lang in skipLangs. +function showHideApiDir(showOrHide) { + skipLangs.forEach(lang => { + _showHideApiDir(lang, showOrHide); + }); +} + +// Rename the API docs harp source folder for lang to/from 'api' to '_api-tmp-foo'. +function _showHideApiDir(lang, showOrHide) { + const vers = 'latest'; + const basePath = path.join(DOCS_PATH, lang, vers); + const apiDirPath = path.join(basePath, 'api'); + const disabledApiDirPath = path.join(basePath, '_api-tmp-hide-from-jade'); + const args = showOrHide == 'hide' + ? [apiDirPath, disabledApiDirPath] + : [disabledApiDirPath, apiDirPath]; + renameIfExistsSync(...args); +} + +// For each lang in skipLangs, copy the API dir from www-backup to www. +function restoreApiHtml() { + const vers = 'latest'; + skipLangs.forEach(lang => { + const relApiDir = path.join('docs', lang, vers, 'api'); + const wwwApiSubdir = path.join('www', relApiDir); + const backupApiSubdir = path.join('www-backup', relApiDir); + if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) { + gutil.log(`cp ${backupApiSubdir} ${wwwApiSubdir}`) + fs.copySync(backupApiSubdir, wwwApiSubdir); + } + }); +} + +// For each lang in skipLangs, ensure API dir exists in www-backup +function backupApiHtmlFilesExist(folderName) { + const vers = 'latest'; + var result = 1; + skipLangs.forEach(lang => { + const relApiDir = path.join('docs', lang, vers, 'api'); + const backupApiSubdir = path.join(folderName, relApiDir); + if (!fs.existsSync(backupApiSubdir)) { + gutil.log(`WARNING: API docs HTML folder doesn't exist: ${backupApiSubdir}`); + result = 0; + } + }); + return result; +} + // Copies fileNames into destPaths, setting the mode of the // files at the destination as optional_destFileMode if given. // returns a promise @@ -1069,11 +1162,16 @@ function watchAndSync(options, cb) { var browserSync = require('browser-sync').create(); browserSync.init({proxy: 'localhost:9000'}); + // When using the --focus=name flag, only **/name/**/*.* example files and + // **/name.jade files are watched. This is useful for performance reasons. + // Example: gulp serve-and-sync --focus=architecture + var focus = argv.focus; + if (options.devGuide) { - devGuideExamplesWatch(_devguideShredOptions, browserSync.reload); + devGuideExamplesWatch(_devguideShredOptions, browserSync.reload, focus); } if (options.devGuideJade) { - devGuideSharedJadeWatch( { jadeDir: DOCS_PATH}, browserSync.reload); + devGuideSharedJadeWatch( { jadeDir: DOCS_PATH}, browserSync.reload, focus); } if (options.apiDocs) { apiSourceWatch(browserSync.reload); @@ -1088,11 +1186,10 @@ function watchAndSync(options, cb) { // returns a promise; function askDeploy() { - prompt.start(); var schema = { name: 'shouldDeploy', - description: 'Deploy to Firebase? (y/n): ', + description: 'Deploy to Firebase? (y/n)', type: 'string', pattern: /Y|N|y|n/, message: "Respond with either a 'y' or 'n'", @@ -1114,7 +1211,7 @@ function filterOutExcludedPatterns(fileNames, excludeMatchers) { } function apiSourceWatch(postBuildAction) { - var srcPattern = [path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/src/**/*.*')]; + var srcPattern = [path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/**/*.*')]; gulp.watch(srcPattern, {readDelay: 500}, function (event, done) { gutil.log('API source changed'); gutil.log('Event type: ' + event.event); // added, changed, or deleted @@ -1141,8 +1238,9 @@ function apiExamplesWatch(postShredAction) { }); } -function devGuideExamplesWatch(shredOptions, postShredAction) { - var includePattern = path.join(shredOptions.examplesDir, '**/*.*'); +function devGuideExamplesWatch(shredOptions, postShredAction, focus) { + var watchPattern = focus ? '**/' + focus + '/**/*.*' : '**/*.*'; + var includePattern = path.join(shredOptions.examplesDir, watchPattern); // removed this version because gulp.watch has the same glob issue that dgeni has. // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*'); // gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) { @@ -1158,8 +1256,9 @@ function devGuideExamplesWatch(shredOptions, postShredAction) { }); } -function devGuideSharedJadeWatch(shredOptions, postShredAction) { - var includePattern = path.join(DOCS_PATH, '**/*.jade'); +function devGuideSharedJadeWatch(shredOptions, postShredAction, focus) { + var watchPattern = focus ? '**/' + focus + '.jade' : '**/*.jade'; + var includePattern = path.join(DOCS_PATH, watchPattern); // removed this version because gulp.watch has the same glob issue that dgeni has. // var excludePattern = '!' + path.join(shredOptions.jadeDir, '**/node_modules/**/*.*'); // gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) { @@ -1235,15 +1334,14 @@ function buildDartCheatsheet() { function buildApiDocsForDart() { - const apiDir = 'api'; const vers = 'latest'; const dab = require('./tools/dart-api-builder/dab')(ANGULAR_IO_PROJECT_PATH); const log = dab.log; log.level = _dgeniLogLevel; const dabInfo = dab.dartPkgConfigInfo; - dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, apiDir); - dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), 'doc', apiDir); + dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, 'api'); + dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), relDartDocApiDir); // Exclude API entries for developer/internal libraries. Also exclude entries for // the top-level catch all "angular2" library (otherwise every entry appears twice). dabInfo.excludeLibRegExp = new RegExp(/^(?!angular2)|\.testing|_|codegen|^angular2$/); @@ -1455,3 +1553,12 @@ function checkAngularProjectPath(_ngPath) { if (fs.existsSync(ngPath)) return; throw new Error('API related tasks require the angular2 repo to be at ' + ngPath); } + +function renameIfExistsSync(oldPath, newPath) { + if (fs.existsSync(oldPath)) { + gutil.log(`Rename: mv ${oldPath} ${newPath}`); + fs.renameSync(oldPath, newPath); + } else { + gutil.log(`renameIfExistsSync cannot rename, path not found: ${oldPath}`); + } +} diff --git a/harp.json b/harp.json index 629364440f..4a8328d35e 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" }, @@ -391,6 +397,7 @@ "bio": "Ward is an all-around developer with JavaScript, node, and .net chops. He's a frequent conference speaker and podcaster, trainer, Google Developer Expert for Angular, Microsoft MVP, and PluralSight author. He is also president of IdeaBlade, an enterprise software consulting firm and the makers of breeze.js. He would like to get more sleep and spend more time in the mountains.", "type": "Community" }, + "johnpapa": { "name": "John Papa", "picture": "/resources/images/bios/john-papa.jpg", @@ -399,6 +406,7 @@ "bio": "John is a Google Developer Expert, Microsoft Regional Director and MVP, frequent author of courses for Pluralsight, a former technology Evangelist for Microsoft front end teams, and author of the popular Angular Style Guide. He can often be found speaking around the world at keynotes and sessions for many conferences. You can always find John at johnpapa.net or on twitter at @john_papa.", "type": "Community" }, + "martinstaffa": { "name": "Martin Staffa", "picture": "/resources/images/bios/martinstaffa.jpg", @@ -406,6 +414,7 @@ "bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the Angular 1 team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.", "type": "Community" }, + "topherfangio": { "name": "Topher Fangio", "picture": "/resources/images/bios/topherfangio.jpg", @@ -414,6 +423,7 @@ "bio": "Topher loves the web and how it empowers new forms of creativity, connection and business. He is currently a core contributor on the Angular Material project and sometimes blogs about random things.", "type": "Community" }, + "filipesilva": { "name": "Filipe Silva", "picture": "/resources/images/bios/filipe-silva.jpg", @@ -422,6 +432,7 @@ "bio": "Filipe is a passion-driven developer that always strives for the most elegant solution for each problem. He is currently an author for Angular.io, a core contributor for Angular-CLI and senior front end engineer at KonnectAgain. When not busy going through PRs, you can find him scouring reddit for new dinner recipes to cook or enjoying a craft beer in Dublin.", "type": "Community" }, + "teropa": { "name": "Tero Parviainen", "picture": "/resources/images/bios/teropa.jpg", @@ -430,15 +441,17 @@ "bio": "Tero is an independent software developer and writer. He's been building web applications for his whole professional career, and has almost figured out how to do vertical centering in CSS.", "type": "Community" }, - "deborah": { + + "deborah": { "name": "Deborah Kurata", "picture": "/resources/images/bios/deborah.jpg", "twitter": "deborahkurata", "website": "http://blogs.msmvps.com/deborahk/", "bio": "Deborah is an independent software developer and author. She is author of several Pluralsight courses including: 'Angular 2: Getting Started'", "type": "Community" - }, - "jesusrodriguez": { + }, + + "jesusrodriguez": { "name": "Jesús Rodríguez", "picture": "/resources/images/bios/jesus-rodriguez.jpg", "twitter": "foxandxss", @@ -446,6 +459,7 @@ "bio": "Jesus is an open source lover, a book author and editor, and AngularUI lead developer. He is currently a core contributor to the UI Bootstrap project.", "type": "Community" }, + "torgeirhelgevold": { "name": "Torgeir Helgevold", "picture": "/resources/images/bios/torgeirhelgevold.jpg", @@ -454,6 +468,7 @@ "bio": "Torgeir (Tor) is a front-end architect with a passion for JavaScript development. He is also an author for angular.io and an active tech blogger.", "type": "Community" }, + "fatimaremtullah": { "name": "Fatima Remtullah", "picture": "/resources/images/bios/fatima.jpg", @@ -462,6 +477,7 @@ "bio": "Fatima is a Product Designer and Front-End Developer. When she is not nerding out she is probably eating an abundance of cookies.", "type": "Community" }, + "eric": { "name": "Eric Jimenez", "picture": "/resources/images/bios/eric.jpg", @@ -470,6 +486,7 @@ "bio": "Eric is a gamer, writer, and programmer.", "type": "Community" }, + "mikeryan": { "name": "Mike Ryan", "picture": "/resources/images/bios/mikeryan.jpg", @@ -477,7 +494,8 @@ "website": "https://medium.com/@MikeRyan52", "bio": "Mike Ryan is a Software Engineer at Synapse Wireless, working on solving challenging problems in the internet-of-things space. He is an advocate of reactive programming and a core contributor to the ngrx project.", "type": "Community" - }, + }, + "rex": { "name": "Rex Ye", "picture": "/resources/images/bios/rex.jpg", @@ -485,6 +503,7 @@ "bio": "Rex is a full-stack developer. He maintains the Angular.cn website with his old pal Ralph Wang and he plays a key role in bridging between the Chinese Angular community and the world-wide community. He loves playing with flashy new technologies and enjoys the challenge of mastering new skills. His biggest challenge to date is figuring out how to sooth a crying 4-month-old baby.", "type": "Community" }, + "ralph": { "name": "Ralph Wang", "picture": "/resources/images/bios/ralph.jpg", @@ -492,6 +511,7 @@ "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of “Simplicity, Professionalism and Sharing”. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is looking forward to the birth of his baby.", "type": "Community" }, + "brandonroberts": { "name": "Brandon Roberts", "picture": "/resources/images/bios/brandonroberts.jpg", @@ -500,12 +520,28 @@ "bio": "Brandon is a front-end developer for a game studio developing web applications for STEM-based learning games. He is also a natural born troubleshooter who helps solve Angular issues on Github and Gitter support channels, particularly dealing with routing. He is also a member of the Angular docs team.", "type": "Community" }, + "crisbeto": { "name": "Kristiyan Kostadinov", "picture": "/resources/images/bios/crisbeto.jpg", "website": "http://crisbeto.com/", "bio": "Kristiyan is a front-end developer, passionate open-source contributor and a core team member on Angular Material.", "type": "Community" + }, + + "gkalpak": { + "name": "Georgios Kalpakas", + "picture": "/resources/images/bios/gkalpak.jpg", + "website": "https://github.com/gkalpak", + "bio": "George is a Software Engineer with a passion for chess, robotics and automating stuff. He has a strong need to know how things work (so if you already know, he'd love to have a talk with you). He has been a member of the AngularJS team since 2014. When not doing geeky stuff, he is probably trying to convince his wife and kids to apply programming principles in real life. (Or is it the other way around?)", + "type": "Community" + }, + "kapunahelewong": { + "name": "Kapunahele Wong", + "picture": "/resources/images/bios/kapunahelewong.jpg", + "website": " https://github.com/kapunahelewong", + "bio": "Kapunahele is a front-end developer at Capital One. She loves just about anything to do with JavaScript, Angular and electronics. She enjoys mapping Hawaiian star names and constellations to Western ones and loves dancing native Hawaiian hula.", + "type": "Community" } } } diff --git a/package.json b/package.json index 2e848d239c..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", @@ -36,20 +36,19 @@ "cross-spawn": "^4.0.0", "del": "^2.2.0", "dgeni": "^0.4.0", - "dgeni-packages": "^0.13.1", + "dgeni-packages": "^0.16.0", "diff": "^2.1.3", "fs-extra": "^0.30.0", "globby": "^4.0.0", - "grunt-sass": "^1.2.0", "gulp": "^3.5.6", "gulp-env": "0.4.0", - "gulp-sass": "^2.3.2", "gulp-less": "^3.1.0", + "gulp-sass": "^2.3.2", "gulp-task-listing": "^1.0.1", "gulp-tslint": "^5.0.0", "gulp-util": "^3.0.6", "gulp-watch": "^4.3.4", - "harp": "^0.20.3", + "harp": "0.21.0-pre.1", "html2jade": "^0.8.4", "indent-string": "^2.1.0", "jasmine-core": "^2.3.4", @@ -71,7 +70,7 @@ "protractor": "^3.0.0", "q": "^1.4.1", "tree-kill": "^1.0.0", - "tslint": "^3.2.2", + "tslint": "^3.15.1", "yargs": "^4.7.1" }, "dependencies": { diff --git a/public/_data.json b/public/_data.json index 1232f0a1de..29ba83dab4 100644 --- a/public/_data.json +++ b/public/_data.json @@ -2,7 +2,7 @@ "index": { "hero": "home", "title": "One framework.", - "subtitle": "Mobile and desktop." + "subtitle": "Mobile & desktop." }, "features": { diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index a186b59ca8..1cb22a54d2 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -8,7 +8,7 @@ else - var styleguide = "/docs/ts/latest/styleguide.html" .main-footer - nav.background-blue-grey-900.grid-fluid + nav.background-midnight.grid-fluid .c3.main-footer-branding .logo-inverse-large @@ -17,7 +17,7 @@ else h3.text-headline RESOURCES 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 Books & Training @@ -51,7 +51,7 @@ else ul.text-body li 中文版 - footer(class="background-steel") - small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow") + footer(class="background-midnight") + small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. + a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger") span.icon-favorite diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade index 2e46febe96..a0c7429fa1 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="https://angular.io/resources/images/logos/standard/shield-large.png") @@ -57,4 +57,4 @@ link(rel="stylesheet" href="/resources/css/main.css") - \ No newline at end of file + diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index a1d34a334a..4aa964bfce 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -1,13 +1,18 @@ -header(class="background-sky") - .hero.background-superhero-paper.is-large - h1.text-headline.hero-logo #{title}
#{subtitle} +header(class="background-sky l-relative") - .hero-cta - a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started + .hero.background-superhero-paper.is-large + img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') + h1.text-headline #{title}
#{subtitle} + a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started - .banner.banner-floaty - .banner-ng-annoucement - div(class="banner-text" align="center") - p Join us for AngularConnect in London, UK this September! - div(class="banner-button") - a(href="http://angularconnect.com/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now \ No newline at end of file + + announcement-bar + .announcement-bar-slide.clearfix + img(src="/resources/images/logos/angular2/angular-logo-banner.png") + p Angular 2.0 Final Release Now Live! + a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More + + .announcement-bar-slide.clearfix + img(src="/resources/images/logos/ng-europe/ng-europe-logo.png") + p Join us for ng-europe in Paris, France this October! + a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now \ No newline at end of file diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade index 3a27ed9d2b..efeb8b0480 100644 --- a/public/_includes/_hero.jade +++ b/public/_includes/_hero.jade @@ -13,27 +13,27 @@ if current.path[4] && current.path[3] == 'api' - var textFormat = 'is-standard-case' -header(class="hero background-sky", style=fixHeroCss ? "height:auto" : "") - div(class="inner-header") - h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} - if useBadges - span(class="badges") - if docType - span(class="status-badge"). - #{renamer(capitalize(docType))} - if stability - span(layout="row" class="status-badge") - // badge circle is filled based on stability by matching a css selector in _hero.scss - span(class="status-circle status-#{stability}") - span Stability: #{capitalize(stability)} - if security - span(class="status-badge security-risk-badge"). - Security Risk +header.hero.background-sky + h1(class="hero-title #{textFormat}") #{headerTitle} + + if useBadges + if stability + span(class="badge is-#{stability}"). + #{capitalize(stability)} + if security + span(class="badge is-deprecated"). + Security Risk + + //CLEAR FLOAT ELEMENTS + .clear if subtitle - h2.hero-subtitle.text-subhead #{subtitle} + h2.hero-subtitle #{subtitle} + + else if docType + h2.hero-subtitle #{renamer(capitalize(docType))} + + +if current.path[3] == 'api' && current.path[1] == 'dart' + block breadcrumbs - else if current.path[3] == 'api' && current.path[1] == 'dart' - block breadcrumbs - else if current.path[0] == "docs" - != partial("_version-dropdown") diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 272a54d702..677d081d8d 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -1,15 +1,14 @@ - var language = current.path[1] || 'ts' - if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; } -md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element) - nav - h1 Angular by Google +nav(class="main-nav l-pinned-top l-layer-5", scroll-y-offset-element) + h1 Angular by Google - button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu + button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu - ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") - li.l-left Features - li.l-left Docs - li.l-left Events - li.l-left News - li.l-right Get Started + ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") + li.l-left Features + li.l-left Docs + li.l-left Events + li.l-left News + li.l-right Get Started diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index 9b4cd8048b..f02d7cce14 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -28,6 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js") script(src="/resources/js/directives/api-list.js") script(src="/resources/js/directives/bio.js") script(src="/resources/js/directives/bold.js") +script(src="/resources/js/directives/announcement-bar.js") script(src="/resources/js/directives/code.js") script(src="/resources/js/directives/copy.js") script(src="/resources/js/directives/code-tabs.js") @@ -64,4 +65,4 @@ script(src="//www.gstatic.com/feedback/api.js" type="text/javascript") script. - (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs"); \ No newline at end of file + (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs"); diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index 152fbe4bfd..0d10a5b301 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -38,6 +38,15 @@ //- Location of sample code - var _liveLink = 'live link'; +//- NgModule related +- var _AppModuleVsAppComp = 'AppModule' +- var _appModuleTsVsAppCompTs = 'app/app.module.ts' +- var _appModuleTsVsMainTs = 'app/app.module.ts' +- var _bootstrapModule = 'bootstrapModule' +- var _moduleVsComp = 'module' +- var _moduleVsRootComp = 'module' +- var _platformBrowserDynamicVsBootStrap = 'platformBrowserDynamic' + //- Other - var _truthy = 'truthy'; - var _falsey = 'falsey'; @@ -74,14 +83,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns) - var format = attributes.format || defaultFormat; - if (attributes.format === '.') format = ''; - var avoid = !!attributes.avoid; + - var avoidClass = avoid ? 'is-anti-pattern' : ''; - if (title) - if (avoid) - .example-title.avoid AVOID: #{title} - else - .example-title #{title} - code-example(language="#{language}" format="#{format}") - != styleString(frag, stylePatterns) + div(class="code-example #{avoidClass}") + if (title) + header + h4 #{title} + code-example(language="#{language}" format="#{format}") + != styleString(frag, stylePatterns) //- Like makeExample, but: (1) doesn't show line numbers. (2) If region //- is omitted and title is 'foo (r)' then region is taken as 'r'. @@ -89,14 +98,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns) //- ending is given or is just (), then the title will be suffixed with //- either "(excerpt)", or "(#{_region})" when _region is defined. mixin makeExcerpt(_filePath, _region, _title, stylePatterns) - - var matches = _filePath.match(/(.*)\s+\(([\w ]*)\)$/); + - var matches = _filePath.match(/(.*)\s+\(([^\)]*)\)$/); - var parenText; - if (matches) { _filePath = matches[1]; parenText = matches[2]; } - var adjustments = adjustExamplePathAndTitle({filePath:_filePath, title:_title}); - var filePath = adjustments.filePath; - var title = adjustments.title; - - var region = _region || parenText; - - var excerpt = !region || parenText === '' ? 'excerpt' : parenText || region; + - var region = _region || (_region === '' ? '' : parenText); + - var excerpt = parenText || region || 'excerpt'; - if (title) title = title + ' (' + excerpt + ')'; +makeExample(filePath, region, title, stylePatterns)(format='.') @@ -133,76 +142,78 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns) - var json = unescapeHtml(frag); - var jsonExtract = extractJson(json, jsonConfig); - var avoid = !!attributes.avoid; + - var avoidClass = avoid ? 'is-anti-pattern' : ''; - if (title) - if (avoid) - .example-title.avoid #{title} - else - .example-title #{title} - code-example(language="#{language}" format="#{format}") - if (jsonExtract == 'ERROR') - err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}" - else - != styleString(jsonExtract, stylePatterns) + div(class="code-example #{avoidClass}") + if (title) + header + h4 #{title} + code-example(language="#{language}" format="#{format}") + if (jsonExtract == 'ERROR') + err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}" + else + != styleString(jsonExtract, stylePatterns) -- // Open (and close) an explanation
. See QuickStart -script. - function why(id, backTo) { - var id = "#"+id; - var el = document.querySelector(id); - el.hidden=el.hidden=!el.hidden; +if !jade2ng + //- Open (and close) an explanation
. See QuickStart + script. + function why(id, backTo) { + var id = "#"+id; + var el = document.querySelector(id); + el.hidden=el.hidden=!el.hidden; - if (el.hidden && backTo){ - // the next line is required to work around a bug in WebKit (Chrome / Safari) - location.href = "#"; - location.href = "#" + backTo; + if (el.hidden && backTo){ + // the next line is required to work around a bug in WebKit (Chrome / Safari) + location.href = "#"; + location.href = "#" + backTo; + } } - } -script. - function verbose(isVerbose) { - isVerbose = !! isVerbose; - var el = document.querySelector('button.verbose.off'); - el.style.display = isVerbose ? 'block' : 'none'; - var el = document.querySelector('button.verbose.on'); - el.style.display = isVerbose ? 'none' : 'block'; + script. + function verbose(isVerbose) { + isVerbose = !! isVerbose; + var el = document.querySelector('button.verbose.off'); + el.style.display = isVerbose ? 'block' : 'none'; + var el = document.querySelector('button.verbose.on'); + el.style.display = isVerbose ? 'none' : 'block'; - CCSStylesheetRuleStyle('main','.l-verbose-section', 'display', - isVerbose ? 'block' : 'none'); - } + CCSStylesheetRuleStyle('main','.l-verbose-section', 'display', + isVerbose ? 'block' : 'none'); + } -script. - function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){ - /* returns the value of the element style of the rule in the stylesheet - * If no value is given, reads the value - * If value is given, the value is changed and returned - * If '' (empty string) is given, erases the value. - * The browser will apply the default one - * - * string stylesheet: part of the .css name to be recognized, e.g. 'default' - * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td' - * string style: camelCase element style, e.g. 'fontSize' - * string value optional : the new value - */ - var CCSstyle = undefined, rules, sheet; - for(var m in document.styleSheets){ - sheet = document.styleSheets[m]; - if(sheet.href && sheet.href.indexOf(stylesheet) != -1){ - rules = sheet[document.all ? 'rules' : 'cssRules']; - for(var n in rules){ - console.log(rules[n].selectorText); - if(rules[n].selectorText == selectorText){ - CCSstyle = rules[n].style; - break; + script. + function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){ + /* returns the value of the element style of the rule in the stylesheet + * If no value is given, reads the value + * If value is given, the value is changed and returned + * If '' (empty string) is given, erases the value. + * The browser will apply the default one + * + * string stylesheet: part of the .css name to be recognized, e.g. 'default' + * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td' + * string style: camelCase element style, e.g. 'fontSize' + * string value optional : the new value + */ + var CCSstyle = undefined, rules, sheet; + for(var m in document.styleSheets){ + sheet = document.styleSheets[m]; + if(sheet.href && sheet.href.indexOf(stylesheet) != -1){ + rules = sheet[document.all ? 'rules' : 'cssRules']; + for(var n in rules){ + console.log(rules[n].selectorText); + if(rules[n].selectorText == selectorText){ + CCSstyle = rules[n].style; + break; + } + } + break; } } - break; - } + if(value == undefined) + return CCSstyle[style] + else + return CCSstyle[style] = value } - if(value == undefined) - return CCSstyle[style] - else - return CCSstyle[style] = value - } + //--------------------------------------------------------------------------------------------------------- //- Converts the given project-relative path (like 'app/main.ts') //- to a doc folder relative path (like 'quickstart/ts/app/main.ts') @@ -213,8 +224,8 @@ script. - // E.g. of a project relative path is 'app/main.ts' - if (ex.title === null || ex.title === undefined) { - // Title is not given so take it to be ex.filePath. -- // Is title like styles.1.css? Then drop the '.1' qualifier: -- var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/); +- // Title like styles.1.css or foo_1.dart? Then drop the '.1' or '_1' qualifier: +- var matches = ex.filePath.match(/^(.*)[\._]\d(\.\w+)$/); - ex.title = matches ? matches[1] + matches[2] : ex.filePath; - } - ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath; @@ -289,7 +300,7 @@ script. - } else { - // ``` gets translated to 
.....
and we need - // to remove this from the fragment prefix is 11 long and suffix is 13 long -- frag = frag.substring(11, frag.length-13); +- frag = jade2ng ? frag : frag.substring(11, frag.length-13); - // Uncomment next line for debugging. - // frag = "FileName: " + fullFileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs() + "\n" + frag; - return frag; diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index 6bba60975a..2b5162b391 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -5,7 +5,7 @@ - var version = '' - var page = '' - +//- Replace _ underscores with . dots if current.path[2] - var version = current.path[2].replace(/\_+/gm, ".") @@ -33,32 +33,31 @@ else if current.path[3] else - var page = current.path[3] + '.html' - +//- VERSION TREE CREATOR MIXIN mixin tree(directory, urlPrefix, name, latest) - ul - for val, semvar in directory - if semvar !== '.git' && semvar !== '_data' - - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".") - li #{name} #{libVersion} + for val, semvar in directory + if semvar !== '.git' && semvar !== '_data' + - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".") + li #{name} #{libVersion} - +//- 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,7 +68,9 @@ nav.dropdown div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu") - div(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.dart, "/docs/dart", "Angular 2 for Dart") + ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''") + 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 for Dart") diff --git a/public/contribute.jade b/public/contribute.jade index 002c8da4a1..994d46a36d 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -3,11 +3,11 @@ p We'd love for you to contribute to our source code and to make Angular projects even better. .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. - 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) Contribute to Angular .l-sub-section h3 Angular for JavaScript or Dart diff --git a/public/docs/_examples/_protractor/package.json b/public/docs/_examples/_protractor/package.json index eca5cae41f..1e12742c38 100644 --- a/public/docs/_examples/_protractor/package.json +++ b/public/docs/_examples/_protractor/package.json @@ -13,7 +13,9 @@ "license": "ISC", "devDependencies": { "protractor": "^3.3.0", - "typings": "^1.0.4" + "typings": "^1.0.4", + "ts-node": "^1.3.0", + "typescript": "^2.0.2" }, "repository": {} } diff --git a/public/docs/_examples/_protractor/protractor.config.js b/public/docs/_examples/_protractor/protractor.config.js index fc68f03b98..2452bea764 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, // Base URL for application server diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts index e2e9b64b9b..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 @@ -289,6 +289,19 @@ describe('Animation Tests', () => { }); }); + describe('callbacks', () => { + it('fires a callback on start and done', () => { + addActiveHero(); + browser.manage().logs().get('browser').then((logs) => { + const animationMessages = logs.filter((log) => { + return log.message.indexOf('Animation') !== -1 ? true : false; + }); + + expect(animationMessages.length).toBeGreaterThan(0); + }); + }); + }); + function addActiveHero(sleep?: number) { sleep = sleep || 500; element(by.buttonText('Add active hero')).click(); diff --git a/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts b/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts index 621d144a1f..39d69f2c91 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts @@ -17,7 +17,7 @@ import { Heroes } from './hero.service'; template: ` diff --git a/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts b/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts index 4bd42e1616..c74ef90b8b 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts @@ -27,7 +27,7 @@ import { Heroes } from './hero.service'; template: `
diff --git a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml index 0710ddbb86..e1bda01d28 100644 --- a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml +++ b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml @@ -5,7 +5,7 @@ version: 0.0.1 environment: sdk: '>=1.13.0 <2.0.0' dependencies: - angular2: 2.0.0-beta.18 + angular2: 2.0.0-beta.21 browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 transformers: diff --git a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart index 5013275e6a..f9143d4116 100644 --- a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart +++ b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart @@ -1,8 +1,6 @@ -// #docregion import 'package:angular2/platform/browser.dart'; - import 'package:lifecycle_hooks/app_component.dart'; -main() { +void main() { bootstrap(AppComponent); } diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts index f86218e9a8..156ea3c3a9 100644 --- a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts +++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts @@ -66,8 +66,8 @@ describe('Lifecycle hooks', function () { expect(titleEle.getText()).toContain('Windstorm can sing'); changeLogEles.count().then(function(count) { - // Empirically 5 messages to start - expect(count).toBeGreaterThan(4, 'should start with some messages'); + // 3 messages to start + expect(count).toEqual(3, 'should start with 3 messages'); logCount = count; // heroNameInputEle.sendKeys('-foo-').then(function () { return sendKeys(heroNameInputEle, '-foo-'); @@ -82,8 +82,7 @@ describe('Lifecycle hooks', function () { return sendKeys(powerInputEle, '-bar-'); }).then(function () { expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); - // 7 == 2 previously + length of '-bar-' - expect(changeLogEles.count()).toEqual(logCount + 11, 'should add 11 more messages'); + expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages'); }); }); diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts index 1ffdd23ba7..6dfcf8dd43 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts @@ -1,6 +1,6 @@ /* tslint:disable:forin */ // #docregion -import { Component, DoCheck, Input, OnChanges, SimpleChange, ViewChild } from '@angular/core'; +import { Component, DoCheck, Input, ViewChild } from '@angular/core'; class Hero { constructor(public name: string) {} @@ -21,7 +21,7 @@ class Hero { 'p {background: Yellow; padding: 8px; margin-top: 8px}' ] }) -export class DoCheckComponent implements DoCheck, OnChanges { +export class DoCheckComponent implements DoCheck { @Input() hero: Hero; @Input() power: string; @@ -66,16 +66,6 @@ export class DoCheckComponent implements DoCheck, OnChanges { } // #enddocregion ng-do-check - // Copied from OnChangesComponent - ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - for (let propName in changes) { - let chng = changes[propName]; - let cur = JSON.stringify(chng.currentValue); - let prev = JSON.stringify(chng.previousValue); - this.changeLog.push(`OnChanges: ${propName}: currentValue = ${cur}, previousValue = ${prev}`); - } - } - reset() { this.changeDetected = true; this.changeLog.length = 0; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts index 4acf5de663..2470c9595e 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts @@ -1,4 +1,3 @@ -// #docregion import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html index 5c76a6056c..a0fd404931 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html +++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html @@ -7,7 +7,7 @@

- + - +
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/ngmodule/e2e-spec.ts b/public/docs/_examples/ngmodule/e2e-spec.ts index 9279b26fd0..de8f4fa7e0 100644 --- a/public/docs/_examples/ngmodule/e2e-spec.ts +++ b/public/docs/_examples/ngmodule/e2e-spec.ts @@ -6,6 +6,7 @@ describe('NgModule', function () { const gold = 'rgba(255, 215, 0, 1)'; const powderblue = 'rgba(176, 224, 230, 1)'; const lightgray = 'rgba(211, 211, 211, 1)'; + const white = 'rgba(0, 0, 0, 0)'; function getCommonsSectionStruct() { const buttons = element.all(by.css('nav a')); @@ -55,7 +56,7 @@ describe('NgModule', function () { } // tests - function appTitleTests(color: string) { + function appTitleTests(color: string, name?: string) { return function() { it('should have a gray header', function() { const commons = getCommonsSectionStruct(); @@ -64,16 +65,16 @@ describe('NgModule', function () { it('should welcome us', function () { const commons = getCommonsSectionStruct(); - expect(commons.subtitle.getText()).toBe('Welcome, Sam Spade'); + expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes')); }); }; } - function contactTests(color: string) { + function contactTests(color: string, name?: string) { return function() { it('shows the contact\'s owner', function() { const contacts = getContactSectionStruct(); - expect(contacts.header.getText()).toBe('Contact of Sam Spade'); + expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes')); }); it('can cycle between contacts', function () { @@ -114,9 +115,9 @@ describe('NgModule', function () { browser.get(''); }); - describe('app-title', appTitleTests(lightgray)); + describe('app-title', appTitleTests(white, 'Miss Marple')); - describe('contact', contactTests(lightgray)); + describe('contact', contactTests(lightgray, 'Miss Marple')); describe('crisis center', function () { beforeEach(function () { @@ -149,7 +150,7 @@ describe('NgModule', function () { it('shows a list of heroes', function() { const heroes = getHeroesSectionStruct(); - expect(heroes.header.getText()).toBe('Heroes of Sam Spade'); + expect(heroes.header.getText()).toBe('Heroes of Miss Marple'); expect(heroes.title.getText()).toBe('Hero List'); expect(heroes.items.count()).toBe(6); expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice'); diff --git a/public/docs/_examples/ngmodule/ts/app/app.module.3.ts b/public/docs/_examples/ngmodule/ts/app/app.module.3.ts index 8aa968a31c..8920c00b61 100644 --- a/public/docs/_examples/ngmodule/ts/app/app.module.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/app.module.3.ts @@ -11,8 +11,6 @@ import { UserService } from './user.service'; /* Feature Modules */ import { ContactModule } from './contact/contact.module.3'; - - import { routing } from './app.routing.3'; @NgModule({ @@ -23,9 +21,8 @@ import { routing } from './app.routing.3'; routing ], // #enddocregion imports - - declarations: [ AppComponent, HighlightDirective, TitleComponent ], providers: [ UserService ], + declarations: [ AppComponent, HighlightDirective, TitleComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/public/docs/_examples/ngmodule/ts/app/app.module.ts b/public/docs/_examples/ngmodule/ts/app/app.module.ts index 7f7ede96e1..cccb49c981 100644 --- a/public/docs/_examples/ngmodule/ts/app/app.module.ts +++ b/public/docs/_examples/ngmodule/ts/app/app.module.ts @@ -1,29 +1,40 @@ // #docplaster // #docregion +// #docregion v4 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; /* App Root */ import { AppComponent } from './app.component'; - - - /* Feature Modules */ import { ContactModule } from './contact/contact.module'; -import { SharedModule } from './shared/shared.module'; - +import { CoreModule } from './core/core.module'; import { routing } from './app.routing'; @NgModule({ + // #docregion import-for-root imports: [ BrowserModule, ContactModule, - routing, - SharedModule.forRoot() +// #enddocregion v4 +// #enddocregion +// #enddocregion import-for-root +/* +// #docregion v4 + CoreModule, +// #enddocregion v4 +*/ +// #docregion import-for-root +// #docregion + CoreModule.forRoot({userName: 'Miss Marple'}), +// #docregion v4 + routing ], + // #enddocregion import-for-root declarations: [ AppComponent ], - bootstrap: [ AppComponent ] }) export class AppModule { } +// #enddocregion v4 +// #enddocregion diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts index 96eebf5dac..9c9129023c 100644 --- a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts @@ -1,10 +1,10 @@ -import { Routes, - RouterModule } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '', redirectTo: 'contact', pathMatch: 'full'}, - { path: 'crisis', loadChildren: 'app/crisis/crisis.module' }, - { path: 'heroes', loadChildren: 'app/hero/hero.module.3' } + { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, + { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' } ]; -export const routing = RouterModule.forRoot(routes); +export const routing: ModuleWithProviders = RouterModule.forRoot(routes); diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.ts b/public/docs/_examples/ngmodule/ts/app/app.routing.ts index 09fa0225d8..f34498c4e1 100644 --- a/public/docs/_examples/ngmodule/ts/app/app.routing.ts +++ b/public/docs/_examples/ngmodule/ts/app/app.routing.ts @@ -1,15 +1,15 @@ // #docregion -import { Routes, - RouterModule } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '', redirectTo: 'contact', pathMatch: 'full'}, // #docregion lazy-routes - { path: 'crisis', loadChildren: 'app/crisis/crisis.module' }, - { path: 'heroes', loadChildren: 'app/hero/hero.module' } + { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, + { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' } // #enddocregion lazy-routes ]; // #docregion forRoot -export const routing = RouterModule.forRoot(routes); +export const routing: ModuleWithProviders = RouterModule.forRoot(routes); // #enddocregion forRoot diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts index 019e477e63..392904086a 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts @@ -5,9 +5,10 @@ import { Contact, ContactService } from './contact.service'; import { UserService } from '../user.service'; @Component({ + moduleId: module.id, selector: 'app-contact', - templateUrl: 'app/contact/contact.component.html', - styleUrls: ['app/contact/contact.component.css'] + templateUrl: 'contact.component.html', + styleUrls: ['contact.component.css'] }) export class ContactComponent implements OnInit { contact: Contact; @@ -35,7 +36,7 @@ export class ContactComponent implements OnInit { } onSubmit() { - // TODO: do something like save it + // POST-DEMO TODO: do something like save it this.displayMessage('Saved ' + this.contact.name); } diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts index 9bf9bc0ee9..bb6f2e3b42 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts @@ -1,14 +1,15 @@ -// Exact copy except import UserService from shared +// Exact copy except import UserService from core // #docregion import { Component, OnInit } from '@angular/core'; import { Contact, ContactService } from './contact.service'; -import { UserService } from '../shared/user.service'; +import { UserService } from '../core/user.service'; @Component({ + moduleId: module.id, selector: 'app-contact', - templateUrl: 'app/contact/contact.component.html', - styleUrls: ['app/contact/contact.component.css'] + templateUrl: 'contact.component.html', + styleUrls: ['contact.component.css'] }) export class ContactComponent implements OnInit { contact: Contact; @@ -36,7 +37,7 @@ export class ContactComponent implements OnInit { } onSubmit() { - // TODO: do something like save it + // POST-DEMO TODO: do something like save it this.displayMessage('Saved ' + this.contact.name); } diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts index d28d67d085..6f835635d0 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts @@ -15,7 +15,6 @@ import { routing } from './contact.routing.3'; @NgModule({ imports: [ CommonModule, FormsModule, routing ], declarations: [ ContactComponent, HighlightDirective, AwesomePipe ], - providers: [ ContactService ] }) export class ContactModule { } diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts index f90fc36789..63d740d82e 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts @@ -1,7 +1,8 @@ -import { RouterModule } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { RouterModule } from '@angular/router'; -import { ContactComponent } from './contact.component.3'; +import { ContactComponent } from './contact.component.3'; -export const routing = RouterModule.forChild([ +export const routing: ModuleWithProviders = RouterModule.forChild([ { path: 'contact', component: ContactComponent} ]); diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts index fe9af67fbf..6b6534dfbc 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts @@ -1,9 +1,10 @@ -import { RouterModule } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; +import { RouterModule } from '@angular/router'; -import { ContactComponent } from './contact.component'; +import { ContactComponent } from './contact.component'; // #docregion routing -export const routing = RouterModule.forChild([ +export const routing: ModuleWithProviders = RouterModule.forChild([ { path: 'contact', component: ContactComponent} ]); // #enddocregion diff --git a/public/docs/_examples/ngmodule/ts/app/core/core.module.ts b/public/docs/_examples/ngmodule/ts/app/core/core.module.ts new file mode 100644 index 0000000000..27cb9a2193 --- /dev/null +++ b/public/docs/_examples/ngmodule/ts/app/core/core.module.ts @@ -0,0 +1,48 @@ +/* tslint:disable:member-ordering no-unused-variable */ +// #docplaster +// #docregion +// #docregion v4 +import { + ModuleWithProviders, NgModule, + Optional, SkipSelf } from '@angular/core'; + +import { CommonModule } from '@angular/common'; + +import { TitleComponent } from './title.component'; +import { UserService } from './user.service'; +// #enddocregion +import { UserServiceConfig } from './user.service'; + +// #docregion v4 +@NgModule({ + imports: [ CommonModule ], + declarations: [ TitleComponent ], + exports: [ TitleComponent ], + providers: [ UserService ] +}) +export class CoreModule { +// #enddocregion v4 + + // #docregion ctor + constructor (@Optional() @SkipSelf() parentModule: CoreModule) { + if (parentModule) { + throw new Error( + 'CoreModule is already loaded. Import it in the AppModule only'); + } + } + // #enddocregion ctor + + // #docregion for-root + static forRoot(config: UserServiceConfig): ModuleWithProviders { + return { + ngModule: CoreModule, + providers: [ + {provide: UserServiceConfig, useValue: config } + ] + }; + } + // #enddocregion for-root +// #docregion v4 +} +// #enddocregion v4 +// #enddocregion diff --git a/public/docs/_examples/ngmodule/ts/app/shared/title.component.html b/public/docs/_examples/ngmodule/ts/app/core/title.component.html similarity index 63% rename from public/docs/_examples/ngmodule/ts/app/shared/title.component.html rename to public/docs/_examples/ngmodule/ts/app/core/title.component.html index 6108c38415..8ebd08ae43 100644 --- a/public/docs/_examples/ngmodule/ts/app/shared/title.component.html +++ b/public/docs/_examples/ngmodule/ts/app/core/title.component.html @@ -1,4 +1,4 @@ - +

{{title}} {{subtitle}}

Welcome, {{user}} diff --git a/public/docs/_examples/ngmodule/ts/app/shared/title.component.ts b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts similarity index 74% rename from public/docs/_examples/ngmodule/ts/app/shared/title.component.ts rename to public/docs/_examples/ngmodule/ts/app/core/title.component.ts index c3f35b5d32..be2df3acf1 100644 --- a/public/docs/_examples/ngmodule/ts/app/shared/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts @@ -1,10 +1,11 @@ // Exact copy of app/title.component.ts except import UserService from shared import { Component, Input } from '@angular/core'; -import { UserService } from './user.service'; +import { UserService } from '../core/user.service'; @Component({ + moduleId: module.id, selector: 'app-title', - templateUrl: 'app/shared/title.component.html', + templateUrl: 'title.component.html', }) export class TitleComponent { @Input() subtitle = ''; diff --git a/public/docs/_examples/ngmodule/ts/app/core/user.service.ts b/public/docs/_examples/ngmodule/ts/app/core/user.service.ts new file mode 100644 index 0000000000..8fe839075e --- /dev/null +++ b/public/docs/_examples/ngmodule/ts/app/core/user.service.ts @@ -0,0 +1,32 @@ +// Crazy copy of the app/user.service +// Proves that UserService is an app-wide singleton and only instantiated once +// IFF shared.module follows the `forRoot` pattern +// +// If it didn't, a new instance of UserService would be created +// after each lazy load and the userName would double up. + +import { Injectable, Optional } from '@angular/core'; + +let nextId = 1; + +export class UserServiceConfig { + userName = 'Philip Marlowe'; +} + +@Injectable() +export class UserService { + id = nextId++; + private _userName = 'Sherlock Holmes'; + + // #docregion ctor + constructor(@Optional() config: UserServiceConfig) { + if (config) { this._userName = config.userName; } + } + // #enddocregion ctor + + get userName() { + // Demo: add a suffix if this service has been created more than once + const suffix = this.id > 1 ? ` times ${this.id}` : ''; + return this._userName + suffix; + } +} diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis-detail.component.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis-detail.component.ts index da9efb3b2b..9749029d62 100644 --- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis-detail.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/crisis/crisis-detail.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; @Component({ template: ` diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts index 6a759cf87e..40491985dc 100644 --- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts +++ b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts @@ -11,6 +11,4 @@ import { routing } from './crisis.routing'; declarations: [ CrisisDetailComponent, CrisisListComponent ], providers: [ CrisisService ] }) -// #docregion export-default -export default class CrisisModule {} -// #enddocregion export-default +export class CrisisModule {} diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts index a0e8b850b7..4d8d711d65 100644 --- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts +++ b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts @@ -1,5 +1,6 @@ +import { ModuleWithProviders } from '@angular/core'; import { Routes, - RouterModule } from '@angular/router'; + RouterModule } from '@angular/router'; import { CrisisListComponent } from './crisis-list.component'; import { CrisisDetailComponent } from './crisis-detail.component'; @@ -10,4 +11,4 @@ const routes: Routes = [ { path: ':id', component: CrisisDetailComponent } ]; -export const routing = RouterModule.forChild(routes); +export const routing: ModuleWithProviders = RouterModule.forChild(routes); diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.component.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.component.ts index 3329e25cc0..86338fb0ae 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.component.ts @@ -1,8 +1,8 @@ -// Exact copy except import UserService from shared +// Exact copy except import UserService from core import { Component } from '@angular/core'; import { HeroService } from './hero.service'; -import { UserService } from '../shared/user.service'; +import { UserService } from '../core/user.service'; @Component({ template: ` diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts index def1432fc4..319af623bb 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts @@ -1,12 +1,12 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; -import { HeroComponent } from './hero.component.3'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { HighlightDirective } from './highlight.directive'; -import { routing } from './hero.routing.3'; +import { HeroComponent } from './hero.component.3'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroListComponent } from './hero-list.component'; +import { HighlightDirective } from './highlight.directive'; +import { routing } from './hero.routing.3'; // #docregion class @NgModule({ @@ -16,5 +16,5 @@ import { routing } from './hero.routing.3'; HighlightDirective ] }) -export default class HeroModule { } +export class HeroModule { } // #enddocregion class diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts index d49455fa0b..57159ed533 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts @@ -1,23 +1,16 @@ -import { NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; +import { SharedModule } from '../shared/shared.module'; -import { HeroComponent } from './hero.component'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { routing } from './hero.routing'; - -/* - * TODO: Remove THE HeroService class and provider after - * https://github.com/angular/angular/pull/10579 lands - */ -import { HeroService } from './hero.service'; +import { HeroComponent } from './hero.component'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroListComponent } from './hero-list.component'; +import { routing } from './hero.routing'; @NgModule({ imports: [ SharedModule, routing ], - providers: [ HeroService ], declarations: [ HeroComponent, HeroDetailComponent, HeroListComponent, ] }) -export default class HeroModule { } +export class HeroModule { } diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts index 181e48faf5..132d21b29e 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts @@ -1,9 +1,10 @@ +import { ModuleWithProviders } from '@angular/core'; import { Routes, - RouterModule } from '@angular/router'; + RouterModule } from '@angular/router'; -import { HeroComponent } from './hero.component.3'; -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; +import { HeroComponent } from './hero.component.3'; +import { HeroListComponent } from './hero-list.component'; +import { HeroDetailComponent } from './hero-detail.component'; const routes: Routes = [ { path: '', @@ -15,4 +16,4 @@ const routes: Routes = [ } ]; -export const routing = RouterModule.forChild(routes); +export const routing: ModuleWithProviders = RouterModule.forChild(routes); diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts index 951ffd7d12..f1b4285ecd 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts @@ -1,9 +1,10 @@ +import { ModuleWithProviders } from '@angular/core'; import { Routes, - RouterModule } from '@angular/router'; + RouterModule } from '@angular/router'; -import { HeroComponent } from './hero.component'; -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; +import { HeroComponent } from './hero.component'; +import { HeroListComponent } from './hero-list.component'; +import { HeroDetailComponent } from './hero-detail.component'; const routes: Routes = [ { path: '', @@ -15,4 +16,4 @@ const routes: Routes = [ } ]; -export const routing = RouterModule.forChild(routes); +export const routing: ModuleWithProviders = RouterModule.forChild(routes); diff --git a/public/docs/_examples/ngmodule/ts/app/shared/shared.module.ts b/public/docs/_examples/ngmodule/ts/app/shared/shared.module.ts index 5991278d44..2da7d7b2a5 100644 --- a/public/docs/_examples/ngmodule/ts/app/shared/shared.module.ts +++ b/public/docs/_examples/ngmodule/ts/app/shared/shared.module.ts @@ -1,40 +1,18 @@ // #docregion -import { NgModule, - ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { AwesomePipe } from './awesome.pipe'; import { HighlightDirective } from './highlight.directive'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; -// #docregion shared-module +// #docregion module @NgModule({ imports: [ CommonModule ], - declarations: [ AwesomePipe, HighlightDirective, TitleComponent ], - exports: [ AwesomePipe, HighlightDirective, TitleComponent, + declarations: [ AwesomePipe, HighlightDirective ], + exports: [ AwesomePipe, HighlightDirective, CommonModule, FormsModule ] }) -export class SharedModule { - -// #docregion for-root - static forRoot(): ModuleWithProviders { - return { - ngModule: SharedModule, - providers: [ UserService ] - }; - } -// #enddocregion for-root -} - -// #enddocregion shared-module +export class SharedModule { } +// #enddocregion module // #enddocregion - -// #docregion shared-root-module -@NgModule({ - exports: [ SharedModule ], - providers: [ UserService ] -}) -export class SharedRootModule { } -// #enddocregion shared-root-module diff --git a/public/docs/_examples/ngmodule/ts/app/shared/user.service.ts b/public/docs/_examples/ngmodule/ts/app/shared/user.service.ts deleted file mode 100644 index d32b20b043..0000000000 --- a/public/docs/_examples/ngmodule/ts/app/shared/user.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Crazy copy of the app/user.service -// Proves that UserService is an app-wide singleton and only instantiated once -// IFF shared.module follows the `forRoot` pattern -// -// If it didn't, a new instance of UserService would be created -// after each lazy load and the userName would double up. - -import { Injectable } from '@angular/core'; - -@Injectable() -export class UserService { - - static userName = ''; - - constructor() { - UserService.userName += UserService.userName || 'Sam Spade'; - } - - get userName() { return UserService.userName; } -} diff --git a/public/docs/_examples/ngmodule/ts/app/title.component.ts b/public/docs/_examples/ngmodule/ts/app/title.component.ts index 0edfd4b468..cd5a19aad0 100644 --- a/public/docs/_examples/ngmodule/ts/app/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/title.component.ts @@ -7,8 +7,9 @@ import { UserService } from './user.service'; // #docregion v1 @Component({ + moduleId: module.id, selector: 'app-title', - templateUrl: 'app/title.component.html', + templateUrl: 'title.component.html', }) export class TitleComponent { @Input() subtitle = ''; diff --git a/public/docs/_examples/ngmodule/ts/app/user.service.ts b/public/docs/_examples/ngmodule/ts/app/user.service.ts index cf31db5da5..7d996b26fa 100644 --- a/public/docs/_examples/ngmodule/ts/app/user.service.ts +++ b/public/docs/_examples/ngmodule/ts/app/user.service.ts @@ -4,5 +4,5 @@ import { Injectable } from '@angular/core'; @Injectable() /** Dummy version of an authenticated user service */ export class UserService { - userName = 'Sam Spade'; + userName = 'Sherlock Holmes'; } diff --git a/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json b/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json index 77804a3be1..090a440059 100644 --- a/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json +++ b/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json @@ -9,11 +9,12 @@ "app/title.component.ts", "app/user.service.ts", - "app/contact/*.css", - "app/contact/*.html", - "app/contact/*.ts", - "!app/contact/contact.component.ts", - "!app/contact/contact.module.ts", + "app/contact/awesome.pipe.ts", + "app/contact/contact.component.css", + "app/contact/contact.component.html", + "app/contact/contact.component.3.ts", + "app/contact/contact.service.ts", + "app/contact/highlight.directive.ts", "styles.css", "index.1b.html" diff --git a/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json b/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json index b7da9b879f..4ee4638a63 100644 --- a/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json +++ b/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json @@ -9,12 +9,14 @@ "app/title.component.ts", "app/user.service.ts", - "app/contact/*.css", - "app/contact/*.html", - "app/contact/*.ts", - "!app/contact/contact.component.ts", - "!app/contact/contact.module.ts", - "!app/contact/contact.module.3.ts", + "app/contact/contact.component.css", + "app/contact/contact.component.html", + "app/contact/contact.service.ts", + + "app/contact/awesome.pipe.ts", + "app/contact/contact.component.3.ts", + "app/contact/contact.module.2.ts", + "app/contact/highlight.directive.ts", "styles.css", "index.2.html" diff --git a/public/docs/_examples/ngmodule/ts/plnkr.json b/public/docs/_examples/ngmodule/ts/plnkr.json index 54b3da8310..fbc92ce13b 100644 --- a/public/docs/_examples/ngmodule/ts/plnkr.json +++ b/public/docs/_examples/ngmodule/ts/plnkr.json @@ -8,19 +8,25 @@ "app/contact/contact.component.css", "app/contact/contact.component.html", + "app/contact/contact.service.ts", + "app/contact/contact.component.ts", "app/contact/contact.module.ts", "app/contact/contact.routing.ts", - "app/contact/contact.service.ts", "app/crisis/*.ts", - "app/hero/*.ts", + "app/hero/hero-detail.component.ts", + "app/hero/hero-list.component.ts", + "app/hero/hero.service.ts", - "!app/hero/hero.component.3.ts", - "!app/hero/hero.module.3.ts", - "!app/hero/hero.routing.3.ts", - "!app/hero/highlight.directive.ts", + "app/hero/hero.component.ts", + "app/hero/hero.module.ts", + "app/hero/hero.routing.ts", + + "app/core/*.css", + "app/core/*.html", + "app/core/*.ts", "app/shared/*.css", "app/shared/*.html", diff --git a/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json b/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json index dcdfb6e77f..6a7b39e2a2 100644 --- a/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json +++ b/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json @@ -11,21 +11,26 @@ "app/title.component.ts", "app/user.service.ts", - "app/contact/*.css", - "app/contact/*.html", - "app/contact/*.ts", + "app/contact/contact.component.css", + "app/contact/contact.component.html", + "app/contact/contact.service.ts", - "!app/contact/contact.component.ts", - "!app/contact/contact.module.ts", - "!app/contact/contact.routing.ts", + "app/contact/awesome.pipe.ts", + "app/contact/contact.component.3.ts", + "app/contact/contact.module.3.ts", + "app/contact/contact.routing.3.ts", + "app/contact/highlight.directive.ts", "app/crisis/*.ts", - "app/hero/*.ts", + "app/hero/hero-detail.component.ts", + "app/hero/hero-list.component.ts", + "app/hero/hero.service.ts", - "!app/hero/hero.component.ts", - "!app/hero/hero.module.ts", - "!app/hero/hero.routing.ts", + "app/hero/hero.component.3.ts", + "app/hero/hero.module.3.ts", + "app/hero/hero.routing.3.ts", + "app/hero/highlight.directive.ts", "styles.css", "index.3.html" diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 7015bd0767..7baee8a5a9 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -19,35 +19,41 @@ "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 --bail", - "build:cli": "ng build" + "build:cli": "ng build", + "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.5", - "@angular/compiler": "2.0.0-rc.5", - "@angular/core": "2.0.0-rc.5", - "@angular/forms": "0.3.0", - "@angular/http": "2.0.0-rc.5", - "@angular/platform-browser": "2.0.0-rc.5", - "@angular/platform-browser-dynamic": "2.0.0-rc.5", - "@angular/router": "3.0.0-rc.1", - "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.5", - "angular2-in-memory-web-api": "0.0.15", + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/compiler-cli": "0.6.2", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0", + "@angular/http": "2.0.0", + "@angular/platform-browser": "2.0.0", + "@angular/platform-browser-dynamic": "2.0.0", + "@angular/platform-server": "2.0.0", + "@angular/router": "3.0.0", + "@angular/upgrade": "2.0.0", + "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6", - "core-js": "^2.4.0", + "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.6", + "rollup": "^0.34.13", + "rollup-plugin-node-resolve": "^2.0.0", + "rollup-plugin-uglify": "^1.0.1", + "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", - "zone.js": "^0.6.12" + "zone.js": "^0.6.23" }, "devDependencies": { "angular-cli": "^1.0.0-beta.5", "angular2-template-loader": "^0.4.0", + "awesome-typescript-loader": "^2.2.4", "canonical-path": "0.0.2", - "concurrently": "^2.1.0", + "concurrently": "^2.2.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", @@ -55,27 +61,29 @@ "html-webpack-plugin": "^2.16.1", "http-server": "^0.9.0", "jasmine-core": "^2.4.1", - "karma": "^0.13.22", - "karma-chrome-launcher": "^1.0.1", - "karma-cli": "^1.0.0", - "karma-htmlfile-reporter": "^0.3.1", + "karma": "^1.2.0", + "karma-chrome-launcher": "^2.0.0", + "karma-cli": "^1.0.1", + "karma-htmlfile-reporter": "^0.3.4", "karma-jasmine": "^1.0.2", - "karma-phantomjs-launcher": "^1.0.0", + "karma-jasmine-html-reporter": "^0.2.2", + "karma-phantomjs-launcher": "^1.0.2", "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^1.7.0", - "lite-server": "^2.2.0", + "karma-webpack": "^1.8.0", + "lite-server": "^2.2.2", "lodash": "^4.13.1", "null-loader": "^0.1.1", "phantomjs-prebuilt": "^2.1.7", "protractor": "^3.3.0", "raw-loader": "^0.5.1", "rimraf": "^2.5.2", + "rollup-plugin-commonjs": "^4.1.0", "style-loader": "^0.13.1", "ts-loader": "^0.8.2", - "ts-node": "^0.7.3", - "tslint": "^3.13.0", - "typescript": "^1.8.10", - "typings": "^1.0.4", + "ts-node": "^1.3.0", + "tslint": "^3.15.1", + "typescript": "^2.0.2", + "typings": "^1.3.2", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.14.0" diff --git a/public/docs/_examples/pipes/dart/pubspec.yaml b/public/docs/_examples/pipes/dart/pubspec.yaml index 4afa2870c0..e48db77d96 100644 --- a/public/docs/_examples/pipes/dart/pubspec.yaml +++ b/public/docs/_examples/pipes/dart/pubspec.yaml @@ -5,7 +5,7 @@ version: 0.0.1 environment: sdk: '>=1.13.0 <2.0.0' dependencies: - angular2: 2.0.0-beta.18 + angular2: 2.0.0-beta.21 browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 transformers: diff --git a/public/docs/_examples/pipes/e2e-spec.ts b/public/docs/_examples/pipes/e2e-spec.ts index 01c9e5fd13..5f9c4607dc 100644 --- a/public/docs/_examples/pipes/e2e-spec.ts +++ b/public/docs/_examples/pipes/e2e-spec.ts @@ -64,7 +64,7 @@ describe('Pipes', function () { }); - it('should support flying heroes (pure) ', function () { + xit('should support flying heroes (pure) ', function () { let nameEle = element(by.css('flying-heroes input[type="text"]')); let canFlyCheckEle = element(by.css('flying-heroes #can-fly')); let mutateCheckEle = element(by.css('flying-heroes #mutate')); @@ -95,7 +95,7 @@ describe('Pipes', function () { }); - it('should support flying heroes (impure) ', function () { + xit('should support flying heroes (impure) ', function () { let nameEle = element(by.css('flying-heroes-impure input[type="text"]')); let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly')); let mutateCheckEle = element(by.css('flying-heroes-impure #mutate')); 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/dart/pubspec.yaml b/public/docs/_examples/quickstart/dart/pubspec.yaml index 0c08200992..b8ad984d4c 100644 --- a/public/docs/_examples/quickstart/dart/pubspec.yaml +++ b/public/docs/_examples/quickstart/dart/pubspec.yaml @@ -5,7 +5,7 @@ version: 0.0.1 environment: sdk: '>=1.13.0 <2.0.0' dependencies: - angular2: 2.0.0-beta.18 + angular2: 2.0.0-beta.21 browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 transformers: diff --git a/public/docs/_examples/quickstart/dart/web/styles_1.css b/public/docs/_examples/quickstart/dart/web/styles_1.css deleted file mode 100644 index 27e60d67c0..0000000000 --- a/public/docs/_examples/quickstart/dart/web/styles_1.css +++ /dev/null @@ -1,14 +0,0 @@ -/* #docregion */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} -body { - margin: 2em; -} - -/* -* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css -* for the full set of master styles used by the documentation samples -*/ 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 b127bdce13..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 @@ -16,7 +16,7 @@ - + diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 5b3ecbc847..cca103a52f 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -7,23 +7,22 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.5", - "@angular/compiler": "2.0.0-rc.5", - "@angular/core": "2.0.0-rc.5", - "@angular/forms": "0.3.0", - "@angular/http": "2.0.0-rc.5", - "@angular/platform-browser": "2.0.0-rc.5", - "@angular/platform-browser-dynamic": "2.0.0-rc.5", - "@angular/router": "3.0.0-rc.1", - "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.5", + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0", + "@angular/http": "2.0.0", + "@angular/platform-browser": "2.0.0", + "@angular/platform-browser-dynamic": "2.0.0", + "@angular/router": "3.0.0", + "@angular/upgrade": "2.0.0", - "core-js": "^2.4.0", - "reflect-metadata": "0.1.3", - "rxjs": "5.0.0-beta.6", - "zone.js": "0.6.12", + "core-js": "^2.4.1", + "reflect-metadata": "^0.1.3", + "rxjs": "5.0.0-beta.12", + "zone.js": "^0.6.23", - "angular2-in-memory-web-api": "0.0.15", + "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { 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/app/app.module.1.ts b/public/docs/_examples/quickstart/ts/app/app.module.1.ts new file mode 100644 index 0000000000..cd9673617d --- /dev/null +++ b/public/docs/_examples/quickstart/ts/app/app.module.1.ts @@ -0,0 +1,8 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +@NgModule({ + imports: [ BrowserModule ] +}) +export class AppModule { } diff --git a/public/docs/_examples/quickstart/ts/app/app.module.ts b/public/docs/_examples/quickstart/ts/app/app.module.ts index b4fc185c24..a8b40a7650 100644 --- a/public/docs/_examples/quickstart/ts/app/app.module.ts +++ b/public/docs/_examples/quickstart/ts/app/app.module.ts @@ -2,11 +2,12 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) + export class AppModule { } diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts index 4ad787ebfd..e36de73708 100644 --- a/public/docs/_examples/quickstart/ts/app/main.ts +++ b/public/docs/_examples/quickstart/ts/app/main.ts @@ -5,4 +5,5 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; // #enddocregion import -platformBrowserDynamic().bootstrapModule(AppModule); +const platform = platformBrowserDynamic(); +platform.bootstrapModule(AppModule); diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html index a0a64d1122..4ee082433c 100644 --- a/public/docs/_examples/quickstart/ts/index.html +++ b/public/docs/_examples/quickstart/ts/index.html @@ -2,17 +2,17 @@ - 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 4f0bc098fd..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\" ", @@ -11,30 +11,29 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.5", - "@angular/compiler": "2.0.0-rc.5", - "@angular/core": "2.0.0-rc.5", - "@angular/forms": "0.3.0", - "@angular/http": "2.0.0-rc.5", - "@angular/platform-browser": "2.0.0-rc.5", - "@angular/platform-browser-dynamic": "2.0.0-rc.5", - "@angular/router": "3.0.0-rc.1", - "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.5", + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0", + "@angular/http": "2.0.0", + "@angular/platform-browser": "2.0.0", + "@angular/platform-browser-dynamic": "2.0.0", + "@angular/router": "3.0.0", + "@angular/upgrade": "2.0.0", - "systemjs": "0.19.27", - "core-js": "^2.4.0", + "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.6", - "zone.js": "^0.6.12", + "rxjs": "5.0.0-beta.12", + "systemjs": "0.19.27", + "zone.js": "^0.6.23", - "angular2-in-memory-web-api": "0.0.15", + "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { - "concurrently": "^2.0.0", - "lite-server": "^2.2.0", - "typescript": "^1.8.10", - "typings":"^1.0.4" + "concurrently": "^2.2.0", + "lite-server": "^2.2.2", + "typescript": "^2.0.2", + "typings":"^1.3.2" } } diff --git a/public/docs/_examples/quickstart/ts/styles.1.css b/public/docs/_examples/quickstart/ts/styles.1.css deleted file mode 100644 index fbc30e2c9e..0000000000 --- a/public/docs/_examples/quickstart/ts/styles.1.css +++ /dev/null @@ -1,14 +0,0 @@ -/* #docregion */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} -body { - margin: 2em; -} - - /* - * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css - * for the full set of master styles used by the documentation samples - */ diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js index 901b8f01d0..852c46168d 100644 --- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js +++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js @@ -1,60 +1,46 @@ // #docregion /** - * System configuration for Angular 2 samples + * System configuration for Angular samples * Adjust as necessary for your application needs. */ -(function(global) { +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + app: 'app', - // map tells the System loader where to look for things - var map = { - 'app': 'app', // 'dist', - - '@angular': 'node_modules/@angular', - 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', - 'rxjs': 'node_modules/rxjs' - }; - - // packages tells the System loader how to load when no filename and/or no extension - var packages = { - 'app': { main: 'main.js', defaultExtension: 'js' }, - 'rxjs': { defaultExtension: 'js' }, - 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, - }; - - var ngPackageNames = [ - 'common', - 'compiler', - 'core', - 'forms', - 'http', - 'platform-browser', - 'platform-browser-dynamic', - 'router', - 'router-deprecated', - 'upgrade', - ]; - - // Individual files (~300 requests): - function packIndex(pkgName) { - packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; - } - - // Bundled (~40 requests): - function packUmd(pkgName) { - packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; - } - - // Most environments should use UMD; some (Karma) need the individual index files - var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; - - // Add package entries for angular packages - ngPackageNames.forEach(setPackageConfig); - - var config = { - map: map, - packages: packages - }; - - System.config(config); + // angular bundles + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + // other libraries + 'rxjs': 'npm:rxjs', + 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.js', + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + }, + 'angular2-in-memory-web-api': { + main: './index.js', + defaultExtension: 'js' + } + } + }); })(this); diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json index 3d826df25a..7da31ca0af 100644 --- a/public/docs/_examples/quickstart/ts/typings.1.json +++ b/public/docs/_examples/quickstart/ts/typings.1.json @@ -1,7 +1,7 @@ { "globalDependencies": { - "core-js": "registry:dt/core-js#0.0.0+20160602141332", + "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", - "node": "registry:dt/node#6.0.0+20160807145350" + "node": "registry:dt/node#6.0.0+20160909174046" } } diff --git a/public/docs/_examples/router-deprecated/e2e-spec.ts.disabled b/public/docs/_examples/router-deprecated/e2e-spec.ts.disabled deleted file mode 100644 index 3892285845..0000000000 --- a/public/docs/_examples/router-deprecated/e2e-spec.ts.disabled +++ /dev/null @@ -1,127 +0,0 @@ -/// -'use strict'; -describe('Router', function () { - - beforeAll(function () { - browser.get(''); - }); - - function getPageStruct() { - let hrefEles = element.all(by.css('my-app a')); - - return { - hrefs: hrefEles, - routerParent: element(by.css('my-app > undefined')), - routerTitle: element(by.css('my-app > undefined > h2')), - - crisisHref: hrefEles.get(0), - crisisList: element.all(by.css('my-app > undefined > undefined li')), - crisisDetail: element(by.css('my-app > undefined > undefined > div')), - crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')), - - heroesHref: hrefEles.get(1), - heroesList: element.all(by.css('my-app > undefined li')), - heroDetail: element(by.css('my-app > undefined > div')), - heroDetailTitle: element(by.css('my-app > undefined > div > h3')), - - }; - } - - it('should be able to see the start screen', function () { - let page = getPageStruct(); - expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); - expect(page.crisisHref.getText()).toEqual('Crisis Center'); - expect(page.heroesHref.getText()).toEqual('Heroes'); - }); - - it('should be able to see crises center items', function () { - let page = getPageStruct(); - expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start'); - }); - - it('should be able to see hero items', function () { - let page = getPageStruct(); - page.heroesHref.click().then(function() { - expect(page.routerTitle.getText()).toContain('HEROES'); - expect(page.heroesList.count()).toBe(6, 'should be 6 heroes'); - }); - }); - - it('should be able to toggle the views', function () { - let page = getPageStruct(); - page.crisisHref.click().then(function() { - expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries'); - return page.heroesHref.click(); - }).then(function() { - expect(page.heroesList.count()).toBe(6, 'should be 6 heroes'); - }); - }); - - it('should be able to edit and save details from the crisis center view', function () { - crisisCenterEdit(2, true); - }); - - it('should be able to edit and cancel details from the crisis center view', function () { - crisisCenterEdit(3, false); - }); - - it('should be able to edit and save details from the heroes view', function () { - let page = getPageStruct(); - let heroEle: protractor.ElementFinder; - let heroText: string; - page.heroesHref.click().then(function() { - heroEle = page.heroesList.get(4); - return heroEle.getText(); - }).then(function(text) { - expect(text.length).toBeGreaterThan(0, 'should have some text'); - // remove leading id from text - heroText = text.substr(text.indexOf(' ')).trim(); - return heroEle.click(); - }).then(function() { - expect(page.heroesList.count()).toBe(0, 'should no longer see crisis center entries'); - expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); - expect(page.heroDetailTitle.getText()).toContain(heroText); - let inputEle = page.heroDetail.element(by.css('input')); - return sendKeys(inputEle, '-foo'); - }).then(function() { - expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); - let buttonEle = page.heroDetail.element(by.css('button')); - return buttonEle.click(); - }).then(function() { - expect(heroEle.getText()).toContain(heroText + '-foo'); - }); - }); - - function crisisCenterEdit(index: number, shouldSave: boolean) { - let page = getPageStruct(); - let crisisEle: protractor.ElementFinder; - let crisisText: string; - page.crisisHref.click() - .then(function () { - crisisEle = page.crisisList.get(index); - return crisisEle.getText(); - }).then(function (text) { - expect(text.length).toBeGreaterThan(0, 'should have some text'); - // remove leading id from text - crisisText = text.substr(text.indexOf(' ')).trim(); - return crisisEle.click(); - }).then(function () { - expect(page.crisisList.count()).toBe(0, 'should no longer see crisis center entries'); - expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); - expect(page.crisisDetailTitle.getText()).toContain(crisisText); - let inputEle = page.crisisDetail.element(by.css('input')); - return sendKeys(inputEle, '-foo'); - }).then(function () { - expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); - let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel')); - return buttonEle.click(); - }).then(function () { - if (shouldSave) { - expect(crisisEle.getText()).toContain(crisisText + '-foo'); - } else { - expect(crisisEle.getText()).not.toContain(crisisText + '-foo'); - } - }); - } - -}); diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts deleted file mode 100644 index 0e20623fd3..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/app.component.1.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* First version */ -// #docplaster - -// #docregion -import { Component } from '@angular/core'; -// #docregion import-router -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; -// #enddocregion import-router - -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; - -@Component({ - selector: 'my-app', -// #docregion template - template: ` -

Component Router (Deprecated)

- - - `, -// #enddocregion template - directives: [ROUTER_DIRECTIVES] -}) -// #enddocregion -/* -// #docregion route-config -@Component({ ... }) -// #enddocregion route-config -*/ -// #docregion -// #docregion route-config -@RouteConfig([ -// #docregion route-defs - {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, - {path: '/heroes', name: 'Heroes', component: HeroListComponent} -// #enddocregion route-defs -]) -export class AppComponent { } -// #enddocregion route-config -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts deleted file mode 100644 index e4685ff418..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/app.component.2.ts +++ /dev/null @@ -1,58 +0,0 @@ -/* Second Heroes version */ -// #docplaster - -// #docregion -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; - -import { CrisisListComponent } from './crisis-list.component'; -// #enddocregion -/* -// Apparent Milestone 2 imports -// #docregion -// #docregion hero-import -import { HeroListComponent } from './heroes/hero-list.component'; -import { HeroDetailComponent } from './heroes/hero-detail.component'; -import { HeroService } from './heroes/hero.service'; -// #enddocregion hero-import -// #enddocregion -*/ -// Actual Milestone 2 imports -import { HeroListComponent } from './heroes/hero-list.component.1'; -import { HeroDetailComponent } from './heroes/hero-detail.component.1'; -import { HeroService } from './heroes/hero.service'; -// #docregion - -@Component({ - selector: 'my-app', - template: ` -

Component Router (Deprecated)

- - - `, - providers: [HeroService], - directives: [ROUTER_DIRECTIVES] -}) -// #enddocregion -/* -// #docregion route-config -@Component({ ... }) -// #enddocregion route-config -*/ -// #docregion -// #docregion route-config -@RouteConfig([ -// #docregion route-defs - {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, - {path: '/heroes', name: 'Heroes', component: HeroListComponent}, - // #docregion hero-detail-route - {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent} - // #enddocregion hero-detail-route -// #enddocregion route-defs -]) -export class AppComponent { } -// #enddocregion route-config -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts deleted file mode 100644 index 68635e8aad..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/app.component.3.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; - -import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1'; -import { DialogService } from './dialog.service'; -import { HeroService } from './heroes/hero.service'; - -@Component({ - selector: 'my-app', -// #enddocregion - /* Typical link - // #docregion h-anchor - Heroes - // #enddocregion h-anchor - */ - /* Incomplete Crisis Center link when CC lacks a default - // #docregion cc-anchor-fail - // The link now fails with a "non-terminal link" error - // #docregion cc-anchor-w-default - Crisis Center - // #enddocregion cc-anchor-w-default - // #enddocregion cc-anchor-fail - */ - /* Crisis Center link when CC lacks a default - // #docregion cc-anchor-no-default - Crisis Center - // #enddocregion cc-anchor-no-default - */ - /* Crisis Center Detail link - // #docregion Dragon-anchor - Dragon Crisis - // #enddocregion Dragon-anchor - */ -// #docregion template - template: ` -

Component Router (Deprecated)

- - - `, -// #enddocregion template - providers: [DialogService, HeroService], - directives: [ROUTER_DIRECTIVES] -}) -@RouteConfig([ - {path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent}, -]) -export class AppComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/app.component.ts b/public/docs/_examples/router-deprecated/ts/app/app.component.ts deleted file mode 100644 index a6f784cda9..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/app.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; - -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { HeroListComponent } from './heroes/hero-list.component'; -import { HeroDetailComponent } from './heroes/hero-detail.component'; - -import { DialogService } from './dialog.service'; -import { HeroService } from './heroes/hero.service'; - -@Component({ - selector: 'my-app', -// #docregion template - template: ` -

Component Router (Deprecated)

- - - `, -// #enddocregion template - providers: [DialogService, HeroService], - directives: [ROUTER_DIRECTIVES] -}) -// #docregion route-config -@RouteConfig([ - - // #docregion route-config-cc - { // Crisis Center child route - path: '/crisis-center/...', - name: 'CrisisCenter', - component: CrisisCenterComponent, - useAsDefault: true - }, - // #enddocregion route-config-cc - - {path: '/heroes', name: 'Heroes', component: HeroListComponent}, - {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, -]) -// #enddocregion route-config -export class AppComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts deleted file mode 100644 index 6925fb8008..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.1.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component } from '@angular/core'; -import { RouteConfig, RouterOutlet } from '@angular/router-deprecated'; - -import { CrisisListComponent } from './crisis-list.component.1'; -import { CrisisDetailComponent } from './crisis-detail.component.1'; -import { CrisisService } from './crisis.service'; - -// #docregion minus-imports -@Component({ - template: ` -

CRISIS CENTER

- - `, - directives: [RouterOutlet], -// #docregion providers - providers: [CrisisService] -// #enddocregion providers -}) -// #docregion route-config -@RouteConfig([ - // #docregion default-route - {path: '/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, - // #enddocregion default-route - {path: '/:id', name: 'CrisisDetail', component: CrisisDetailComponent} -]) -// #enddocregion route-config -export class CrisisCenterComponent { } -// #enddocregion minus-imports diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts deleted file mode 100644 index 3c735ae6ae..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-center.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { RouteConfig, RouterOutlet } from '@angular/router-deprecated'; - -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; -import { CrisisService } from './crisis.service'; - -@Component({ - template: ` -

CRISIS CENTER

- - `, - directives: [RouterOutlet], - providers: [CrisisService] -}) -@RouteConfig([ - {path: '/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true}, - {path: '/:id', name: 'CrisisDetail', component: CrisisDetailComponent} -]) -export class CrisisCenterComponent { } -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts deleted file mode 100644 index 0c683853c9..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts +++ /dev/null @@ -1,95 +0,0 @@ -// #docplaster - -// #docregion -import { Component, OnInit } from '@angular/core'; -import { RouteParams, Router } from '@angular/router-deprecated'; -// #docregion routerCanDeactivate -import { CanDeactivate, ComponentInstruction } from '@angular/router-deprecated'; - -import { DialogService } from '../dialog.service'; - -// #enddocregion routerCanDeactivate -import { Crisis, CrisisService } from './crisis.service'; - -@Component({ - // #docregion template - template: ` -
-

"{{editName}}"

-
- {{crisis.id}}
-
- - -
-

- - -

-
- `, - // #enddocregion template - styles: ['input {width: 20em}'] -}) -// #docregion routerCanDeactivate, cancel-save -export class CrisisDetailComponent implements OnInit, CanDeactivate { - - crisis: Crisis; - editName: string; - -// #enddocregion routerCanDeactivate, cancel-save - constructor( - private service: CrisisService, - private router: Router, - private routeParams: RouteParams, - private dialog: DialogService - ) { } - - // #docregion ngOnInit - ngOnInit() { - let id = +this.routeParams.get('id'); - this.service.getCrisis(id).then(crisis => { - if (crisis) { - this.editName = crisis.name; - this.crisis = crisis; - } else { // id not found - this.gotoCrises(); - } - }); - } - // #enddocregion ngOnInit - - // #docregion routerCanDeactivate - routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): any { - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. - if (!this.crisis || this.crisis.name === this.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // promise which resolves to true or false when the user decides - return this.dialog.confirm('Discard changes?'); - } - // #enddocregion routerCanDeactivate - - // #docregion cancel-save - cancel() { - this.editName = this.crisis.name; - this.gotoCrises(); - } - - save() { - this.crisis.name = this.editName; - this.gotoCrises(); - } - // #enddocregion cancel-save - - // #docregion gotoCrises - gotoCrises() { - // Like Crisis Center -

"{{editName}}"

-
- {{crisis.id}}
-
- - -
-

- - -

- - `, - styles: ['input {width: 20em}'] -}) - -export class CrisisDetailComponent implements OnInit, CanDeactivate { - - crisis: Crisis; - editName: string; - - constructor( - private service: CrisisService, - private router: Router, - private routeParams: RouteParams, - private _dialog: DialogService - ) { } - - ngOnInit() { - let id = +this.routeParams.get('id'); - this.service.getCrisis(id).then(crisis => { - if (crisis) { - this.editName = crisis.name; - this.crisis = crisis; - } else { // id not found - this.gotoCrises(); - } - }); - } - - routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): any { - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. - if (!this.crisis || this.crisis.name === this.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // promise which resolves to true or false when the user decides - return this._dialog.confirm('Discard changes?'); - } - - cancel() { - this.editName = this.crisis.name; - this.gotoCrises(); - } - - save() { - this.crisis.name = this.editName; - this.gotoCrises(); - } - - // #docregion gotoCrises - gotoCrises() { - let crisisId = this.crisis ? this.crisis.id : null; - // Pass along the hero id if available - // so that the CrisisListComponent can select that hero. - // Add a totally useless `foo` parameter for kicks. - // #docregion gotoCrises-navigate - this.router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]); - // #enddocregion gotoCrises-navigate - } - // #enddocregion gotoCrises -} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts deleted file mode 100644 index 45121da69e..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docplaster - -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; - -import { Crisis, CrisisService } from './crisis.service'; - -@Component({ - // #docregion template - template: ` - - `, - // #enddocregion template -}) -export class CrisisListComponent implements OnInit { - crises: Crisis[]; - - constructor( - private service: CrisisService, - private router: Router) {} - - ngOnInit() { - this.service.getCrises().then(crises => this.crises = crises); - } - - // #docregion select - onSelect(crisis: Crisis) { - this.router.navigate(['CrisisDetail', { id: crisis.id }] ); - } - // #enddocregion select -} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts deleted file mode 100644 index a5770d256f..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docplaster - -// #docregion -import { Component, OnInit } from '@angular/core'; -import { RouteParams, Router } from '@angular/router-deprecated'; - -import { Crisis, CrisisService } from './crisis.service'; - -@Component({ - template: ` - - `, -}) -export class CrisisListComponent implements OnInit { - crises: Crisis[]; - - private selectedId: number; - - constructor( - private service: CrisisService, - private router: Router, - routeParams: RouteParams) { - this.selectedId = +routeParams.get('id'); - } - - isSelected(crisis: Crisis) { return crisis.id === this.selectedId; } - - ngOnInit() { - this.service.getCrises().then(crises => this.crises = crises); - } - - onSelect(crisis: Crisis) { - this.router.navigate( ['CrisisDetail', { id: crisis.id }] ); - } -} diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts deleted file mode 100644 index a847a15217..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; - -export class Crisis { - constructor(public id: number, public name: string) { } -} - -let crises = [ - new Crisis(1, 'Dragon Burning Cities'), - new Crisis(2, 'Sky Rains Great White Sharks'), - new Crisis(3, 'Giant Asteroid Heading For Earth'), - new Crisis(4, 'Procrastinators Meeting Delayed Again'), -]; - -let crisesPromise = Promise.resolve(crises); - -@Injectable() -export class CrisisService { - getCrises() { return crisesPromise; } - - getCrisis(id: number | string) { - return crisesPromise - .then(crises => crises.find(c => c.id === +id)); - } - -// #enddocregion - - static nextCrisisId = 100; - - addCrisis(name: string) { - name = name.trim(); - if (name) { - let crisis = new Crisis(CrisisService.nextCrisisId++, name); - crisesPromise.then(crises => crises.push(crisis)); - } - } -// #docregion -} -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts deleted file mode 100644 index 6caa3653b5..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-list.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// Initial empty version -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

CRISIS CENTER

-

Get your crisis here

` -}) -export class CrisisListComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts b/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts deleted file mode 100644 index 71a342cbe8..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/dialog.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -/** - * Async modal dialog service - * DialogService makes this app easier to test by faking this service. - * TODO: better modal implementation that doesn't use window.confirm - */ -@Injectable() -export class DialogService { - /** - * Ask user to confirm an action. `message` explains the action and choices. - * Returns promise resolving to `true`=confirm or `false`=cancel - */ - confirm(message?: string) { - return new Promise((resolve, reject) => - resolve(window.confirm(message || 'Is it OK?'))); - }; -} diff --git a/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts deleted file mode 100644 index 5dbbe17d8e..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/hero-list.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -/// Initial empty version -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

HEROES

-

Get your heroes here

` -}) -export class HeroListComponent { } diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts deleted file mode 100644 index ebfa0bf21d..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { RouteParams, Router } from '@angular/router-deprecated'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - template: ` -

HEROES

-
-

"{{hero.name}}"

-
- {{hero.id}}
-
- - -
-

- -

-
- `, -}) -export class HeroDetailComponent implements OnInit { - hero: Hero; - - // #docregion ctor - constructor( - private router: Router, - private routeParams: RouteParams, - private service: HeroService) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit() { - let id = this.routeParams.get('id'); - this.service.getHero(id).then(hero => this.hero = hero); - } - // #enddocregion ngOnInit - - // #docregion gotoHeroes - gotoHeroes() { - // Like Heroes - this.router.navigate(['Heroes']); - } - // #enddocregion gotoHeroes -} diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts deleted file mode 100644 index 10e73fd27b..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { RouteParams, Router } from '@angular/router-deprecated'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - template: ` -

HEROES

-
-

"{{hero.name}}"

-
- {{hero.id}}
-
- - -
-

- -

-
- `, -}) -export class HeroDetailComponent implements OnInit { - hero: Hero; - - // #docregion ctor - constructor( - private router: Router, - private routeParams: RouteParams, - private service: HeroService) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit() { - let id = this.routeParams.get('id'); - this.service.getHero(id).then(hero => this.hero = hero); - } - // #enddocregion ngOnInit - - // #docregion gotoHeroes - gotoHeroes() { - let heroId = this.hero ? this.hero.id : null; - // Pass along the hero id if available - // so that the HeroList component can select that hero. - // Add a totally useless `foo` parameter for kicks. - // #docregion gotoHeroes-navigate - this.router.navigate(['Heroes', {id: heroId, foo: 'foo'} ]); - // #enddocregion gotoHeroes-navigate - } - // #enddocregion gotoHeroes -} diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts deleted file mode 100644 index cb1d20327c..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts +++ /dev/null @@ -1,50 +0,0 @@ -// #docplaster - -// #docregion -// TODO SOMEDAY: Feature Componetized like HeroCenter -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - // #docregion template - template: ` -

HEROES

- - ` - // #enddocregion template -}) -export class HeroListComponent implements OnInit { - heroes: Hero[]; - - // #docregion ctor - constructor( - private router: Router, - private service: HeroService) { } - // #enddocregion ctor - - ngOnInit() { - this.service.getHeroes().then(heroes => this.heroes = heroes); - } - - // #docregion select - onSelect(hero: Hero) { - // #docregion nav-to-detail - this.router.navigate( ['HeroDetail', { id: hero.id }] ); - // #enddocregion nav-to-detail - } - // #enddocregion select -} -// #enddocregion - -/* A link parameters array -// #docregion link-parameters-array -['HeroDetail', { id: hero.id }] // {id: 15} -// #enddocregion link-parameters-array -*/ diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts deleted file mode 100644 index 1ca787592f..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster - -// TODO SOMEDAY: Feature Componetized like CrisisCenter -// #docregion -import { Component, OnInit } from '@angular/core'; -// #docregion import-route-params -import { RouteParams, Router } from '@angular/router-deprecated'; -// #enddocregion import-route-params - -import { Hero, HeroService } from './hero.service'; - -@Component({ - // #docregion template - template: ` -

HEROES

- - ` - // #enddocregion template -}) -export class HeroListComponent implements OnInit { - heroes: Hero[]; - - // #docregion ctor - private selectedId: number; - - constructor( - private service: HeroService, - private router: Router, - routeParams: RouteParams) { - this.selectedId = +routeParams.get('id'); - } - // #enddocregion ctor - - // #docregion isSelected - isSelected(hero: Hero) { return hero.id === this.selectedId; } - // #enddocregion isSelected - - // #docregion select - onSelect(hero: Hero) { - this.router.navigate( ['HeroDetail', { id: hero.id }] ); - } - // #enddocregion select - - ngOnInit() { - - - this.service.getHeroes().then(heroes => this.heroes = heroes); - } -} -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts deleted file mode 100644 index c819bd2632..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -export class Hero { - constructor(public id: number, public name: string) { } -} - -let HEROES = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan') -]; - -let heroesPromise = Promise.resolve(HEROES); - -@Injectable() -export class HeroService { - getHeroes() { return heroesPromise; } - - getHero(id: number | string) { - return heroesPromise - .then(heroes => heroes.find(h => h.id === +id)); - } -} diff --git a/public/docs/_examples/router-deprecated/ts/app/main.1.ts b/public/docs/_examples/router-deprecated/ts/app/main.1.ts deleted file mode 100644 index ce110455d4..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/main.1.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* First version */ -// #docplaster - -// #docregion all -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; - -import { AppComponent } from './app.component'; - -// #enddocregion all - -/* Can't use AppComponent ... but display as if we can -// #docregion all -bootstrap(AppComponent, [ -// #enddocregion all -*/ - -// Actually use the v.1 component -import { AppComponent as ac } from './app.component.1'; -bootstrap(ac, [ -// #docregion all - ROUTER_PROVIDERS -]); -// #enddocregion all diff --git a/public/docs/_examples/router-deprecated/ts/app/main.2.ts b/public/docs/_examples/router-deprecated/ts/app/main.2.ts deleted file mode 100644 index 74862cdd0a..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/main.2.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* Second version */ -// For Milestone #2 -// Also includes digression on HashPathStrategy (not used in the final app) -// #docplaster - -// #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; - -// Add these symbols to override the `LocationStrategy` -import { LocationStrategy, - HashLocationStrategy } from '@angular/common'; - -import { AppComponent } from './app.component'; -// #enddocregion -/* Can't use AppComponent ... but display as if we can -// #docregion - -bootstrap(AppComponent, [ -// #enddocregion -*/ - -// Actually use the v.2 component -import { AppComponent as ac } from './app.component.2'; - -bootstrap(ac, [ -// #docregion - ROUTER_PROVIDERS, - { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/ -]); -// #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/main.3.ts b/public/docs/_examples/router-deprecated/ts/app/main.3.ts deleted file mode 100644 index 9e9eb04721..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/main.3.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; - -import { AppComponent } from './app.component.3'; - -bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router-deprecated/ts/app/main.ts b/public/docs/_examples/router-deprecated/ts/app/main.ts deleted file mode 100644 index 08bbbef6e8..0000000000 --- a/public/docs/_examples/router-deprecated/ts/app/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; - -import { AppComponent } from './app.component'; - -bootstrap(AppComponent, [ROUTER_PROVIDERS]); diff --git a/public/docs/_examples/router-deprecated/ts/example-config.json b/public/docs/_examples/router-deprecated/ts/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/_examples/router-deprecated/ts/index.1.html b/public/docs/_examples/router-deprecated/ts/index.1.html deleted file mode 100644 index 53a6d4832f..0000000000 --- a/public/docs/_examples/router-deprecated/ts/index.1.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - Router (Deprecated) Sample v.1 - - - - - - - - - - - - - - - - -

Milestone 1

- loading... - - - - diff --git a/public/docs/_examples/router-deprecated/ts/index.2.html b/public/docs/_examples/router-deprecated/ts/index.2.html deleted file mode 100644 index d71bd929cb..0000000000 --- a/public/docs/_examples/router-deprecated/ts/index.2.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Router (Deprecated) Sample v.2 - - - - - - - - - - - - - - - - -

Milestone 2

- loading... - - - - diff --git a/public/docs/_examples/router-deprecated/ts/index.3.html b/public/docs/_examples/router-deprecated/ts/index.3.html deleted file mode 100644 index abbb771beb..0000000000 --- a/public/docs/_examples/router-deprecated/ts/index.3.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Router (Deprecated) Sample v.3 - - - - - - - - - - - - - - - - -

Milestone 3

- loading... - - - - diff --git a/public/docs/_examples/router-deprecated/ts/plnkr.json b/public/docs/_examples/router-deprecated/ts/plnkr.json deleted file mode 100644 index 91eff6fdb9..0000000000 --- a/public/docs/_examples/router-deprecated/ts/plnkr.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "description": "Router (Deprecated Beta)", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2,3].*", - "!app/crisis-list.component.ts", - "!app/hero-list.component.ts", - "!app/crisis-center/add-crisis.component.ts" - ], - "tags": ["router", "deprecated"] -} diff --git a/public/docs/_examples/router/e2e-spec.ts b/public/docs/_examples/router/e2e-spec.ts index bf672c3f01..a82ebd08a5 100644 --- a/public/docs/_examples/router/e2e-spec.ts +++ b/public/docs/_examples/router/e2e-spec.ts @@ -16,8 +16,8 @@ describe('Router', function () { crisisHref: hrefEles.get(0), crisisList: element.all(by.css('my-app > ng-component > ng-component li')), - crisisDetail: element(by.css('my-app > ng-component > ng-component > div')), - crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > div > h3')), + crisisDetail: element(by.css('my-app > ng-component > ng-component > ng-component > div')), + crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > ng-component > div > h3')), heroesHref: hrefEles.get(1), heroesList: element.all(by.css('my-app > ng-component li')), @@ -34,7 +34,7 @@ describe('Router', function () { expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices'); expect(page.crisisHref.getText()).toEqual('Crisis Center'); expect(page.heroesHref.getText()).toEqual('Heroes'); - expect(page.adminHref.getText()).toEqual('Crisis Admin'); + expect(page.adminHref.getText()).toEqual('Admin'); expect(page.loginHref.getText()).toEqual('Login'); }); @@ -118,7 +118,6 @@ describe('Router', function () { crisisText = text.substr(text.indexOf(' ')).trim(); return crisisEle.click(); }).then(function () { - expect(page.crisisList.count()).toBe(0, 'should no longer see crisis center entries'); expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); expect(page.crisisDetailTitle.getText()).toContain(crisisText); let inputEle = page.crisisDetail.element(by.css('input')); diff --git a/public/docs/_examples/router/ts/app/admin/admin-dashboard.component.1.ts b/public/docs/_examples/router/ts/app/admin/admin-dashboard.component.1.ts new file mode 100644 index 0000000000..ffa3e3cb8f --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin-dashboard.component.1.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + template: ` +

Dashboard

+ ` +}) +export class AdminDashboardComponent { } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts b/public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts old mode 100755 new mode 100644 similarity index 86% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts rename to public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts index 38fe14a38e..8c8e481643 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts +++ b/public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts @@ -6,15 +6,14 @@ import 'rxjs/add/operator/map'; @Component({ template: ` -

CRISIS ADMINISTRATION

-

Manage your crises here

+

Dashboard

Session ID: {{ sessionId | async }}

Token: {{ token | async }}

` }) -export class CrisisAdminComponent implements OnInit { +export class AdminDashboardComponent implements OnInit { sessionId: Observable; token: Observable; diff --git a/public/docs/_examples/router/ts/app/admin/admin.component.ts b/public/docs/_examples/router/ts/app/admin/admin.component.ts new file mode 100755 index 0000000000..30abfa4524 --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.component.ts @@ -0,0 +1,17 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + template: ` +

ADMIN

+ + + ` +}) +export class AdminComponent { +} diff --git a/public/docs/_examples/router/ts/app/admin/admin.module.ts b/public/docs/_examples/router/ts/app/admin/admin.module.ts new file mode 100644 index 0000000000..dce2ce30e2 --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.module.ts @@ -0,0 +1,28 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AdminComponent } from './admin.component'; +import { AdminDashboardComponent } from './admin-dashboard.component'; +import { ManageCrisesComponent } from './manage-crises.component'; +import { ManageHeroesComponent } from './manage-heroes.component'; + +import { adminRouting } from './admin.routing'; + +@NgModule({ + imports: [ + CommonModule, + adminRouting + ], + declarations: [ + AdminComponent, + AdminDashboardComponent, + ManageCrisesComponent, + ManageHeroesComponent + ] +}) +// #docregion admin-module-export +export class AdminModule {} +// #enddocregion admin-module-export +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts new file mode 100644 index 0000000000..a620f3ba51 --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts @@ -0,0 +1,31 @@ +// #docplaster +// #docregion +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AdminComponent } from './admin.component'; +import { AdminDashboardComponent } from './admin-dashboard.component'; +import { ManageCrisesComponent } from './manage-crises.component'; +import { ManageHeroesComponent } from './manage-heroes.component'; + +// #docregion admin-routes +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + children: [ + { + path: '', + children: [ + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } + ] + } + ] + } +]; + +export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes); +// #enddocregion admin-routes +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts new file mode 100644 index 0000000000..9fa3f10e4a --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts @@ -0,0 +1,37 @@ +// #docplaster +// #docregion +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AdminComponent } from './admin.component'; +import { AdminDashboardComponent } from './admin-dashboard.component'; +import { ManageCrisesComponent } from './manage-crises.component'; +import { ManageHeroesComponent } from './manage-heroes.component'; + +// #docregion admin-route, can-activate-child +import { AuthGuard } from '../auth-guard.service'; + +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ + { + path: '', + children: [ + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } + ], + // #enddocregion admin-route + // #docregion can-activate-child + canActivateChild: [AuthGuard] + // #docregion admin-route + } + ] + } +]; + +export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes); +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts new file mode 100644 index 0000000000..3b4051a819 --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts @@ -0,0 +1,35 @@ +// #docplaster +// #docregion +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AdminComponent } from './admin.component'; +import { AdminDashboardComponent } from './admin-dashboard.component'; +import { ManageCrisesComponent } from './manage-crises.component'; +import { ManageHeroesComponent } from './manage-heroes.component'; + +// #docregion admin-route +import { AuthGuard } from '../auth-guard.service'; + +// #docregion can-activate-child +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ + { + path: '', + canActivateChild: [AuthGuard], + children: [ + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } + ] + } + ] + } +]; + +export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes); +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.ts new file mode 100644 index 0000000000..bc5d13554c --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/admin.routing.ts @@ -0,0 +1,34 @@ +// #docplaster +// #docregion +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AdminComponent } from './admin.component'; +import { AdminDashboardComponent } from './admin-dashboard.component'; +import { ManageCrisesComponent } from './manage-crises.component'; +import { ManageHeroesComponent } from './manage-heroes.component'; + +// #docregion admin-route +import { AuthGuard } from '../auth-guard.service'; + +const adminRoutes: Routes = [ + { + path: '', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ + { + path: '', + canActivateChild: [AuthGuard], + children: [ + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } + ] + } + ] + } +]; + +export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes); +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts b/public/docs/_examples/router/ts/app/admin/manage-crises.component.ts similarity index 63% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts rename to public/docs/_examples/router/ts/app/admin/manage-crises.component.ts index a8dacc8549..d3176563eb 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts +++ b/public/docs/_examples/router/ts/app/admin/manage-crises.component.ts @@ -3,8 +3,7 @@ import { Component } from '@angular/core'; @Component({ template: ` -

CRISIS ADMINISTRATION

Manage your crises here

` }) -export class CrisisAdminComponent { } +export class ManageCrisesComponent { } diff --git a/public/docs/_examples/router/ts/app/admin/manage-heroes.component.ts b/public/docs/_examples/router/ts/app/admin/manage-heroes.component.ts new file mode 100644 index 0000000000..7f3a39893d --- /dev/null +++ b/public/docs/_examples/router/ts/app/admin/manage-heroes.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + template: ` +

Manage your heroes here

+ ` +}) +export class ManageHeroesComponent { } diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts index 1b0aba0044..21e9aa417d 100644 --- a/public/docs/_examples/router/ts/app/app.component.1.ts +++ b/public/docs/_examples/router/ts/app/app.component.1.ts @@ -6,7 +6,7 @@ import { Component } from '@angular/core'; selector: 'my-app', // #docregion template template: ` -

Component Router

+

Angular Router