#{subtitle} + a(href="https://github.com/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started + + announcement-bar + .announcement-bar-slide.clearfix + img(src="https://github.com/resources/images/logos/angular/angular-banner-logo-grey.png" width="64") + p Angular v4.0 is out! Smaller, faster, no biggie... + a(href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button md-button") Learn more + diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade index 308f02df21..bf346a6a3a 100644 --- a/public/_includes/_hero.jade +++ b/public/_includes/_hero.jade @@ -1,16 +1,41 @@ -- var textFormat = '' +//- template: public/_includes/_hero +//- Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates +- var textFormat = ''; - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : ''); +- var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } +- var useBadges = docType || stability; +//- renamer :: String -> String +//- Renames `Let` and `Var` into `Const` +- var renamer = function renamer(docType) { +- return (docType === 'Let' || docType === 'Var') ? 'Const' : docType +- } if current.path[4] && current.path[3] == 'api' - var textFormat = 'is-standard-case' -header(class="hero background-sky") - h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} +if current.path.indexOf('cheatsheet') > 0 || current.path[current.path.length-2] === 'api' + - var base = current.path[4] ? '../guide' : './guide'; + - var ngVersion = '(v
. 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;
+ }
+ }
+ 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');
+ }
+
+ 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;
+ }
+ }
+ 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')
+//- by prefixing it with '/ts/'. If title is not given,
+//- then the project-relative path is used, adjusted to remove numeric
+//- file version qualifiers; e.g. 'styles.1.css' becomes 'styles.css'.
+- var adjExampleProjPathAndTitle = function(ex/*:{filePath,title}*/) {
+- // 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.
+- // 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;
+- return ex;
+- };
+
+//- If the given path is project relative, then first convert it using
+//- adjExampleProjPathAndTitle(ex). Then the path is adjusted to match
+//- the documentation language.
+- var adjustExamplePathAndTitle = function(ex/*:{filePath,title}*/) {
+- // Not a doc folder relative path? Assume that it is app project relative.
+- if(isProjRelDir(ex.filePath)) adjExampleProjPathAndTitle(ex);
+- // Adjust doc folder relative paths if adjustment functions exist.
+- if(adjustTsExamplePathForDart) ex.filePath = adjustTsExamplePathForDart(ex.filePath);
+- if(adjustTsExampleTitleForDart) ex.title = adjustTsExampleTitleForDart(ex.title);
+- return ex;
+- };
+
+//- Returns truthy iff path is example project relative.
+- var isProjRelDir = function(path) {
+- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.ts');
+- // Last conjunct handles case for shared project e2e test file like
+- // cb-component-communication/e2e-spec.js (is shared between ts & dart)
+- // TODO: generalize: compare start with getExampleName(); which needs to be fixed.
+- };
+
+- var translatePath = function(filePath, region) {
+- filePath = filePath.trim();
+- var regionPad = (region && region.length) ? '-' + region.toString() : '';
+- var matches = /{(.*)}.*/.exec(filePath);
+- if (matches) {
+- var topLevelDir = matches[1];
+- var currentPath = current.path;
+- var subPaths = currentPath.slice(2);
+- // subPaths[subPaths.length - 1] = "_." + subPaths[subPaths.length - 1];
+- subPaths[subPaths.length - 1] = "_fragments/" + subPaths[subPaths.length - 1];
+- var newPath = getPathToDocs() + topLevelDir + '/' + subPaths.join("/");
+- var result = newPath + regionPad + ".jade";
+- } else {
+- var extn = getExtn(filePath);
+- var baseFileName = getBaseFileName(filePath);
+- var noExtnFileName = baseFileName.substr(0,baseFileName.length - (extn.length + 1));
+- var folder = getFolder(filePath);
+- // var result = folder + "/_." + noExtnFileName + regionPad + "." + extn;
+- var result = folder + "/_fragments/" + noExtnFileName + regionPad + "." + extn;
+- }
+- return result
+- }
+
- var EMPTY_STRINGS = [ '','','','','','',''];
@@ -106,6 +345,7 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
- return source;
- }
+
- var getFragFilePath = function (filePath, region) {
- filePath = filePath.trim();
- var extn = getExtn(filePath);
@@ -145,6 +385,16 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
- return ix > 0 ? fileName.substr(ix+1) : "";
- }
+- var getBaseFileName = function(fileName) {
+- var ix = fileName.lastIndexOf('/');
+- return ix > 0 ? fileName.substr(ix+1) : "";
+- }
+
+- var getFolder = function(fileName) {
+- var ix = fileName.lastIndexOf('/');
+- return ix > 0 ? fileName.substr(0, ix) : "";
+- }
+
- var getPathToDocs = function() {
- // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
- // from the current document
@@ -207,4 +457,4 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
- }
- }
- }
-- }
\ No newline at end of file
+- }
diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index 907f009656..d9ebe2b368 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -5,57 +5,73 @@
- var version = ''
- var page = ''
-
+//- Replace _ underscores with . dots
if current.path[2]
- var version = current.path[2].replace(/\_+/gm, ".")
-
-if current.path[3]
+if current.path[6]
+ if public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]][current.path[5]][current.path[6]]
+ - var page = current.path[3] + '/' + current.path[4] + '/' + current.path[5] + '/' + current.path[6] + '/'
+ else
+ - var page = current.path[3] + '/' + current.path[4] + '/' + current.path[5] + '/' + current.path[6] + '.html'
+
+else if current.path[5]
+ if public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]][current.path[5]]
+ - var page = current.path[3] + '/' + current.path[4] + '/' + current.path[5] + '/'
+ else
+ - var page = current.path[3] + '/' + current.path[4] + '/' + current.path[5] + '.html'
+
+else if current.path[4]
+ if public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
+ - var page = current.path[3] + '/' + current.path[4] + '/'
+ else
+ - var page = current.path[3] + '/' + current.path[4] + '.html'
+
+else if current.path[3]
if public.docs[current.path[1]][current.path[2]][current.path[3]]
- var page = 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'
+if current.path[4] !== 'change-log'
+ //- DROPDOWN BUTTON
+ nav.dropdown
+ button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}
+ div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
-
-nav.hero-subtitle.text-subhead.dropdown
- button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}
- div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
-
-
- div(class="dropdown-menu" ng-class="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
- li #{name} Angular 1 for JavaScript
- li #{name} Angular 1 for Dart
+ //- DROPDOWN MENU
+ 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):
+ - var isApiEntryPage = current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
+ if public.docs.dart && !isApiEntryPage
+ mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart")
diff --git a/public/_layout.jade b/public/_layout.jade
index cfa3adc596..6f01183b22 100644
--- a/public/_layout.jade
+++ b/public/_layout.jade
@@ -1,22 +1,33 @@
-doctype html public
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
- head
- != partial("/_includes/_head-include")
+if jade2ng
+ if hero == 'home'
+ != partial("/_includes/_hero-home")
+ else
+ != partial("/_includes/_hero")
+ != partial("../_includes/_banner")
+ - var format = autoformat ? 'docs-content' : ''
+ article(class="l-content #{format}")
+ != yield
+else
+ doctype html public
+ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+ head
+ != partial("/_includes/_head-include")
- body(class="l-offset-nav" ng-controller="AppCtrl")
- != partial("/_includes/_main-nav")
+ body.ng-cloak.l-offset-nav(ng-controller="AppCtrl as appCtrl")
+ != partial("/_includes/_main-nav")
-
- if hero == 'home'
- != partial("/_includes/_hero-home")
- else
- != partial("/_includes/_hero")
+
+ if hero == 'home'
+ != partial("/_includes/_hero-home")
+ else
+ != partial("/_includes/_hero")
- - var format = autoformat ? 'docs-content' : ''
+ - var format = autoformat ? 'docs-content' : ''
- article(class="l-content #{format}")
- != yield
+ article(class="l-content #{format}")
+ != yield
- != partial("/_includes/_footer")
- != partial("/_includes/_scripts-include")
\ No newline at end of file
+ != partial("/_includes/_footer")
+ != partial("/_includes/_scripts-include")
+ != partial("/_includes/_scripts-minimum")
diff --git a/public/about/index.jade b/public/about/index.jade
index b6b429b178..1150e51a56 100644
--- a/public/about/index.jade
+++ b/public/about/index.jade
@@ -22,7 +22,7 @@
for person, name in bios
if person.type == type
.c3
- md-card(biocard class="bio-card" website="#{person.website}" twitter="#{person.twitter}" pic="#{person.picture}" bio="#{person.bio}" name="#{person.name}")
+ md-card(biocard class="bio-card" website=person.website twitter=person.twitter pic=person.picture bio=person.bio name=person.name)
header
image(src="#{person.picture}" alt="#person.name")
diff --git a/public/cardboard/_data.json b/public/cardboard/_data.json
index 45c81997da..a092533354 100644
--- a/public/cardboard/_data.json
+++ b/public/cardboard/_data.json
@@ -1,7 +1,7 @@
{
"index": {
"title": "Angular Cardboard Hack-A-Thon",
- "subtitle": "Win a free ticket to ng-conf 2016",
+ "subtitle": "Winners Announced",
"autoformat": "true"
}
}
\ No newline at end of file
diff --git a/public/cardboard/index.jade b/public/cardboard/index.jade
index cb6a1ff1c6..a0a76d0e80 100644
--- a/public/cardboard/index.jade
+++ b/public/cardboard/index.jade
@@ -10,8 +10,7 @@ style(rel='stylesheet').
.c8.text-center
p.text-body.
- We love exciting new technologies, it’s one of the reasons we created Angular, and we love Google Cardboard. What could be better (or more fun) than combining the two?
- p Only the app you build and we can’t wait to see your ideas come to virtual life (literally!).
+ The results of the Angular Cardboard Hackathon are in!
- for (var i = 0; i < 5; i++)
img(src="https://github.com/resources/images/cardboard/cardboard.png" alt="" width="20%")
@@ -21,37 +20,25 @@ style(rel='stylesheet').
.c2
.c8
div.l-space-bottom-4.banner.is-centered.banner-ng-annoucement
- h2 Excited? So are we!
+ h2 Congratulations Albert Sanchez and Vlado Tešanović!
p.
- Submit your Angular Cardboard App before December 31, 2015
- and you could win a free ticket to ng-conf 2016! + Learn more about the winning entries on the Ionic blog. div.fake-centered - p Entries will be judged in two categories: + p Entries were judged in two categories: ul li Most Engaging App li. Best Technology Demonstration
- Huge hint: Angular 2 scores points + Huge hint: Angular scores points - p We’ve partnered with Ionic to give you a head’s start with this - img(src="https://github.com/resources/images/cardboard/Ionic_Logo.png" alt="" width="40%") - p - a(href="https://github.com/driftyco/ionic-starter-cardboard") Starter Template for Angular Cardboard - - h4 Ready? - p - a(href="https://docs.google.com/a/google.com/forms/d/1qHPldjf1VuR565IUhUDjz7VuC8dU_3WBF80zGi6xOss/edit") Sign-Up Here p Don’t have Cardboard and want one? Check out: p.text-center a(href="http://www.unofficialcardboard.com/") img(src="https://github.com/resources/images/cardboard/UC_Logo_Black.png" alt="Unofficial Cardboard" width="30%") h4 Rules of the Contest - p. - Changed your mind? That’s okay, we know stuff comes up, email us and - we will remove you from the contest and delete all of your submitted information. + p Terms and Conditions Link | Google Privacy Policy Link .c2 diff --git a/public/contribute.jade b/public/contribute.jade index 462388ec4a..994d46a36d 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -2,6 +2,13 @@ h2 Angular Projects p We'd love for you to contribute to our source code and to make Angular projects even better. + .l-sub-section + h3 Angular + + 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 + .l-sub-section h3 Angular for JavaScript or Dart @@ -16,7 +23,7 @@ p Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs). - a(href="https://github.com/angular/material/blob/master/docs/guides/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material + a(href="https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material .l-sub-section h3 AngularFire diff --git a/public/docs/ImageGuide.pdf b/public/docs/ImageGuide.pdf new file mode 100644 index 0000000000..21280dce88 Binary files /dev/null and b/public/docs/ImageGuide.pdf differ diff --git a/public/docs/README.md b/public/docs/README.md deleted file mode 100644 index 95d331b115..0000000000 --- a/public/docs/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Why the _fragments dir is checked in - -Within this repo files generated as a result of shredding the `_examples` dir ( the contents of the `_fragments` dir) are checked in so that we can avoid running the -shredder over the entire `_examples` dir each time someone refreshes the repo ( the `shred-full` gulp task). -The gulp `serve-and-watch` shredder is only a �partial� shredder. It only shred�s files in directories changed during -the current session. diff --git a/public/docs/_data.json b/public/docs/_data.json index daade7e3ea..121e4db32f 100644 --- a/public/docs/_data.json +++ b/public/docs/_data.json @@ -3,17 +3,5 @@ "title": "Angular Docs", "subtitle": "Choose a language for Angular", "layout": "../_layout" - }, - - "search": { - "title": "Docs Search Results", - "layout": "../_layout" - }, - - "styleguide": { - "title": "Docs Style Guide", - "subtitle": "Design & Layout Patterns For Documentation", - "layout": "../_layout", - "autoformat": "true" } } diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 288b9aca3a..3fb5ae8562 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -1,2 +1,18 @@ -typings -*.js.map \ No newline at end of file +# _boilerplate files +!_boilerplate/* +*/*/src/styles.css +*/*/src/systemjs-angular-loader.js +*/*/src/systemjs.config.js +*/*/src/tsconfig.json +*/*/bs-config.e2e.json +*/*/bs-config.json +*/*/package.json +*/*/tslint.json + +# example files +_test-output +protractor-helpers.js +*/e2e-spec.js +**/ts/**/*.js +**/js-es6*/**/*.js +**/ts-snippets/**/*.js diff --git a/public/docs/_examples/_boilerplate/bs-config.e2e.json b/public/docs/_examples/_boilerplate/bs-config.e2e.json new file mode 100644 index 0000000000..24570dbcc9 --- /dev/null +++ b/public/docs/_examples/_boilerplate/bs-config.e2e.json @@ -0,0 +1,14 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + }, + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/_boilerplate/bs-config.json b/public/docs/_examples/_boilerplate/bs-config.json new file mode 100644 index 0000000000..4e58595267 --- /dev/null +++ b/public/docs/_examples/_boilerplate/bs-config.json @@ -0,0 +1,8 @@ +{ + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + } + } +} diff --git a/public/docs/_examples/_boilerplate/example-config.json b/public/docs/_examples/_boilerplate/example-config.json new file mode 100644 index 0000000000..ff5403e6ca --- /dev/null +++ b/public/docs/_examples/_boilerplate/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build", + "run": "serve" +} diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json new file mode 100644 index 0000000000..2e4bc19f91 --- /dev/null +++ b/public/docs/_examples/_boilerplate/package.json @@ -0,0 +1,44 @@ +{ + "name": "angular-examples", + "version": "1.0.0", + "private": true, + "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.", + "scripts": { + "build": "tsc -p src/", + "build:watch": "tsc -p src/ -w", + "build:e2e": "tsc -p e2e/", + "serve": "lite-server -c=bs-config.json", + "serve:e2e": "lite-server -c=bs-config.e2e.json", + "prestart": "npm run build", + "start": "concurrently \"npm run build:watch\" \"npm run serve\"", + "pree2e": "webdriver-manager update && npm run build:e2e", + "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", + "protractor": "protractor protractor.config.js", + "pretest": "npm run build", + "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", + "pretest:once": "npm run build", + "test:once": "karma start karma.conf.js --single-run", + "lint": "tslint ./src/**/*.ts -t verbose", + + "build:upgrade": "tsc", + "serve:upgrade": "http-server", + "build:cli": "ng build --no-progress", + "serve:cli": "http-server dist/", + "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js", + "serve:aot": "lite-server -c bs-config.aot.json", + "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:babel": "babel src -d src --extensions \".es6\" --source-maps", + "copy-dist-files": "node ./copy-dist-files.js", + "i18n": "ng-xi18n" + }, + "keywords": [], + "author": "", + "license": "MIT", + "dependencies": {}, + "devDependencies": { + "angular-cli": "^1.0.0-rc.0" + }, + "repository": {} +} diff --git a/public/docs/_examples/_boilerplate/plnkr.json b/public/docs/_examples/_boilerplate/plnkr.json new file mode 100644 index 0000000000..5fb55b50ad --- /dev/null +++ b/public/docs/_examples/_boilerplate/plnkr.json @@ -0,0 +1,10 @@ +{ + "description": "QuickStart", + "basePath": "src/", + "files": [ + "app/app.component.ts", + "index.html" + ], + "open": "app/app.component.ts", + "tags": ["quickstart"] +} diff --git a/public/docs/_examples/_boilerplate/src/styles.css b/public/docs/_examples/_boilerplate/src/styles.css new file mode 100644 index 0000000000..d81835d0cd --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/styles.css @@ -0,0 +1,116 @@ +/* #docregion , quickstart, toh */ +/* Master Styles */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { + color: #444; + font-family: Arial, Helvetica, sans-serif; + font-weight: lighter; +} +body { + margin: 2em; +} +/* #enddocregion quickstart */ +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; +} +/* #enddocregion toh */ +a { + cursor: pointer; + cursor: hand; +} +button { + font-family: Arial; + background-color: #eee; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; + cursor: hand; +} +button:hover { + background-color: #cfd8dc; +} +button:disabled { + background-color: #eee; + color: #aaa; + cursor: auto; +} + +/* Navigation link styles */ +nav a { + padding: 5px 10px; + text-decoration: none; + margin-right: 10px; + margin-top: 10px; + display: inline-block; + background-color: #eee; + border-radius: 4px; +} +nav a:visited, a:link { + color: #607D8B; +} +nav a:hover { + color: #039be5; + background-color: #CFD8DC; +} +nav a.active { + color: #039be5; +} + +/* items class */ +.items { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 24em; +} +.items li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; +} +.items li:hover { + color: #607D8B; + background-color: #DDD; + left: .1em; +} +.items li.selected { + background-color: #CFD8DC; + color: white; +} +.items li.selected:hover { + background-color: #BBD8DC; +} +.items .text { + position: relative; + top: -3px; +} +.items .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} +/* #docregion toh */ +/* everywhere else */ +* { + font-family: Arial, Helvetica, sans-serif; +} diff --git a/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js new file mode 100644 index 0000000000..8b1005444e --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js @@ -0,0 +1,49 @@ +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + if (load.source.indexOf('moduleId') != -1) return load; + + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + if (!baseHref.startsWith('/base/')) { // it is not karma + basePath = basePath.replace(baseHref, ''); + } + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + var resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.js b/public/docs/_examples/_boilerplate/src/systemjs.config.js new file mode 100644 index 0000000000..ea7a3879ac --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.js @@ -0,0 +1,52 @@ +/** + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(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', + + // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.js', + defaultExtension: 'js', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js new file mode 100644 index 0000000000..5774fd8187 --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js @@ -0,0 +1,96 @@ +/** + * WEB VERSION FOR CURRENT ANGULAR BUILD + * (based on systemjs.config.js in angular.io) + * System configuration for Angular samples + * Adjust as necessary for your application needs. + * + * UNTESTED ! + */ +(function (global) { + System.config({ + // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER + transpiler: 'ts', + typescriptOptions: { + // Copy of compiler options in standard tsconfig.json + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es2015", "dom"], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + // paths serve as alias + 'npm:': 'https://unpkg.com/', + 'ng:': 'https://cdn.rawgit.com/angular/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + 'app': 'app', + + // angular bundles + '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js', + '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js', + '@angular/core': 'ng:core-builds/master/bundles/core.umd.js', + '@angular/common': 'ng:common-builds/master/bundles/common.umd.js', + '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js', + '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'ng:http-builds/master/bundles/http.umd.js', + '@angular/router': 'ng:router-builds/master/bundles/router.umd.js', + '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js', + '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js', + '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'ng:upgrade-builds/master/bundles/upgrade-static.umd.js', + + // angular testing umd bundles (overwrite the shim mappings) + '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js', + '@angular/common/testing': 'ng:common-builds/master/bundles/common-testing.umd.js', + '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js', + '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js', + '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js', + '@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js', + '@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js', + '@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs@5.0.1', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', + 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', + + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.ts', + defaultExtension: 'ts', + meta: { + './*.ts': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); + +})(this); + +/* +Copyright 2016 Google Inc. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at http://angular.io/license +*/ diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js new file mode 100644 index 0000000000..376fcdde8a --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js @@ -0,0 +1,83 @@ +/** + * WEB ANGULAR VERSION + * (based on systemjs.config.js in angular.io) + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER + transpiler: 'ts', + typescriptOptions: { + // Copy of compiler options in standard tsconfig.json + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es2015", "dom"], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + // paths serve as alias + 'npm:': 'https://unpkg.com/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + 'app': 'app', + + // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs@5.0.1', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', + 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', + + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.ts', + defaultExtension: 'ts', + meta: { + './*.ts': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); + +})(this); + +/* +Copyright 2016 Google Inc. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at http://angular.io/license +*/ diff --git a/public/docs/_examples/_boilerplate/src/tsconfig.json b/public/docs/_examples/_boilerplate/src/tsconfig.json new file mode 100644 index 0000000000..05839ec2ff --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ "es2015", "dom" ], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true, + "typeRoots": [ + "../../../node_modules/@types/" + ] + }, + "compileOnSave": true, + "exclude": [ + "node_modules/*", + "**/*-aot.ts" + ] +} diff --git a/public/docs/_examples/_boilerplate/tslint.json b/public/docs/_examples/_boilerplate/tslint.json new file mode 100644 index 0000000000..276453f4f5 --- /dev/null +++ b/public/docs/_examples/_boilerplate/tslint.json @@ -0,0 +1,93 @@ +{ + "rules": { + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "indent": [ + true, + "spaces" + ], + "label-position": true, + "label-undefined": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + "static-before-instance", + "variables-before-functions" + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-key": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-eval": true, + "no-inferrable-types": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unused-expression": true, + "no-unused-variable": true, + "no-unreachable": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ] + } +} diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts new file mode 100644 index 0000000000..4fba7ec475 --- /dev/null +++ b/public/docs/_examples/animations/e2e-spec.ts @@ -0,0 +1,351 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by, ElementFinder } from 'protractor'; +import { logging, promise } from 'selenium-webdriver'; + +/** + * The tests here basically just checking that the end styles + * of each animation are in effect. + * + * 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 + * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill + * may also add some introspection support. + */ +describe('Animation Tests', () => { + + const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)'; + const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)'; + const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/; + + beforeEach(() => { + browser.get(''); + }); + + describe('basic states', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-basic')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('styles inline in transitions', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-inline-styles')); + }); + + it('are not kept after animation', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('combined transition syntax', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-combined-transitions')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('two-way transition syntax', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-twoway')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('enter & leave', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-enter-leave')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('enter & leave & states', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-enter-leave-states')); + }); + + it('adds and removes and animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + + li.click(); + browser.driver.sleep(300); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('auto style calc', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-auto')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('height')).toBe('50px'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('different timings', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-timings')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('multiple keyframes', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-multistep')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('parallel groups', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-groups')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(700); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('adding active heroes', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-basic')); + }); + + it('animates between active and inactive', () => { + addActiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + }); + }); + + describe('callbacks', () => { + it('fires a callback on start and done', () => { + addActiveHero(); + browser.manage().logs().get(logging.Type.BROWSER) + .then((logs: logging.Entry[]) => { + 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(); + browser.driver.sleep(sleep); + } + + function addInactiveHero(sleep?: number) { + sleep = sleep || 500; + element(by.buttonText('Add inactive hero')).click(); + browser.driver.sleep(sleep); + } + + function removeHero(sleep?: number) { + sleep = sleep || 500; + element(by.buttonText('Remove hero')).click(); + browser.driver.sleep(sleep); + } + + function getScaleX(el: ElementFinder) { + return Promise.all([ + getBoundingClientWidth(el), + getOffsetWidth(el) + ]).then(function(promiseResolutions) { + let clientWidth = promiseResolutions[0]; + let offsetWidth = promiseResolutions[1]; + return clientWidth / offsetWidth; + }); + } + + function getBoundingClientWidth(el: ElementFinder): promise.Promise {
+ return browser.executeScript(
+ 'return arguments[0].getBoundingClientRect().width',
+ el.getWebElement()
+ );
+ }
+
+ function getOffsetWidth(el: ElementFinder): promise.Promise {
+ return browser.executeScript(
+ 'return arguments[0].offsetWidth',
+ el.getWebElement()
+ );
+ }
+});
diff --git a/public/docs/_examples/animations/ts/.gitignore b/public/docs/_examples/animations/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/animations/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/animations/ts/example-config.json b/public/docs/_examples/animations/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/animations/ts/plnkr.json b/public/docs/_examples/animations/ts/plnkr.json
new file mode 100644
index 0000000000..f047395e7f
--- /dev/null
+++ b/public/docs/_examples/animations/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "Angular Animations",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ]
+}
diff --git a/public/docs/_examples/animations/ts/src/app/app.module.ts b/public/docs/_examples/animations/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..0773357c58
--- /dev/null
+++ b/public/docs/_examples/animations/ts/src/app/app.module.ts
@@ -0,0 +1,38 @@
+// #docregion animations-module
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// #enddocregion animations-module
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+
+// #docregion animation-module
+@NgModule({
+ imports: [ BrowserModule, BrowserAnimationsModule ],
+ // #enddocregion animation-module
+ declarations: [
+ HeroTeamBuilderComponent,
+ HeroListBasicComponent,
+ HeroListInlineStylesComponent,
+ HeroListCombinedTransitionsComponent,
+ HeroListTwowayComponent,
+ HeroListEnterLeaveComponent,
+ HeroListEnterLeaveStatesComponent,
+ HeroListAutoComponent,
+ HeroListTimingsComponent,
+ HeroListMultistepComponent,
+ HeroListGroupsComponent
+ ],
+ bootstrap: [ HeroTeamBuilderComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts
new file mode 100644
index 0000000000..84b25c05de
--- /dev/null
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts
@@ -0,0 +1,47 @@
+import {
+ Component,
+ Input
+} from '@angular/core';
+import {
+ trigger,
+ state,
+ style,
+ animate,
+ transition
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+ selector: 'hero-list-auto',
+ // #docregion template
+ template: `
+ {
+
+ currentHeroes: Hero[] = [];
+
+ [Symbol.iterator]() {
+ return this.currentHeroes.values();
+ }
+
+ canAdd() {
+ return this.currentHeroes.length < ALL_HEROES.length;
+ }
+
+ canRemove() {
+ return this.currentHeroes.length > 0;
+ }
+
+ addActive() {
+ let hero = ALL_HEROES[this.currentHeroes.length];
+ hero.state = 'active';
+ this.currentHeroes.push(hero);
+ }
+
+ addInactive() {
+ let hero = ALL_HEROES[this.currentHeroes.length];
+ hero.state = 'inactive';
+ this.currentHeroes.push(hero);
+ }
+
+ remove() {
+ this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
+ }
+
+}
diff --git a/public/docs/_examples/animations/ts/src/index.html b/public/docs/_examples/animations/ts/src/index.html
new file mode 100644
index 0000000000..6c4a13adb2
--- /dev/null
+++ b/public/docs/_examples/animations/ts/src/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Animations
+ {
+ // Get hero id from the first
- and you could win a free ticket to ng-conf 2016! + Learn more about the winning entries on the Ionic blog. div.fake-centered - p Entries will be judged in two categories: + p Entries were judged in two categories: ul li Most Engaging App li. Best Technology Demonstration
- Huge hint: Angular 2 scores points + Huge hint: Angular scores points - p We’ve partnered with Ionic to give you a head’s start with this - img(src="https://github.com/resources/images/cardboard/Ionic_Logo.png" alt="" width="40%") - p - a(href="https://github.com/driftyco/ionic-starter-cardboard") Starter Template for Angular Cardboard - - h4 Ready? - p - a(href="https://docs.google.com/a/google.com/forms/d/1qHPldjf1VuR565IUhUDjz7VuC8dU_3WBF80zGi6xOss/edit") Sign-Up Here p Don’t have Cardboard and want one? Check out: p.text-center a(href="http://www.unofficialcardboard.com/") img(src="https://github.com/resources/images/cardboard/UC_Logo_Black.png" alt="Unofficial Cardboard" width="30%") h4 Rules of the Contest - p. - Changed your mind? That’s okay, we know stuff comes up, email us and - we will remove you from the contest and delete all of your submitted information. + p Terms and Conditions Link | Google Privacy Policy Link .c2 diff --git a/public/contribute.jade b/public/contribute.jade index 462388ec4a..994d46a36d 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -2,6 +2,13 @@ h2 Angular Projects p We'd love for you to contribute to our source code and to make Angular projects even better. + .l-sub-section + h3 Angular + + 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 + .l-sub-section h3 Angular for JavaScript or Dart @@ -16,7 +23,7 @@ p Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs). - a(href="https://github.com/angular/material/blob/master/docs/guides/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material + a(href="https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material .l-sub-section h3 AngularFire diff --git a/public/docs/ImageGuide.pdf b/public/docs/ImageGuide.pdf new file mode 100644 index 0000000000..21280dce88 Binary files /dev/null and b/public/docs/ImageGuide.pdf differ diff --git a/public/docs/README.md b/public/docs/README.md deleted file mode 100644 index 95d331b115..0000000000 --- a/public/docs/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Why the _fragments dir is checked in - -Within this repo files generated as a result of shredding the `_examples` dir ( the contents of the `_fragments` dir) are checked in so that we can avoid running the -shredder over the entire `_examples` dir each time someone refreshes the repo ( the `shred-full` gulp task). -The gulp `serve-and-watch` shredder is only a �partial� shredder. It only shred�s files in directories changed during -the current session. diff --git a/public/docs/_data.json b/public/docs/_data.json index daade7e3ea..121e4db32f 100644 --- a/public/docs/_data.json +++ b/public/docs/_data.json @@ -3,17 +3,5 @@ "title": "Angular Docs", "subtitle": "Choose a language for Angular", "layout": "../_layout" - }, - - "search": { - "title": "Docs Search Results", - "layout": "../_layout" - }, - - "styleguide": { - "title": "Docs Style Guide", - "subtitle": "Design & Layout Patterns For Documentation", - "layout": "../_layout", - "autoformat": "true" } } diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 288b9aca3a..3fb5ae8562 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -1,2 +1,18 @@ -typings -*.js.map \ No newline at end of file +# _boilerplate files +!_boilerplate/* +*/*/src/styles.css +*/*/src/systemjs-angular-loader.js +*/*/src/systemjs.config.js +*/*/src/tsconfig.json +*/*/bs-config.e2e.json +*/*/bs-config.json +*/*/package.json +*/*/tslint.json + +# example files +_test-output +protractor-helpers.js +*/e2e-spec.js +**/ts/**/*.js +**/js-es6*/**/*.js +**/ts-snippets/**/*.js diff --git a/public/docs/_examples/_boilerplate/bs-config.e2e.json b/public/docs/_examples/_boilerplate/bs-config.e2e.json new file mode 100644 index 0000000000..24570dbcc9 --- /dev/null +++ b/public/docs/_examples/_boilerplate/bs-config.e2e.json @@ -0,0 +1,14 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + }, + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/_boilerplate/bs-config.json b/public/docs/_examples/_boilerplate/bs-config.json new file mode 100644 index 0000000000..4e58595267 --- /dev/null +++ b/public/docs/_examples/_boilerplate/bs-config.json @@ -0,0 +1,8 @@ +{ + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + } + } +} diff --git a/public/docs/_examples/_boilerplate/example-config.json b/public/docs/_examples/_boilerplate/example-config.json new file mode 100644 index 0000000000..ff5403e6ca --- /dev/null +++ b/public/docs/_examples/_boilerplate/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build", + "run": "serve" +} diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json new file mode 100644 index 0000000000..2e4bc19f91 --- /dev/null +++ b/public/docs/_examples/_boilerplate/package.json @@ -0,0 +1,44 @@ +{ + "name": "angular-examples", + "version": "1.0.0", + "private": true, + "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.", + "scripts": { + "build": "tsc -p src/", + "build:watch": "tsc -p src/ -w", + "build:e2e": "tsc -p e2e/", + "serve": "lite-server -c=bs-config.json", + "serve:e2e": "lite-server -c=bs-config.e2e.json", + "prestart": "npm run build", + "start": "concurrently \"npm run build:watch\" \"npm run serve\"", + "pree2e": "webdriver-manager update && npm run build:e2e", + "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", + "protractor": "protractor protractor.config.js", + "pretest": "npm run build", + "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", + "pretest:once": "npm run build", + "test:once": "karma start karma.conf.js --single-run", + "lint": "tslint ./src/**/*.ts -t verbose", + + "build:upgrade": "tsc", + "serve:upgrade": "http-server", + "build:cli": "ng build --no-progress", + "serve:cli": "http-server dist/", + "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js", + "serve:aot": "lite-server -c bs-config.aot.json", + "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:babel": "babel src -d src --extensions \".es6\" --source-maps", + "copy-dist-files": "node ./copy-dist-files.js", + "i18n": "ng-xi18n" + }, + "keywords": [], + "author": "", + "license": "MIT", + "dependencies": {}, + "devDependencies": { + "angular-cli": "^1.0.0-rc.0" + }, + "repository": {} +} diff --git a/public/docs/_examples/_boilerplate/plnkr.json b/public/docs/_examples/_boilerplate/plnkr.json new file mode 100644 index 0000000000..5fb55b50ad --- /dev/null +++ b/public/docs/_examples/_boilerplate/plnkr.json @@ -0,0 +1,10 @@ +{ + "description": "QuickStart", + "basePath": "src/", + "files": [ + "app/app.component.ts", + "index.html" + ], + "open": "app/app.component.ts", + "tags": ["quickstart"] +} diff --git a/public/docs/_examples/_boilerplate/src/styles.css b/public/docs/_examples/_boilerplate/src/styles.css new file mode 100644 index 0000000000..d81835d0cd --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/styles.css @@ -0,0 +1,116 @@ +/* #docregion , quickstart, toh */ +/* Master Styles */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { + color: #444; + font-family: Arial, Helvetica, sans-serif; + font-weight: lighter; +} +body { + margin: 2em; +} +/* #enddocregion quickstart */ +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; +} +/* #enddocregion toh */ +a { + cursor: pointer; + cursor: hand; +} +button { + font-family: Arial; + background-color: #eee; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; + cursor: hand; +} +button:hover { + background-color: #cfd8dc; +} +button:disabled { + background-color: #eee; + color: #aaa; + cursor: auto; +} + +/* Navigation link styles */ +nav a { + padding: 5px 10px; + text-decoration: none; + margin-right: 10px; + margin-top: 10px; + display: inline-block; + background-color: #eee; + border-radius: 4px; +} +nav a:visited, a:link { + color: #607D8B; +} +nav a:hover { + color: #039be5; + background-color: #CFD8DC; +} +nav a.active { + color: #039be5; +} + +/* items class */ +.items { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 24em; +} +.items li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; +} +.items li:hover { + color: #607D8B; + background-color: #DDD; + left: .1em; +} +.items li.selected { + background-color: #CFD8DC; + color: white; +} +.items li.selected:hover { + background-color: #BBD8DC; +} +.items .text { + position: relative; + top: -3px; +} +.items .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} +/* #docregion toh */ +/* everywhere else */ +* { + font-family: Arial, Helvetica, sans-serif; +} diff --git a/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js new file mode 100644 index 0000000000..8b1005444e --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js @@ -0,0 +1,49 @@ +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + if (load.source.indexOf('moduleId') != -1) return load; + + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + if (!baseHref.startsWith('/base/')) { // it is not karma + basePath = basePath.replace(baseHref, ''); + } + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + var resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.js b/public/docs/_examples/_boilerplate/src/systemjs.config.js new file mode 100644 index 0000000000..ea7a3879ac --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.js @@ -0,0 +1,52 @@ +/** + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(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', + + // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.js', + defaultExtension: 'js', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js new file mode 100644 index 0000000000..5774fd8187 --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js @@ -0,0 +1,96 @@ +/** + * WEB VERSION FOR CURRENT ANGULAR BUILD + * (based on systemjs.config.js in angular.io) + * System configuration for Angular samples + * Adjust as necessary for your application needs. + * + * UNTESTED ! + */ +(function (global) { + System.config({ + // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER + transpiler: 'ts', + typescriptOptions: { + // Copy of compiler options in standard tsconfig.json + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es2015", "dom"], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + // paths serve as alias + 'npm:': 'https://unpkg.com/', + 'ng:': 'https://cdn.rawgit.com/angular/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + 'app': 'app', + + // angular bundles + '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js', + '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js', + '@angular/core': 'ng:core-builds/master/bundles/core.umd.js', + '@angular/common': 'ng:common-builds/master/bundles/common.umd.js', + '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js', + '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'ng:http-builds/master/bundles/http.umd.js', + '@angular/router': 'ng:router-builds/master/bundles/router.umd.js', + '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js', + '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js', + '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'ng:upgrade-builds/master/bundles/upgrade-static.umd.js', + + // angular testing umd bundles (overwrite the shim mappings) + '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js', + '@angular/common/testing': 'ng:common-builds/master/bundles/common-testing.umd.js', + '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js', + '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js', + '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js', + '@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js', + '@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js', + '@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs@5.0.1', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', + 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', + + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.ts', + defaultExtension: 'ts', + meta: { + './*.ts': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); + +})(this); + +/* +Copyright 2016 Google Inc. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at http://angular.io/license +*/ diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js new file mode 100644 index 0000000000..376fcdde8a --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js @@ -0,0 +1,83 @@ +/** + * WEB ANGULAR VERSION + * (based on systemjs.config.js in angular.io) + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER + transpiler: 'ts', + typescriptOptions: { + // Copy of compiler options in standard tsconfig.json + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es2015", "dom"], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + // paths serve as alias + 'npm:': 'https://unpkg.com/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + 'app': 'app', + + // angular bundles + '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs@5.0.1', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', + 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', + 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', + + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.ts', + defaultExtension: 'ts', + meta: { + './*.ts': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); + +})(this); + +/* +Copyright 2016 Google Inc. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at http://angular.io/license +*/ diff --git a/public/docs/_examples/_boilerplate/src/tsconfig.json b/public/docs/_examples/_boilerplate/src/tsconfig.json new file mode 100644 index 0000000000..05839ec2ff --- /dev/null +++ b/public/docs/_examples/_boilerplate/src/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ "es2015", "dom" ], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true, + "typeRoots": [ + "../../../node_modules/@types/" + ] + }, + "compileOnSave": true, + "exclude": [ + "node_modules/*", + "**/*-aot.ts" + ] +} diff --git a/public/docs/_examples/_boilerplate/tslint.json b/public/docs/_examples/_boilerplate/tslint.json new file mode 100644 index 0000000000..276453f4f5 --- /dev/null +++ b/public/docs/_examples/_boilerplate/tslint.json @@ -0,0 +1,93 @@ +{ + "rules": { + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "indent": [ + true, + "spaces" + ], + "label-position": true, + "label-undefined": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + "static-before-instance", + "variables-before-functions" + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-key": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-eval": true, + "no-inferrable-types": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unused-expression": true, + "no-unused-variable": true, + "no-unreachable": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ] + } +} diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts new file mode 100644 index 0000000000..4fba7ec475 --- /dev/null +++ b/public/docs/_examples/animations/e2e-spec.ts @@ -0,0 +1,351 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by, ElementFinder } from 'protractor'; +import { logging, promise } from 'selenium-webdriver'; + +/** + * The tests here basically just checking that the end styles + * of each animation are in effect. + * + * 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 + * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill + * may also add some introspection support. + */ +describe('Animation Tests', () => { + + const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)'; + const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)'; + const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/; + + beforeEach(() => { + browser.get(''); + }); + + describe('basic states', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-basic')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('styles inline in transitions', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-inline-styles')); + }); + + it('are not kept after animation', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('combined transition syntax', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-combined-transitions')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('two-way transition syntax', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-twoway')); + }); + + it('animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + }); + + }); + + describe('enter & leave', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-enter-leave')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('enter & leave & states', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-enter-leave-states')); + }); + + it('adds and removes and animates between active and inactive', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + + li.click(); + browser.driver.sleep(300); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('auto style calc', () => { + + let host: ElementFinder; + + beforeEach(function() { + host = element(by.css('hero-list-auto')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('height')).toBe('50px'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('different timings', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-timings')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('multiple keyframes', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-multistep')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('parallel groups', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-groups')); + }); + + it('adds and removes element', () => { + addInactiveHero(); + + let li = host.element(by.css('li')); + expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); + expect(li.getCssValue('opacity')).toMatch('1'); + + removeHero(700); + expect(li.isPresent()).toBe(false); + }); + + }); + + describe('adding active heroes', () => { + + let host: ElementFinder; + + beforeEach(() => { + host = element(by.css('hero-list-basic')); + }); + + it('animates between active and inactive', () => { + addActiveHero(); + + let li = host.element(by.css('li')); + + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.0); + expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); + + li.click(); + browser.driver.sleep(300); + expect(getScaleX(li)).toBe(1.1); + expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); + }); + }); + + describe('callbacks', () => { + it('fires a callback on start and done', () => { + addActiveHero(); + browser.manage().logs().get(logging.Type.BROWSER) + .then((logs: logging.Entry[]) => { + 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(); + browser.driver.sleep(sleep); + } + + function addInactiveHero(sleep?: number) { + sleep = sleep || 500; + element(by.buttonText('Add inactive hero')).click(); + browser.driver.sleep(sleep); + } + + function removeHero(sleep?: number) { + sleep = sleep || 500; + element(by.buttonText('Remove hero')).click(); + browser.driver.sleep(sleep); + } + + function getScaleX(el: ElementFinder) { + return Promise.all([ + getBoundingClientWidth(el), + getOffsetWidth(el) + ]).then(function(promiseResolutions) { + let clientWidth = promiseResolutions[0]; + let offsetWidth = promiseResolutions[1]; + return clientWidth / offsetWidth; + }); + } + + function getBoundingClientWidth(el: ElementFinder): promise.Promise
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
-
+
- + {{hero.name}} + +
+
+
+
+ Basic State
+Switch between active/inactive on click.
+
+
+ Styles inline in transitions
+Animated effect on click, no persistend end styles.
+
+
+ Combined transition syntax
+Switch between active/inactive on click. Define just one transition used in both directions.
+
+
+ Two-way transition syntax
+Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.
+
+
+ Enter & Leave
+Enter and leave animations using the void state.
+
+
+ `,
+ styles: [`
+ .buttons {
+ text-align: center;
+ }
+ button {
+ padding: 1.5em 3em;
+ }
+ .columns {
+ display: flex;
+ flex-direction: row;
+ }
+ .column {
+ flex: 1;
+ padding: 10px;
+ }
+ .column p {
+ min-height: 6em;
+ }
+ `],
+ providers: [Heroes]
+})
+export class HeroTeamBuilderComponent {
+ constructor(private heroes: Heroes) { }
+}
diff --git a/public/docs/_examples/animations/ts/src/app/hero.service.ts b/public/docs/_examples/animations/ts/src/app/hero.service.ts
new file mode 100644
index 0000000000..6bdeb5a512
--- /dev/null
+++ b/public/docs/_examples/animations/ts/src/app/hero.service.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+
+class Hero {
+ constructor(public name: string,
+ public state = 'inactive') {
+ }
+
+ toggleState() {
+ this.state = (this.state === 'active' ? 'inactive' : 'active');
+ }
+}
+
+let ALL_HEROES = [
+ 'Windstorm',
+ 'RubberMan',
+ 'Bombasto',
+ 'Magneta',
+ 'Dynama',
+ 'Narco',
+ 'Celeritas',
+ 'Dr IQ',
+ 'Magma',
+ 'Tornado',
+ 'Mr. Nice'
+].map(name => new Hero(name));
+
+@Injectable()
+export class Heroes implements Iterable
+
+ Enter & Leave & States
++ Enter and leave animations combined with active/inactive state animations. + Different enter and leave transitions depending on state. +
+
+
+ Auto Style Calc
+Leave animation from the current computed height using the auto-style value *.
+
+
+ Different Timings
+Enter and leave animations with different easings, ease-in for enter, ease-out for leave.
+
+
+ Multiple Keyframes
+Enter and leave animations with three keyframes in each, to give the transition some bounce.
+
+
+ Parallel Groups
+Enter and leave animations with multiple properties animated in parallel with different timings.
+External H1 Title for E2E test
+
+ // let _id = await detail.all(by.css('div')).first().getText();
+ let _id = await detail.all(by.css('div')).first().getText();
+ // Get name from the h2
+ // let _name = await detail.element(by.css('h4')).getText();
+ let _name = await detail.element(by.css('h4')).getText();
+ return {
+ id: +_id.substr(_id.indexOf(' ') + 1),
+ name: _name.substr(0, _name.lastIndexOf(' '))
+ };
+}
diff --git a/public/docs/_examples/architecture/ts/example-config.json b/public/docs/_examples/architecture/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/architecture/ts/plnkr.json b/public/docs/_examples/architecture/ts/plnkr.json
new file mode 100644
index 0000000000..b2f47131df
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Intro to Angular",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!app/hero-list.component.1.*"
+ ]
+}
diff --git a/public/docs/_examples/architecture/ts/src/app/app.component.ts b/public/docs/_examples/architecture/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..b987f17e44
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/app.component.ts
@@ -0,0 +1,14 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+@Component({
+ selector: 'my-app',
+ template: `
+ ): PromiseLike {
+ if (type === Hero) {
+ // TODO get from the database
+ return Promise.resolve(HEROES);
+ }
+ let err = new Error('Cannot get object of this type');
+ this.logger.error(err);
+ throw err;
+ }
+}
diff --git a/public/docs/_examples/architecture/ts/src/app/hero-detail.component.html b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.html
new file mode 100644
index 0000000000..224de8bb86
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.html
@@ -0,0 +1,9 @@
+
+{{hero.name}}
+Architecture of Angular
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/architecture/ts/src/main.ts b/public/docs/_examples/architecture/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/attribute-directives/e2e-spec.ts b/public/docs/_examples/attribute-directives/e2e-spec.ts
new file mode 100644
index 0000000000..79425d7923
--- /dev/null
+++ b/public/docs/_examples/attribute-directives/e2e-spec.ts
@@ -0,0 +1,31 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Attribute directives', function () {
+
+ let _title = 'My First Attribute Directive';
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it(`should display correct title: ${_title}`, function () {
+ expect(element(by.css('h1')).getText()).toEqual(_title);
+ });
+
+ it('should be able to select green highlight', function () {
+ let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
+ let lightGreen = 'rgba(144, 238, 144, 1)';
+
+ expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
+ // let greenRb = element(by.cssContainingText('input', 'Green'));
+ let greenRb = element.all(by.css('input')).get(0);
+ greenRb.click().then(function() {
+ // TypeScript Todo: find the right type for highlightedEle
+ browser.actions().mouseMove(highlightedEle as any).perform();
+ expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
+ });
+
+ });
+});
diff --git a/public/docs/_examples/attribute-directives/ts/example-config.json b/public/docs/_examples/attribute-directives/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/attribute-directives/ts/plnkr.json b/public/docs/_examples/attribute-directives/ts/plnkr.json
new file mode 100644
index 0000000000..112e1de6f4
--- /dev/null
+++ b/public/docs/_examples/attribute-directives/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Attribute Directive",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!app/*.[1,2,3].*"
+ ],
+ "tags": ["attribute", "directive"]
+}
diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html
new file mode 100644
index 0000000000..9505bc9dff
--- /dev/null
+++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html
@@ -0,0 +1,14 @@
+
+
+Attribute Directives
+ loading...
+
+
diff --git a/public/docs/_examples/attribute-directives/ts/src/main.ts b/public/docs/_examples/attribute-directives/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/attribute-directives/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts b/public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts
new file mode 100644
index 0000000000..81a5faa5e7
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts
@@ -0,0 +1,115 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('AngularJS to Angular Quick Reference Tests', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should display no poster images after bootstrap', function () {
+ testImagesAreDisplayed(false);
+ });
+
+ it('should display proper movie data', function () {
+ // We check only a few samples
+ let expectedSamples: any[] = [
+ {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
+ {row: 0, column: 2, value: 'Celeritas'},
+ {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
+ {row: 1, column: 5, value: '$14.95'},
+ {row: 2, column: 4, value: 'PG-13'},
+ {row: 2, column: 7, value: '100%'},
+ {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true},
+ ];
+
+ // Go through the samples
+ let movieRows = getMovieRows();
+ for (let i = 0; i < expectedSamples.length; i++) {
+ let sample = expectedSamples[i];
+ let tableCell = movieRows.get(sample.row)
+ .all(by.tagName('td')).get(sample.column);
+ // Check the cell or its nested element
+ let elementToCheck = sample.element
+ ? tableCell.element(by.tagName(sample.element))
+ : tableCell;
+
+ // Check element attribute or text
+ let valueToCheck = sample.attr
+ ? elementToCheck.getAttribute(sample.attr)
+ : elementToCheck.getText();
+
+ // Test for equals/contains/match
+ if (sample.contains) {
+ expect(valueToCheck).toContain(sample.value);
+ } else if (sample.matches) {
+ expect(valueToCheck).toMatch(sample.matches);
+ } else {
+ expect(valueToCheck).toEqual(sample.value);
+ }
+ }
+ });
+
+ it('should display images after Show Poster', function () {
+ testPosterButtonClick('Show Poster', true);
+ });
+
+ it('should hide images after Hide Poster', function () {
+ testPosterButtonClick('Hide Poster', false);
+ });
+
+ it('should display no movie when no favorite hero is specified', function () {
+ testFavoriteHero(null, 'Please enter your favorite hero.');
+ });
+
+ it('should display no movie for Magneta', function () {
+ testFavoriteHero('Magneta', 'No movie, sorry!');
+ });
+
+ it('should display a movie for Mr. Nice', function () {
+ testFavoriteHero('Mr. Nice', 'Excellent choice!');
+ });
+
+ function testImagesAreDisplayed(isDisplayed: boolean) {
+ let expectedMovieCount = 3;
+
+ let movieRows = getMovieRows();
+ expect(movieRows.count()).toBe(expectedMovieCount);
+ for (let i = 0; i < expectedMovieCount; i++) {
+ let movieImage = movieRows.get(i).element(by.css('td > img'));
+ expect(movieImage.isDisplayed()).toBe(isDisplayed);
+ }
+ }
+
+ function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+ let posterButton = element(by.css('movie-list tr > th > button'));
+ expect(posterButton.getText()).toBe(expectedButtonText);
+
+ posterButton.click().then(function () {
+ testImagesAreDisplayed(isDisplayed);
+ });
+ }
+
+ function getMovieRows() {
+ return element.all(by.css('movie-list tbody > tr'));
+ }
+
+ function testFavoriteHero(heroName: string, expectedLabel: string) {
+ let movieListComp = element(by.tagName('movie-list'));
+ let heroInput = movieListComp.element(by.tagName('input'));
+ let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+ let resultLabel = movieListComp.element(by.css('span > p'));
+
+ heroInput.clear().then(function () {
+ heroInput.sendKeys(heroName || '');
+ expect(resultLabel.getText()).toBe(expectedLabel);
+ if (heroName) {
+ expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+ expect(favoriteHeroLabel.getText()).toContain(heroName);
+ } else {
+ expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+ }
+ });
+ }
+});
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json b/public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json b/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json
new file mode 100644
index 0000000000..1ff34275f7
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "AngularJS to Angular Quick Reference",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ],
+ "tags":["cookbook", "angularjs"]
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..a7cbe8a74d
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MovieListComponent } from './movie-list.component';
+
+const routes: Routes = [
+ { path: '', redirectTo: '/movies', pathMatch: 'full' },
+ { path: 'movies', component: MovieListComponent }
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.css
new file mode 100644
index 0000000000..e454e9ea87
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.css
@@ -0,0 +1,9 @@
+.active {font-style: italic;}
+.shazam {font-weight: bold;}
+
+img {height: 100px;}
+
+table td {
+ padding: 4px;
+ border: 1px solid #e0e0e0;
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.html b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.html
new file mode 100644
index 0000000000..72fd3de86f
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.html
@@ -0,0 +1,112 @@
+
+
+ +
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..e1b71e37dc
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+import { MovieService } from './movie.service';
+import { IMovie } from './movie';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html',
+ styleUrls: [ './app.component.css' ],
+ providers: [ MovieService ]
+})
+export class AppComponent {
+
+ angularDocsUrl = 'https://angular.io/';
+ colorPreference = 'red';
+ eventType = '';
+ isActive = true;
+ isImportant = true;
+ movie: IMovie = null;
+ movies: IMovie[] = [];
+ showImage = true;
+ title: string = 'AngularJS to Angular Quick Ref Cookbook';
+ toggleImage(event: UIEvent) {
+ this.showImage = !this.showImage;
+ this.eventType = (event && event.type) || 'not provided';
+ }
+
+ constructor(movieService: MovieService) {
+ this.movies = movieService.getMovies();
+ this.movie = this.movies[0];
+ }
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts
new file mode 100644
index 0000000000..5b24020186
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..1dc46ad17c
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.module.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ AppRoutingModule
+ ],
+ declarations: [
+ AppComponent,
+ MovieListComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts
new file mode 100644
index 0000000000..e1421fa530
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts
@@ -0,0 +1,14 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Injectable()
+// #docregion date-pipe
+@Pipe({name: 'date', pure: true})
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
+ transform(value: any, format: string): string {
+ value = typeof value === 'string' ?
+ Date.parse(value) : value;
+ return super.transform(value, format);
+ }
+}
+// #enddocregion date-pipe
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
new file mode 100644
index 0000000000..a3d5bf8161
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
@@ -0,0 +1,57 @@
+div {
+ font-family:Arial, Helvetica, sans-serif;
+ margin:20px;
+}
+
+table {
+ font-family:Arial, Helvetica, sans-serif;
+ color:#666;
+ font-size:14px;
+ text-shadow: 1px 1px 0 #fff;
+ margin:20px;
+ border:#ccc 1px solid;
+
+ -moz-border-radius:3px;
+ -webkit-border-radius:3px;
+ border-radius:3px;
+}
+table th {
+ padding:21px 25px 22px 25px;
+ border-top:1px solid #fafafa;
+ border-bottom:1px solid #e0e0e0;
+ border-left: 1px solid #e0e0e0;
+ font-weight: bold;
+}
+table th:first-child {
+ text-align: left;
+ padding-left:20px;
+ border-left: 0;
+}
+table tr {
+ text-align: center;
+ padding-left:20px;
+}
+table td:first-child {
+ text-align: left;
+ padding-left:20px;
+ border-left: 0;
+}
+table td {
+ padding:18px;
+ border-top: 1px solid #ffffff;
+ border-bottom:1px solid #e0e0e0;
+ border-left: 1px solid #e0e0e0;
+}
+table tr:last-child td {
+ border-bottom:0;
+}
+table tr:last-child td:first-child {
+ -moz-border-radius-bottomleft:3px;
+ -webkit-border-bottom-left-radius:3px;
+ border-bottom-left-radius:3px;
+}
+table tr:last-child td:last-child {
+ -moz-border-radius-bottomright:3px;
+ -webkit-border-bottom-right-radius:3px;
+ border-bottom-right-radius:3px;
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
new file mode 100644
index 0000000000..9de98806d7
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
@@ -0,0 +1,78 @@
+
+AngularJS to Angular Quick Reference
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading app...
+
+
+
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/main.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts
new file mode 100644
index 0000000000..4744f06e50
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts
@@ -0,0 +1,27 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('AOT Compilation', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should load page and click button', function (done: any) {
+ let headingSelector = element.all(by.css('h1')).get(0);
+ expect(headingSelector.getText()).toEqual('Hello Angular');
+
+ expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
+ expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);
+ expect(element.all(by.xpath('//div[text()="Magma"]')).get(0).isPresent()).toBe(true);
+ expect(element.all(by.xpath('//div[text()="Tornado"]')).get(0).isPresent()).toBe(true);
+
+ let toggleButton = element.all(by.css('button')).get(0);
+ toggleButton.click().then(function() {
+ expect(headingSelector.isPresent()).toBe(false);
+ done();
+ });
+ });
+});
diff --git a/public/docs/_examples/cb-aot-compiler/ts/.gitignore b/public/docs/_examples/cb-aot-compiler/ts/.gitignore
new file mode 100644
index 0000000000..91da4c79a2
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/.gitignore
@@ -0,0 +1,7 @@
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.shim.ngstyle.ts
+**/*.metadata.json
+dist
+!app/tsconfig.json
+!rollup-config.js
diff --git a/public/docs/_examples/cb-aot-compiler/ts/example-config.json b/public/docs/_examples/cb-aot-compiler/ts/example-config.json
new file mode 100644
index 0000000000..473b80a572
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:aot"
+}
diff --git a/public/docs/_examples/cb-aot-compiler/ts/rollup-config.js b/public/docs/_examples/cb-aot-compiler/ts/rollup-config.js
new file mode 100644
index 0000000000..1cd25515ba
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/rollup-config.js
@@ -0,0 +1,34 @@
+// #docregion
+import rollup from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs';
+import uglify from 'rollup-plugin-uglify'
+
+// #docregion config
+export default {
+ entry: 'src/main.js',
+ dest: 'src/build.js', // output a single application bundle
+ sourceMap: false,
+ format: 'iife',
+ onwarn: function(warning) {
+ // Skip certain warnings
+
+ // should intercept ... but doesn't in some rollup versions
+ if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+
+ // console.warn everything else
+ console.warn( warning.message );
+ },
+ plugins: [
+ nodeResolve({jsnext: true, module: true}),
+ // #docregion commonjs
+ commonjs({
+ include: 'node_modules/rxjs/**',
+ }),
+ // #enddocregion commonjs
+ // #docregion uglify
+ uglify()
+ // #enddocregion uglify
+ ]
+}
+// #enddocregion config
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.html b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.html
new file mode 100644
index 0000000000..1d3a8de932
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.html
@@ -0,0 +1,7 @@
+
+
+Ahead of time compilation (JIT)
+ Loading...
+
+
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/index.html b/public/docs/_examples/cb-aot-compiler/ts/src/index.html
new file mode 100644
index 0000000000..09e5f0de0e
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+ Ahead of time compilation
+ Loading...
+
+
+
+
+
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/main-jit.ts b/public/docs/_examples/cb-aot-compiler/ts/src/main-jit.ts
new file mode 100644
index 0000000000..88e2c16ed5
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/main-jit.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+console.log('Running JIT compiled');
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/main.ts b/public/docs/_examples/cb-aot-compiler/ts/src/main.ts
new file mode 100644
index 0000000000..4446bc07d1
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowser } from '@angular/platform-browser';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
+
+console.log('Running AOT compiled');
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json b/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json
new file mode 100644
index 0000000000..d0a3d00ad4
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "es2015",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": ["es2015", "dom"],
+ "noImplicitAny": true,
+ "suppressImplicitAnyIndexErrors": true
+ },
+
+ "files": [
+ "src/app/app.module.ts",
+ "src/main.ts"
+ ],
+
+ "angularCompilerOptions": {
+ "genDir": "aot",
+ "skipMetadataEmit" : true
+ }
+}
diff --git a/public/docs/_examples/cb-component-communication/e2e-spec.ts b/public/docs/_examples/cb-component-communication/e2e-spec.ts
new file mode 100644
index 0000000000..d78e0784d9
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/e2e-spec.ts
@@ -0,0 +1,232 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Component Communication Cookbook Tests', function () {
+
+ // Note: '?e2e' which app can read to know it is running in protractor
+ // e.g. `if (!/e2e/.test(location.search)) { ...`
+ beforeAll(function () {
+ browser.get('?e2e');
+ });
+
+ describe('Parent-to-child communication', function() {
+ // #docregion parent-to-child
+ // ...
+ let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto'];
+ let _masterName = 'Master';
+
+ it('should pass properties to children properly', function () {
+ let parent = element.all(by.tagName('hero-parent')).get(0);
+ let heroes = parent.all(by.tagName('hero-child'));
+
+ for (let i = 0; i < _heroNames.length; i++) {
+ let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+ let childDetail = heroes.get(i).element(by.tagName('p')).getText();
+ expect(childTitle).toEqual(_heroNames[i] + ' says:');
+ expect(childDetail).toContain(_masterName);
+ }
+ });
+ // ...
+ // #enddocregion parent-to-child
+ });
+
+ describe('Parent-to-child communication with setter', function() {
+ // #docregion parent-to-child-setter
+ // ...
+ it('should display trimmed, non-empty names', function () {
+ let _nonEmptyNameIndex = 0;
+ let _nonEmptyName = '"Mr. IQ"';
+ let parent = element.all(by.tagName('name-parent')).get(0);
+ let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
+
+ let displayName = hero.element(by.tagName('h3')).getText();
+ expect(displayName).toEqual(_nonEmptyName);
+ });
+
+ it('should replace empty name with default name', function () {
+ let _emptyNameIndex = 1;
+ let _defaultName = '""';
+ let parent = element.all(by.tagName('name-parent')).get(0);
+ let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
+
+ let displayName = hero.element(by.tagName('h3')).getText();
+ expect(displayName).toEqual(_defaultName);
+ });
+ // ...
+ // #enddocregion parent-to-child-setter
+ });
+
+ describe('Parent-to-child communication with ngOnChanges', function() {
+ // #docregion parent-to-child-onchanges
+ // ...
+ // Test must all execute in this exact order
+ it('should set expected initial values', function () {
+ let actual = getActual();
+
+ let initialLabel = 'Version 1.23';
+ let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
+
+ expect(actual.label).toBe(initialLabel);
+ expect(actual.count).toBe(1);
+ expect(actual.logs.get(0).getText()).toBe(initialLog);
+ });
+
+ it('should set expected values after clicking \'Minor\' twice', function () {
+ let repoTag = element(by.tagName('version-parent'));
+ let newMinorButton = repoTag.all(by.tagName('button')).get(0);
+
+ newMinorButton.click().then(function() {
+ newMinorButton.click().then(function() {
+ let actual = getActual();
+
+ let labelAfter2Minor = 'Version 1.25';
+ let logAfter2Minor = 'minor changed from 24 to 25';
+
+ expect(actual.label).toBe(labelAfter2Minor);
+ expect(actual.count).toBe(3);
+ expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
+ });
+ });
+ });
+
+ it('should set expected values after clicking \'Major\' once', function () {
+ let repoTag = element(by.tagName('version-parent'));
+ let newMajorButton = repoTag.all(by.tagName('button')).get(1);
+
+ newMajorButton.click().then(function() {
+ let actual = getActual();
+
+ let labelAfterMajor = 'Version 2.0';
+ let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
+
+ expect(actual.label).toBe(labelAfterMajor);
+ expect(actual.count).toBe(4);
+ expect(actual.logs.get(3).getText()).toBe(logAfterMajor);
+ });
+ });
+
+ function getActual() {
+ let versionTag = element(by.tagName('version-child'));
+ let label = versionTag.element(by.tagName('h3')).getText();
+ let ul = versionTag.element((by.tagName('ul')));
+ let logs = ul.all(by.tagName('li'));
+
+ return {
+ label: label,
+ logs: logs,
+ count: logs.count()
+ };
+ }
+ // ...
+ // #enddocregion parent-to-child-onchanges
+
+ });
+
+ describe('Child-to-parent communication', function() {
+ // #docregion child-to-parent
+ // ...
+ it('should not emit the event initially', function () {
+ let voteLabel = element(by.tagName('vote-taker'))
+ .element(by.tagName('h3')).getText();
+ expect(voteLabel).toBe('Agree: 0, Disagree: 0');
+ });
+
+ it('should process Agree vote', function () {
+ let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
+ .all(by.tagName('button')).get(0);
+ agreeButton1.click().then(function() {
+ let voteLabel = element(by.tagName('vote-taker'))
+ .element(by.tagName('h3')).getText();
+ expect(voteLabel).toBe('Agree: 1, Disagree: 0');
+ });
+ });
+
+ it('should process Disagree vote', function () {
+ let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
+ .all(by.tagName('button')).get(1);
+ agreeButton1.click().then(function() {
+ let voteLabel = element(by.tagName('vote-taker'))
+ .element(by.tagName('h3')).getText();
+ expect(voteLabel).toBe('Agree: 1, Disagree: 1');
+ });
+ });
+ // ...
+ // #enddocregion child-to-parent
+ });
+
+ // Can't run timer tests in protractor because
+ // interaction w/ zones causes all tests to freeze & timeout.
+ xdescribe('Parent calls child via local var', function() {
+ countDownTimerTests('countdown-parent-lv');
+ });
+
+ xdescribe('Parent calls ViewChild', function() {
+ countDownTimerTests('countdown-parent-vc');
+ });
+
+ function countDownTimerTests(parentTag: string) {
+ // #docregion countdown-timer-tests
+ // ...
+ it('timer and parent seconds should match', function () {
+ let parent = element(by.tagName(parentTag));
+ let message = parent.element(by.tagName('countdown-timer')).getText();
+ browser.sleep(10); // give `seconds` a chance to catchup with `message`
+ let seconds = parent.element(by.className('seconds')).getText();
+ expect(message).toContain(seconds);
+ });
+
+ it('should stop the countdown', function () {
+ let parent = element(by.tagName(parentTag));
+ let stopButton = parent.all(by.tagName('button')).get(1);
+
+ stopButton.click().then(function() {
+ let message = parent.element(by.tagName('countdown-timer')).getText();
+ expect(message).toContain('Holding');
+ });
+ });
+ // ...
+ // #enddocregion countdown-timer-tests
+ }
+
+
+ describe('Parent and children communicate via a service', function() {
+ // #docregion bidirectional-service
+ // ...
+ it('should announce a mission', function () {
+ let missionControl = element(by.tagName('mission-control'));
+ let announceButton = missionControl.all(by.tagName('button')).get(0);
+ announceButton.click().then(function () {
+ let history = missionControl.all(by.tagName('li'));
+ expect(history.count()).toBe(1);
+ expect(history.get(0).getText()).toMatch(/Mission.* announced/);
+ });
+ });
+
+ it('should confirm the mission by Lovell', function () {
+ testConfirmMission(1, 2, 'Lovell');
+ });
+
+ it('should confirm the mission by Haise', function () {
+ testConfirmMission(3, 3, 'Haise');
+ });
+
+ it('should confirm the mission by Swigert', function () {
+ testConfirmMission(2, 4, 'Swigert');
+ });
+
+ function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
+ let _confirmedLog = ' confirmed the mission';
+ let missionControl = element(by.tagName('mission-control'));
+ let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
+ confirmButton.click().then(function () {
+ let history = missionControl.all(by.tagName('li'));
+ expect(history.count()).toBe(expectedLogCount);
+ expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
+ });
+ }
+ // ...
+ // #enddocregion bidirectional-service
+ });
+
+});
diff --git a/public/docs/_examples/cb-component-communication/ts/.gitignore b/public/docs/_examples/cb-component-communication/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/cb-component-communication/ts/example-config.json b/public/docs/_examples/cb-component-communication/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-component-communication/ts/plnkr.json b/public/docs/_examples/cb-component-communication/ts/plnkr.json
new file mode 100644
index 0000000000..03bd55cd1a
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Component Communication Cookbook samples",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook", "component"]
+}
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.component.html b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.html
new file mode 100644
index 0000000000..ef94020efb
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.html
@@ -0,0 +1,51 @@
+
+Intercept input property changes with a setter ("Master")
+Intercept input property changes with ngOnChanges ("Source code version")
+Parent listens for child event ("Colonize Universe")
+Parent to child via local variable("Countdown to Liftoff")
+Parent calls ViewChild("Countdown to Liftoff")
+Parent and children communicate via a service ("Mission Control")
+ +
+
+
+
+ +
+ +
+ +
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts new file mode 100644 index 0000000000..7556beb1ff --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts b/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts new file mode 100644 index 0000000000..a008fc5486 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts @@ -0,0 +1,54 @@ +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { AstronautComponent } from './astronaut.component'; +import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component'; +import { CountdownTimerComponent } from './countdown-timer.component'; +import { HeroChildComponent } from './hero-child.component'; +import { HeroParentComponent } from './hero-parent.component'; +import { MissionControlComponent } from './missioncontrol.component'; +import { NameChildComponent } from './name-child.component'; +import { NameParentComponent } from './name-parent.component'; +import { VersionChildComponent } from './version-child.component'; +import { VersionParentComponent } from './version-parent.component'; +import { VoterComponent } from './voter.component'; +import { VoteTakerComponent } from './votetaker.component'; + +let directives: any[] = [ + AppComponent, + AstronautComponent, + CountdownTimerComponent, + HeroChildComponent, + HeroParentComponent, + MissionControlComponent, + NameChildComponent, + NameParentComponent, + VersionChildComponent, + VersionParentComponent, + VoterComponent, + VoteTakerComponent + ]; + +let schemas: any[] = []; + +// Include Countdown examples +// unless in e2e tests which they break. +if (!/e2e/.test(location.search)) { + console.log('adding countdown timer examples'); + directives.push(CountdownLocalVarParentComponent); + directives.push(CountdownViewChildParentComponent); +} else { + // In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors + schemas.push(CUSTOM_ELEMENTS_SCHEMA); +} + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: directives, + bootstrap: [ AppComponent ], + schemas: schemas +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts new file mode 100644 index 0000000000..bc24964f86 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts @@ -0,0 +1,46 @@ +// #docregion +import { Component, Input, OnDestroy } from '@angular/core'; + +import { MissionService } from './mission.service'; +import { Subscription } from 'rxjs/Subscription'; + +@Component({ + selector: 'my-astronaut', + template: ` +';
+ confirmed = false;
+ announced = false;
+ subscription: Subscription;
+
+ constructor(private missionService: MissionService) {
+ this.subscription = missionService.missionAnnounced$.subscribe(
+ mission => {
+ this.mission = mission;
+ this.announced = true;
+ this.confirmed = false;
+ });
+ }
+
+ confirm() {
+ this.confirmed = true;
+ this.missionService.confirmMission(this.astronaut);
+ }
+
+ ngOnDestroy() {
+ // prevent memory leak when component destroyed
+ this.subscription.unsubscribe();
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts
new file mode 100644
index 0000000000..5bcf0645c9
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts
@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion vc
+import { AfterViewInit, ViewChild } from '@angular/core';
+// #docregion lv
+import { Component } from '@angular/core';
+import { CountdownTimerComponent } from './countdown-timer.component';
+
+// #enddocregion lv
+// #enddocregion vc
+
+//// Local variable, #timer, version
+// #docregion lv
+@Component({
+ selector: 'countdown-parent-lv',
+ template: `
+
+
+ `
+})
+export class HeroParentComponent {
+ heroes = HEROES;
+ master: string = 'Master';
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/hero.ts b/public/docs/_examples/cb-component-communication/ts/src/app/hero.ts
new file mode 100644
index 0000000000..a7b70f48e8
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/hero.ts
@@ -0,0 +1,9 @@
+export class Hero {
+ name: string;
+}
+
+export const HEROES = [
+ {name: 'Mr. IQ'},
+ {name: 'Magneta'},
+ {name: 'Bombasto'}
+];
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/mission.service.ts b/public/docs/_examples/cb-component-communication/ts/src/app/mission.service.ts
new file mode 100644
index 0000000000..25c86866b0
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/mission.service.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class MissionService {
+
+ // Observable string sources
+ private missionAnnouncedSource = new Subject();
+ private missionConfirmedSource = new Subject();
+
+ // Observable string streams
+ missionAnnounced$ = this.missionAnnouncedSource.asObservable();
+ missionConfirmed$ = this.missionConfirmedSource.asObservable();
+
+ // Service message commands
+ announceMission(mission: string) {
+ this.missionAnnouncedSource.next(mission);
+ }
+
+ confirmMission(astronaut: string) {
+ this.missionConfirmedSource.next(astronaut);
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/missioncontrol.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/missioncontrol.component.ts
new file mode 100644
index 0000000000..a27e9b16b1
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/missioncontrol.component.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { MissionService } from './mission.service';
+
+@Component({
+ selector: 'mission-control',
+ template: `
+
+
+ ';
+ }
+
+ get name(): string { return this._name; }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/name-parent.component.ts
new file mode 100644
index 0000000000..99753303aa
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/name-parent.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'name-parent',
+ template: `
+ ', 'Bombasto'
+ names = ['Mr. IQ', ' ', ' Bombasto '];
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/version-child.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/version-child.component.ts
new file mode 100644
index 0000000000..89d365cf9f
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/version-child.component.ts
@@ -0,0 +1,35 @@
+/* tslint:disable:forin */
+// #docregion
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
+
+@Component({
+ selector: 'version-child',
+ template: `
+ ();
+ voted = false;
+
+ vote(agreed: boolean) {
+ this.onVoted.emit(agreed);
+ this.voted = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts
new file mode 100644
index 0000000000..87f06161f5
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'vote-taker',
+ template: `
+
+
+ `
+})
+export class VoteTakerComponent {
+ agreed = 0;
+ disagreed = 0;
+ voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
+
+ onVoted(agreed: boolean) {
+ agreed ? this.agreed++ : this.disagreed++;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/src/demo.css b/public/docs/_examples/cb-component-communication/ts/src/demo.css
new file mode 100644
index 0000000000..b63a8b38dd
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/demo.css
@@ -0,0 +1,9 @@
+/* Component Communication cookbook specific styles */
+.seconds {
+ background-color: black;
+ color: red;
+ font-size: 3em;
+ margin: 0.3em 0;
+ text-align: center;
+ width: 1.5em;
+}
diff --git a/public/docs/_examples/cb-component-communication/ts/src/index.html b/public/docs/_examples/cb-component-communication/ts/src/index.html
new file mode 100644
index 0000000000..64c8a3430f
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Passing information from parent to child
+ loading...
+
+
+
diff --git a/public/docs/_examples/cb-component-communication/ts/src/main.ts b/public/docs/_examples/cb-component-communication/ts/src/main.ts
new file mode 100644
index 0000000000..311c44b76d
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
new file mode 100644
index 0000000000..8c9d163d5e
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
@@ -0,0 +1,102 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Dependency Injection Cookbook', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should render Logged in User example', function () {
+ let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+ expect(loggedInUser).toBeDefined();
+ });
+
+ it('"Bombasto" should be the logged in user', function () {
+ let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+ expect(loggedInUser).toBeDefined();
+ });
+
+ it('should render sorted heroes', function () {
+ let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+ expect(sortedHeroes).toBeDefined();
+ });
+
+ it('Mr. Nice should be in sorted heroes', function () {
+ let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0);
+ expect(sortedHero).toBeDefined();
+ });
+
+ it('RubberMan should be in sorted heroes', function () {
+ let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+ expect(sortedHero).toBeDefined();
+ });
+
+ it('Magma should be in sorted heroes', function () {
+ let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+ expect(sortedHero).toBeDefined();
+ });
+
+ it('should render Hero of the Month', function () {
+ let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+ expect(heroOfTheMonth).toBeDefined();
+ });
+
+ it('should render Hero Bios', function () {
+ let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+ expect(heroBios).toBeDefined();
+ });
+
+ it('should render Magma\'s description in Hero Bios', function () {
+ let magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+ expect(magmaText).toBeDefined();
+ });
+
+ it('should render Magma\'s phone in Hero Bios and Contacts', function () {
+ let magmaPhone = element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+ expect(magmaPhone).toBeDefined();
+ });
+
+ it('should render Hero-of-the-Month runner-ups', function () {
+ let runnersUp = element(by.id('rups1')).getText();
+ expect(runnersUp).toContain('RubberMan, Mr. Nice');
+ });
+
+ it('should render DateLogger log entry in Hero-of-the-Month', function () {
+ let logs = element.all(by.id('logs')).get(0).getText();
+ expect(logs).toContain('INFO: starting up at');
+ });
+
+ it('should highlight Hero Bios and Contacts container when mouseover', function () {
+ let target = element(by.css('div[myHighlight="yellow"]'));
+ let yellow = 'rgba(255, 255, 0, 1)';
+
+ expect(target.getCssValue('background-color')).not.toEqual(yellow);
+ browser.actions().mouseMove(target.getWebElement()).perform();
+ expect(target.getCssValue('background-color')).toEqual(yellow);
+ });
+
+ describe('in Parent Finder', function () {
+ let cathy1 = element(by.css('alex cathy'));
+ let craig1 = element(by.css('alex craig'));
+ let carol1 = element(by.css('alex carol p'));
+ let carol2 = element(by.css('barry carol p'));
+
+ it('"Cathy" should find "Alex" via the component class', function () {
+ expect(cathy1.getText()).toContain('Found Alex via the component');
+ });
+
+ it('"Craig" should not find "Alex" via the base class', function () {
+ expect(craig1.getText()).toContain('Did not find Alex via the base');
+ });
+
+ it('"Carol" within "Alex" should have "Alex" parent', function () {
+ expect(carol1.getText()).toContain('Alex');
+ });
+
+ it('"Carol" within "Barry" should have "Barry" parent', function () {
+ expect(carol2.getText()).toContain('Barry');
+ });
+ });
+});
diff --git a/public/docs/_examples/cb-dependency-injection/ts/example-config.json b/public/docs/_examples/cb-dependency-injection/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-dependency-injection/ts/plnkr.json b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
new file mode 100644
index 0000000000..ff0aedca01
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Dependency Injection",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app-routing.module.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..09a0592d00
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ providers: [],
+ exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.html
new file mode 100644
index 0000000000..a715e484fe
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.html
@@ -0,0 +1,38 @@
+
+
+ `,
+ // #enddocregion template
+ // #docregion class-provider
+ providers: [HeroService]
+ // #enddocregion class-provider
+})
+export class HeroBiosAndContactsComponent {
+ constructor(logger: LoggerService) {
+ logger.logInfo('Creating HeroBiosAndContactsComponent');
+ }
+}
+// #enddocregion hero-bios-and-contacts
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-cache.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-cache.service.ts
new file mode 100644
index 0000000000..6dbc7a0c4f
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-cache.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+// #docregion service
+@Injectable()
+export class HeroCacheService {
+ hero: Hero;
+ constructor(private heroService: HeroService) {}
+
+ fetchCachedHero(id: number) {
+ if (!this.hero) {
+ this.hero = this.heroService.getHeroById(id);
+ }
+ return this.hero;
+ }
+}
+// #enddocregion service
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts
new file mode 100644
index 0000000000..add6df91c5
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts
@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion
+import { Component, Host, Optional } from '@angular/core';
+
+import { HeroCacheService } from './hero-cache.service';
+import { LoggerService } from './logger.service';
+
+// #docregion component
+@Component({
+ selector: 'hero-contact',
+ template: `
+ ('title');
+// #enddocregion injection-token
+
+// #docregion hero-of-the-month
+import { Component, Inject } from '@angular/core';
+
+import { DateLoggerService } from './date-logger.service';
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+import { LoggerService } from './logger.service';
+import { MinimalLogger } from './minimal-logger.service';
+import { RUNNERS_UP,
+ runnersUpFactory } from './runners-up';
+
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+// #docregion hero-of-the-month
+@Component({
+ selector: 'hero-of-the-month',
+ templateUrl: './hero-of-the-month.component.html',
+ providers: [
+ // #docregion use-value
+ { provide: Hero, useValue: someHero },
+ // #docregion provide-injection-token
+ { provide: TITLE, useValue: 'Hero of the Month' },
+ // #enddocregion provide-injection-token
+ // #enddocregion use-value
+ // #docregion use-class
+ { provide: HeroService, useClass: HeroService },
+ { provide: LoggerService, useClass: DateLoggerService },
+ // #enddocregion use-class
+ // #docregion use-existing
+ { provide: MinimalLogger, useExisting: LoggerService },
+ // #enddocregion use-existing
+ // #docregion provide-injection-token, use-factory
+ { provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] }
+ // #enddocregion provide-injection-token, use-factory
+ ]
+})
+export class HeroOfTheMonthComponent {
+ logs: string[] = [];
+
+// #docregion ctor-signature
+ constructor(
+ logger: MinimalLogger,
+ public heroOfTheMonth: Hero,
+ @Inject(RUNNERS_UP) public runnersUp: string,
+ @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+ {
+ this.logs = logger.logs;
+ logger.logInfo('starting up');
+ }
+}
+// #enddocregion hero-of-the-month
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.service.ts
new file mode 100644
index 0000000000..2063c30d7a
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+
+ // TODO move to database
+ private heroes: Array = [
+ new Hero(1, 'RubberMan', 'Hero of many talents', '123-456-7899'),
+ new Hero(2, 'Magma', 'Hero of all trades', '555-555-5555'),
+ new Hero(3, 'Mr. Nice', 'The name says it all', '111-222-3333')
+ ];
+
+ getHeroById(id: number): Hero {
+ return this.heroes.find(hero => hero.id === id);
+ }
+
+ getAllHeroes(): Array {
+ return this.heroes;
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.ts
new file mode 100644
index 0000000000..c17069e727
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+ constructor(
+ public id: number,
+ public name: string,
+ public description?: string,
+ public phone?: string) {
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/highlight.directive.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/highlight.directive.ts
new file mode 100644
index 0000000000..e220114daa
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/highlight.directive.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+ selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+ @Input('myHighlight') highlightColor: string;
+
+ private el: HTMLElement;
+
+ constructor(el: ElementRef) {
+ this.el = el.nativeElement;
+ }
+
+ @HostListener('mouseenter') onMouseEnter() {
+ this.highlight(this.highlightColor || 'cyan');
+ }
+
+ @HostListener('mouseleave') onMouseLeave() {
+ this.highlight(null);
+ }
+
+ private highlight(color: string) {
+ this.el.style.backgroundColor = color;
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/logger.service.ts
new file mode 100644
index 0000000000..df8ee6b9c7
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/logger.service.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+ logs: string[] = [];
+
+ logInfo(msg: any) { this.log(`INFO: ${msg}`); }
+ logDebug(msg: any) { this.log(`DEBUG: ${msg}`); }
+ logError(msg: any) { this.log(`ERROR: ${msg}`, true); }
+
+ private log(msg: any, isErr = false) {
+ this.logs.push(msg);
+ isErr ? console.error(msg) : console.log(msg);
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts
new file mode 100644
index 0000000000..d87fa594d1
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+// Class used as a "narrowing" interface that exposes a minimal logger
+// Other members of the actual implementation are invisible
+export abstract class MinimalLogger {
+ logs: string[];
+ logInfo: (msg: string) => void;
+}
+// #enddocregion
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+ var MinimalLogger = (function () {
+ function MinimalLogger() {}
+ return MinimalLogger;
+ }());
+ exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+*/
+
+// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/
+export const _ = 0;
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts
new file mode 100644
index 0000000000..c6f208f79b
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts
@@ -0,0 +1,215 @@
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
+// #docplaster
+// #docregion
+import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
+
+// A component base class (see AlexComponent)
+export abstract class Base { name = 'Count Basie'; }
+
+// Marker class, used as an interface
+// #docregion parent
+export abstract class Parent { name: string; }
+// #enddocregion parent
+
+const DifferentParent = Parent;
+
+// #docregion provide-parent, provide-the-parent
+// Helper method to provide the current component instance in the name of a `parentType`.
+// #enddocregion provide-the-parent
+// The `parentType` defaults to `Parent` when omitting the second parameter.
+// #docregion provide-the-parent
+const provideParent =
+// #enddocregion provide-parent, provide-the-parent
+// #docregion provide-parent
+ (component: any, parentType?: any) => {
+ return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
+ };
+// #enddocregion provide-parent
+
+// Simpler syntax version that always provides the component in the name of `Parent`.
+const provideTheParent =
+// #docregion provide-the-parent
+ (component: any) => {
+ return { provide: Parent, useExisting: forwardRef(() => component) };
+ };
+// #enddocregion provide-the-parent
+
+
+///////// C - Child //////////
+// #docregion carol
+const templateC = `
+ ('RunnersUp');
+// #enddocregion runners-up
+
+// #docregion factory-synopsis
+export function runnersUpFactory(take: number) {
+ return (winner: Hero, heroService: HeroService): string => {
+ /* ... */
+// #enddocregion factory-synopsis
+ return heroService
+ .getAllHeroes()
+ .filter((hero) => hero.name !== winner.name)
+ .map(hero => hero.name)
+ .slice(0, Math.max(0, take))
+ .join(', ');
+// #docregion factory-synopsis
+ };
+};
+// #enddocregion factory-synopsis
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts
new file mode 100644
index 0000000000..8cb6e3c69c
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+/////// HeroesBaseComponent /////
+// #docregion heroes-base, injection
+@Component({
+ selector: 'unsorted-heroes',
+ template: `;
+
+ ngOnInit() {
+ this.heroes = this.heroService.getAllHeroes();
+ this.afterGetHeroes();
+ }
+
+ // Post-process heroes in derived class override.
+ protected afterGetHeroes() {}
+
+// #docregion injection
+}
+// #enddocregion heroes-base,injection
+
+/////// SortedHeroesComponent /////
+// #docregion sorted-heroes
+@Component({
+ selector: 'sorted-heroes',
+ template: `Dependency Injection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading app...
+
+
+
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/main.ts b/public/docs/_examples/cb-dependency-injection/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/sample.css b/public/docs/_examples/cb-dependency-injection/ts/src/sample.css
new file mode 100644
index 0000000000..a8b59efd05
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/sample.css
@@ -0,0 +1,26 @@
+.di-component{
+ padding: 10px;
+ width:300px;
+ margin-bottom: 10px;
+}
+div[myHighlight] {
+ padding: 2px 8px;
+}
+
+/* Parent Finder */
+.a, .b, .c {
+ margin: 6px 2px 6px;
+ padding: 4px 6px;
+}
+.a {
+ border: solid 2px black;
+}
+.b {
+ background: lightblue;
+ border: solid 1px darkblue;
+ display: flex;
+}
+.c {
+ background: pink;
+ border: solid 1px red;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dynamic-component-loader/e2e-spec.ts b/public/docs/_examples/cb-dynamic-component-loader/e2e-spec.ts
new file mode 100644
index 0000000000..5036ac2a88
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/e2e-spec.ts
@@ -0,0 +1,21 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Dynamic Component Loader', function () {
+
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ it('should load ad banner', function () {
+ let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
+ let name = element(by.xpath("//h3[text()='Bombasto']"));
+ let bio = element(by.xpath("//p[text()='Brave as they come']"));
+
+ expect(name).toBeDefined();
+ expect(headline).toBeDefined();
+ expect(bio).toBeDefined();
+ });
+});
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/example-config.json b/public/docs/_examples/cb-dynamic-component-loader/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json b/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json
new file mode 100644
index 0000000000..c43fb15c12
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Dynamic Component Loader",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook component"]
+}
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts
new file mode 100644
index 0000000000..8489fce5b2
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts
@@ -0,0 +1,57 @@
+// #docregion
+import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
+
+import { AdDirective } from './ad.directive';
+import { AdItem } from './ad-item';
+import { AdComponent } from './ad.component';
+
+@Component({
+ selector: 'add-banner',
+ // #docregion ad-host
+ template: `
+
+ `
+ // #enddocregion ad-host
+})
+// #docregion class
+export class AdBannerComponent implements AfterViewInit, OnDestroy {
+ @Input() ads: AdItem[];
+ currentAddIndex: number = -1;
+ @ViewChild(AdDirective) adHost: AdDirective;
+ subscription: any;
+ interval: any;
+
+ constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
+
+ ngAfterViewInit() {
+ this.loadComponent();
+ this.getAds();
+ }
+
+ ngOnDestroy() {
+ clearInterval(this.interval);
+ }
+
+ loadComponent() {
+ this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
+ let adItem = this.ads[this.currentAddIndex];
+
+ let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
+
+ let viewContainerRef = this.adHost.viewContainerRef;
+ viewContainerRef.clear();
+
+ let componentRef = viewContainerRef.createComponent(componentFactory);
+ (componentRef.instance).data = adItem.data;
+ }
+
+ getAds() {
+ this.interval = setInterval(() => {
+ this.loadComponent();
+ }, 3000);
+ }
+}
+// #enddocregion class
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-item.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-item.ts
new file mode 100644
index 0000000000..ef8ca70577
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-item.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { Type } from '@angular/core';
+
+export class AdItem {
+ constructor(public component: Type, public data: any) {}
+}
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.component.ts
new file mode 100644
index 0000000000..dee3b47953
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.component.ts
@@ -0,0 +1,4 @@
+// #docregion
+export interface AdComponent {
+ data: any;
+}
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.directive.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.directive.ts
new file mode 100644
index 0000000000..312e605228
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.directive.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+ selector: '[ad-host]',
+})
+export class AdDirective {
+ constructor(public viewContainerRef: ViewContainerRef) { }
+}
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.service.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.service.ts
new file mode 100644
index 0000000000..91b0758771
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad.service.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HeroJobAdComponent } from './hero-job-ad.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdItem } from './ad-item';
+
+@Injectable()
+export class AdService {
+ getAds() {
+ return [
+ new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
+
+ new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
+
+ new AdItem(HeroJobAdComponent, {headline: 'Hiring for several positions',
+ body: 'Submit your resume today!'}),
+
+ new AdItem(HeroJobAdComponent, {headline: 'Openings in all departments',
+ body: 'Apply today'}),
+ ];
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..89359ccdf6
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { AdService } from './ad.service';
+import { AdItem } from './ad-item';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ Dynamic Component Loader
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading app...
+
+
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/main.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/main.ts
new file mode 100644
index 0000000000..53d16fa43a
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/sample.css b/public/docs/_examples/cb-dynamic-component-loader/ts/src/sample.css
new file mode 100644
index 0000000000..7a2ca1f2dc
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/sample.css
@@ -0,0 +1,23 @@
+.hero-profile {
+ border: 1px solid gray;
+ padding: 5px;
+ padding-bottom: 20px;
+ padding-left: 20px;
+ border-radius: 10px;
+ background-color: lightgreen;
+ color: black;
+}
+
+.job-ad {
+ border: 1px solid gray;
+ padding: 5px;
+ padding-bottom: 20px;
+ padding-left: 20px;
+ border-radius: 10px;
+ background-color: lightblue;
+ color: black;
+}
+
+.ad-banner {
+ width: 400px;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dynamic-form/e2e-spec.ts b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
new file mode 100644
index 0000000000..408ac75766
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
@@ -0,0 +1,29 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Dynamic Form', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should submit form', function () {
+ let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+ expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
+
+ let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
+ let email = 'test@test.com';
+ emailElement.sendKeys(email);
+ expect(emailElement.getAttribute('value')).toEqual(email);
+
+ element(by.css('select option[value="solid"]')).click();
+
+ let saveButton = element.all(by.css('button')).get(0);
+ saveButton.click().then(function(){
+ expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
+ });
+ });
+
+});
diff --git a/public/docs/_examples/cb-dynamic-form/ts/example-config.json b/public/docs/_examples/cb-dynamic-form/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-dynamic-form/ts/plnkr.json b/public/docs/_examples/cb-dynamic-form/ts/plnkr.json
new file mode 100644
index 0000000000..1f50b4a992
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Dynamic Form",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/app.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..582daced2e
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/app.component.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { QuestionService } from './question.service';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ ;
+ @Input() form: FormGroup;
+ get isValid() { return this.form.controls[this.question.key].valid; }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html
new file mode 100644
index 0000000000..717f09ff71
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html
@@ -0,0 +1,17 @@
+
+[] = [];
+ form: FormGroup;
+ payLoad = '';
+
+ constructor(private qcs: QuestionControlService) { }
+
+ ngOnInit() {
+ this.form = this.qcs.toFormGroup(this.questions);
+ }
+
+ onSubmit() {
+ this.payLoad = JSON.stringify(this.form.value);
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/question-base.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-base.ts
new file mode 100644
index 0000000000..2b32b00f2a
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-base.ts
@@ -0,0 +1,25 @@
+// #docregion
+export class QuestionBase{
+ value: T;
+ key: string;
+ label: string;
+ required: boolean;
+ order: number;
+ controlType: string;
+
+ constructor(options: {
+ value?: T,
+ key?: string,
+ label?: string,
+ required?: boolean,
+ order?: number,
+ controlType?: string
+ } = {}) {
+ this.value = options.value;
+ this.key = options.key || '';
+ this.label = options.label || '';
+ this.required = !!options.required;
+ this.order = options.order === undefined ? 1 : options.order;
+ this.controlType = options.controlType || '';
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/question-control.service.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-control.service.ts
new file mode 100644
index 0000000000..1378ba8490
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-control.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { QuestionBase } from './question-base';
+
+@Injectable()
+export class QuestionControlService {
+ constructor() { }
+
+ toFormGroup(questions: QuestionBase[] ) {
+ let group: any = {};
+
+ questions.forEach(question => {
+ group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
+ : new FormControl(question.value || '');
+ });
+ return new FormGroup(group);
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/question-dropdown.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-dropdown.ts
new file mode 100644
index 0000000000..35a9074c74
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-dropdown.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class DropdownQuestion extends QuestionBase {
+ controlType = 'dropdown';
+ options: {key: string, value: string}[] = [];
+
+ constructor(options: {} = {}) {
+ super(options);
+ this.options = options['options'] || [];
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/question-textbox.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-textbox.ts
new file mode 100644
index 0000000000..aaa7edf267
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/question-textbox.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class TextboxQuestion extends QuestionBase {
+ controlType = 'textbox';
+ type: string;
+
+ constructor(options: {} = {}) {
+ super(options);
+ this.type = options['type'] || '';
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/question.service.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/question.service.ts
new file mode 100644
index 0000000000..bb452cf5e6
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/question.service.ts
@@ -0,0 +1,47 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { DropdownQuestion } from './question-dropdown';
+import { QuestionBase } from './question-base';
+import { TextboxQuestion } from './question-textbox';
+
+@Injectable()
+export class QuestionService {
+
+ // Todo: get from a remote source of question metadata
+ // Todo: make asynchronous
+ getQuestions() {
+
+ let questions: QuestionBase[] = [
+
+ new DropdownQuestion({
+ key: 'brave',
+ label: 'Bravery Rating',
+ options: [
+ {key: 'solid', value: 'Solid'},
+ {key: 'great', value: 'Great'},
+ {key: 'good', value: 'Good'},
+ {key: 'unproven', value: 'Unproven'}
+ ],
+ order: 3
+ }),
+
+ new TextboxQuestion({
+ key: 'firstName',
+ label: 'First name',
+ value: 'Bombasto',
+ required: true,
+ order: 1
+ }),
+
+ new TextboxQuestion({
+ key: 'emailAddress',
+ label: 'Email',
+ type: 'email',
+ order: 2
+ })
+ ];
+
+ return questions.sort((a, b) => a.order - b.order);
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/index.html b/public/docs/_examples/cb-dynamic-form/ts/src/index.html
new file mode 100644
index 0000000000..01963f71e2
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Dynamic Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading app...
+
+
+
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/main.ts b/public/docs/_examples/cb-dynamic-form/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/sample.css b/public/docs/_examples/cb-dynamic-form/ts/src/sample.css
new file mode 100644
index 0000000000..fe2cc28481
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/sample.css
@@ -0,0 +1,7 @@
+.errorMessage{
+ color:red;
+}
+
+.form-row{
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-form-validation/e2e-spec.ts b/public/docs/_examples/cb-form-validation/e2e-spec.ts
new file mode 100644
index 0000000000..8ffc01e250
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/e2e-spec.ts
@@ -0,0 +1,182 @@
+'use strict'; // necessary for node!
+
+import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
+import { appLang, describeIf } from '../protractor-helpers';
+
+// THESE TESTS ARE INCOMPLETE
+describeIf(appLang.appIsTs || appLang.appIsJs, 'Form Validation Tests', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ describe('Hero Form 1', () => {
+ beforeAll(() => {
+ getPage('hero-form-template1');
+ });
+
+ tests();
+ });
+
+ describe('Hero Form 2', () => {
+ beforeAll(() => {
+ getPage('hero-form-template2');
+ });
+
+ tests();
+ bobTests();
+ });
+
+ describe('Hero Form 3 (Reactive)', () => {
+ beforeAll(() => {
+ getPage('hero-form-reactive3');
+ makeNameTooLong();
+ });
+
+ tests();
+ bobTests();
+ });
+});
+
+//////////
+
+const testName = 'Test Name';
+
+let page: {
+ section: ElementFinder,
+ form: ElementFinder,
+ title: ElementFinder,
+ nameInput: ElementFinder,
+ alterEgoInput: ElementFinder,
+ powerSelect: ElementFinder,
+ errorMessages: ElementArrayFinder,
+ heroFormButtons: ElementArrayFinder,
+ heroSubmitted: ElementFinder
+};
+
+function getPage(sectionTag: string) {
+ let section = element(by.css(sectionTag));
+ let buttons = section.all(by.css('button'));
+
+ page = {
+ section: section,
+ form: section.element(by.css('form')),
+ title: section.element(by.css('h1')),
+ nameInput: section.element(by.css('#name')),
+ alterEgoInput: section.element(by.css('#alterEgo')),
+ powerSelect: section.element(by.css('#power')),
+ errorMessages: section.all(by.css('div.alert')),
+ heroFormButtons: buttons,
+ heroSubmitted: section.element(by.css('hero-submitted > div'))
+ };
+}
+
+function tests() {
+ it('should display correct title', function () {
+ expect(page.title.getText()).toContain('Hero Form');
+ });
+
+ it('should not display submitted message before submit', function () {
+ expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(false);
+ });
+
+ it('should have form buttons', function () {
+ expect(page.heroFormButtons.count()).toEqual(2);
+ });
+
+ it('should have error at start', function () {
+ expectFormIsInvalid();
+ });
+
+ // it('showForm', function () {
+ // page.form.getInnerHtml().then(html => console.log(html));
+ // });
+
+ it('should have disabled submit button', function () {
+ expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
+ });
+
+ it('resetting name to valid name should clear errors', function () {
+ const ele = page.nameInput;
+ expect(ele.isPresent()).toBe(true, 'nameInput should exist');
+ ele.clear();
+ ele.sendKeys(testName);
+ expectFormIsValid();
+ });
+
+ it('should produce "required" error after clearing name', function () {
+ page.nameInput.clear();
+ // page.alterEgoInput.click(); // to blur ... didn't work
+ page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
+ expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+ expect(page.errorMessages.get(0).getText()).toContain('required');
+ });
+
+ it('should produce "at least 4 characters" error when name="x"', function () {
+ page.nameInput.clear();
+ page.nameInput.sendKeys('x'); // too short
+ expectFormIsInvalid();
+ expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
+ });
+
+ it('resetting name to valid name again should clear errors', function () {
+ page.nameInput.sendKeys(testName);
+ expectFormIsValid();
+ });
+
+ it('should have enabled submit button', function () {
+ const submitBtn = page.heroFormButtons.get(0);
+ expect(submitBtn.isEnabled()).toBe(true);
+ });
+
+ it('should hide form after submit', function () {
+ page.heroFormButtons.get(0).click();
+ expect(page.title.isDisplayed()).toBe(false);
+ });
+
+ it('submitted form should be displayed', function () {
+ expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(true);
+ });
+
+ it('submitted form should have new hero name', function () {
+ expect(page.heroSubmitted.getText()).toContain(testName);
+ });
+
+ it('clicking edit button should reveal form again', function () {
+ const editBtn = page.heroSubmitted.element(by.css('button'));
+ editBtn.click();
+ expect(page.heroSubmitted.isElementPresent(by.css('h2')))
+ .toBe(false, 'submitted hidden again');
+ expect(page.title.isDisplayed()).toBe(true, 'can see form title');
+ });
+}
+
+function expectFormIsValid() {
+ expect(page.form.getAttribute('class')).toMatch('ng-valid');
+}
+
+function expectFormIsInvalid() {
+ expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+}
+
+function bobTests() {
+ const emsg = 'Someone named "Bob" cannot be a hero.';
+
+ it('should produce "no bob" error after setting name to "Bobby"', function () {
+ page.nameInput.clear();
+ page.nameInput.sendKeys('Bobby');
+ expectFormIsInvalid();
+ expect(page.errorMessages.get(0).getText()).toBe(emsg);
+ });
+
+ it('should be ok again with valid name', function () {
+ page.nameInput.clear();
+ page.nameInput.sendKeys(testName);
+ expectFormIsValid();
+ });
+}
+
+function makeNameTooLong() {
+ // make the first name invalid
+ page.nameInput.sendKeys('ThisHeroNameHasWayWayTooManyLetters');
+}
diff --git a/public/docs/_examples/cb-form-validation/ts/example-config.json b/public/docs/_examples/cb-form-validation/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-form-validation/ts/plnkr.json b/public/docs/_examples/cb-form-validation/ts/plnkr.json
new file mode 100644
index 0000000000..c5656d77f7
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "Validation",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ]
+}
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/app.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..2da4dc4d0a
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/app.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: `
+
+();
+ onClick() { this.submittedChange.emit(false); }
+}
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template.module.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template.module.ts
new file mode 100644
index 0000000000..042c019d5e
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template.module.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { SharedModule } from '../shared/shared.module';
+import { HeroFormTemplate1Component } from './hero-form-template1.component';
+import { HeroFormTemplate2Component } from './hero-form-template2.component';
+
+@NgModule({
+ imports: [ SharedModule, FormsModule ],
+ declarations: [ HeroFormTemplate1Component, HeroFormTemplate2Component ],
+ exports: [ HeroFormTemplate1Component, HeroFormTemplate2Component ]
+})
+export class HeroFormTemplateModule { }
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.html b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.html
new file mode 100644
index 0000000000..22b374b622
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.html
@@ -0,0 +1,61 @@
+
+Hero Form with Validation
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-form-validation/ts/src/main.ts b/public/docs/_examples/cb-form-validation/ts/src/main.ts
new file mode 100644
index 0000000000..f332d1d245
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-i18n/e2e-spec.ts b/public/docs/_examples/cb-i18n/e2e-spec.ts
new file mode 100644
index 0000000000..3dcca5a670
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/e2e-spec.ts
@@ -0,0 +1,33 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', () => {
+
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ it('should display i18n translated welcome: ¡Hola i18n!', function () {
+ expect(element(by.css('h1')).getText()).toEqual('¡Hola i18n!');
+ });
+
+ it('should display the node texts without elements', function () {
+ expect(element(by.css('my-app')).getText()).toContain('No genero ningún elemento');
+ expect(element(by.css('my-app')).getText()).toContain('Yo tampoco genero ningún elemento');
+ });
+
+ it('should display the translated title attribute', function () {
+ const title = element(by.css('img')).getAttribute('title');
+ expect(title).toBe('Logo de Angular');
+ });
+
+ it('should display the plural of: a horde of wolves', function () {
+ expect(element.all(by.css('span')).get(0).getText()).toBe('ningún lobo');
+ });
+
+ it('should display the select of gender', function () {
+ expect(element.all(by.css('span')).get(1).getText()).toBe('El heroe es mujer');
+ });
+
+});
diff --git a/public/docs/_examples/cb-i18n/ts/.gitignore b/public/docs/_examples/cb-i18n/ts/.gitignore
new file mode 100644
index 0000000000..d38bb50aa9
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/.gitignore
@@ -0,0 +1,6 @@
+**/*.ngfactory.ts
+**/*.metadata.json
+dist
+!app/tsconfig.json
+!rollup.js
+!src/systemjs-text-plugin.js
diff --git a/public/docs/_examples/cb-i18n/ts/example-config.json b/public/docs/_examples/cb-i18n/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-i18n/ts/messages.xlf b/public/docs/_examples/cb-i18n/ts/messages.xlf
new file mode 100644
index 0000000000..dee8b65aca
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/messages.xlf
@@ -0,0 +1,47 @@
+
+
+
+
+
+ Hello i18n!
+ An introduction header for this sample
+ User welcome
+
+
+ I don't output any element
+
+
+
+I don't output any element either
+
+ optional description
+ optional meaning
+
+
+ Angular logo
+
+
+
+
+
+
+
+
+ The hero is
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-i18n/ts/plnkr.json b/public/docs/_examples/cb-i18n/ts/plnkr.json
new file mode 100644
index 0000000000..36f2685129
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/plnkr.json
@@ -0,0 +1,19 @@
+{
+ "description": "i18n",
+ "basePath": "src/",
+ "files": [
+ "app/**/*.css",
+ "app/**/*.html",
+ "app/**/*.ts",
+ "messages.xlf",
+ "locale/messages.*.xlf",
+
+ "!**/*.[1].*",
+
+ "main.ts",
+ "styles.css",
+ "systemjs-text-plugin.js",
+ "index.html"
+ ],
+ "tags": ["i18n"]
+}
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.1.html b/public/docs/_examples/cb-i18n/ts/src/app/app.component.1.html
new file mode 100644
index 0000000000..cc7d4f1155
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.1.html
@@ -0,0 +1,15 @@
+
+![]( "Angular logo")
+
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.html b/public/docs/_examples/cb-i18n/ts/src/app/app.component.html
new file mode 100644
index 0000000000..39ace24f79
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.html
@@ -0,0 +1,34 @@
+
+
+I don't output any element
+
+
+
+ + + +I don't output any element either + + + +
+ + +![]( "Angular logo")
+
+
+ + +{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}} + +({{wolves}}) +
+ + +The hero is {gender, select, m {male} f {female}} + +
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts new file mode 100644 index 0000000000..09b8722e9b --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts @@ -0,0 +1,19 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { + wolves = 0; + gender = 'f'; + fly = true; + logo = 'https://angular.io/resources/images/logos/angular/angular.png'; + inc(i: number) { + this.wolves = Math.min(5, Math.max(0, this.wolves + i)); + } + male() { this.gender = 'm'; } + female() { this.gender = 'f'; } +} + diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts new file mode 100644 index 0000000000..64ad44075b --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts @@ -0,0 +1,13 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) + +export class AppModule { } diff --git a/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts b/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts new file mode 100644 index 0000000000..f0bb662dc3 --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts @@ -0,0 +1,33 @@ +// #docregion +import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core'; + +export function getTranslationProviders(): Promise {
+
+ // Get the locale id from the global
+ const locale = document['locale'] as string;
+
+ // return no providers if fail to get translation file for locale
+ const noProviders: Object[] = [];
+
+ // No locale or U.S. English: no translation providers
+ if (!locale || locale === 'en-US') {
+ return Promise.resolve(noProviders);
+ }
+
+ // Ex: 'locale/messages.es.xlf`
+ const translationFile = `./locale/messages.${locale}.xlf`;
+
+ return getTranslationsWithSystemJs(translationFile)
+ .then( (translations: string ) => [
+ { provide: TRANSLATIONS, useValue: translations },
+ { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
+ { provide: LOCALE_ID, useValue: locale }
+ ])
+ .catch(() => noProviders); // ignore if file not found
+}
+
+declare var System: any;
+
+function getTranslationsWithSystemJs(file: string) {
+ return System.import(file + '!text'); // relies on text plugin
+}
diff --git a/public/docs/_examples/cb-i18n/ts/src/index.html b/public/docs/_examples/cb-i18n/ts/src/index.html
new file mode 100644
index 0000000000..ce90cd24c4
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+ Angular i18n example
+ Loading...
+
+
diff --git a/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf b/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf
new file mode 100644
index 0000000000..7b813c38dd
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Hello i18n!
+ ¡Hola i18n!
+ An introduction header for this sample
+ User welcome
+
+
+ I don't output any element
+ No genero ningún elemento
+
+
+
+I don't output any element either
+
+ Yo tampoco genero ningún elemento
+ optional description
+ optional meaning
+
+
+ Angular logo
+ Logo de Angular
+
+
+ {wolves, plural, =0 {ningún lobo} =1 {un lobo} =2 {dos lobos} other {una horda de lobos}}
+
+
+ The hero is
+ El heroe es
+
+
+ {gender, select, m {hombre} f {mujer}}
+
+
+
+
diff --git a/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf.html b/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf.html
new file mode 100644
index 0000000000..a6cdccc6c1
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/locale/messages.es.xlf.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+ Hello i18n!
+ ¡Hola i18n!
+ An introduction header for this sample
+ User welcome
+
+
+
+
+ I don't output any element
+ No genero ningún elemento
+
+
+ I don't output any element either
+ Yo tampoco genero ningún elemento
+ optional description
+ optional meaning
+
+
+ Angular logo
+ Logo de Angular
+
+
+
+
+ {wolves, plural, =0 {ningún lobo} =1 {un lobo} =2 {dos lobos} other {una horda de lobos}}
+
+
+
+
+
+ The hero is
+ El heroe es
+
+
+
+
+ {gender, select, m {hombre} f {mujer}}
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-i18n/ts/src/main.1.ts b/public/docs/_examples/cb-i18n/ts/src/main.1.ts
new file mode 100644
index 0000000000..f332d1d245
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/main.1.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-i18n/ts/src/main.ts b/public/docs/_examples/cb-i18n/ts/src/main.ts
new file mode 100644
index 0000000000..894cecfb10
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/main.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { getTranslationProviders } from './app/i18n-providers';
+
+import { AppModule } from './app/app.module';
+
+getTranslationProviders().then(providers => {
+ const options = { providers };
+ platformBrowserDynamic().bootstrapModule(AppModule, options);
+});
diff --git a/public/docs/_examples/cb-i18n/ts/src/systemjs-text-plugin.js b/public/docs/_examples/cb-i18n/ts/src/systemjs-text-plugin.js
new file mode 100644
index 0000000000..d5ca508fe0
--- /dev/null
+++ b/public/docs/_examples/cb-i18n/ts/src/systemjs-text-plugin.js
@@ -0,0 +1,14 @@
+// #docregion
+/*
+ SystemJS Text plugin from
+ https://github.com/systemjs/plugin-text/blob/master/text.js
+*/
+exports.translate = function(load) {
+ if (this.builder && this.transpiler) {
+ load.metadata.format = 'esm';
+ return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
+ }
+
+ load.metadata.format = 'amd';
+ return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
+}
diff --git a/public/docs/_examples/cb-set-document-title/e2e-spec.ts b/public/docs/_examples/cb-set-document-title/e2e-spec.ts
new file mode 100644
index 0000000000..801b732995
--- /dev/null
+++ b/public/docs/_examples/cb-set-document-title/e2e-spec.ts
@@ -0,0 +1,31 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+// gulp run-e2e-tests --filter=cb-set-document-title
+describe('Set Document Title', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should set the document title', function () {
+
+ let titles = [
+ 'Good morning!',
+ 'Good afternoon!',
+ 'Good evening!'
+ ];
+
+ element.all( by.css( 'ul li a' ) ).each(
+ function iterator( element: ElementFinder, i: number ) {
+
+ element.click();
+ expect( browser.getTitle() ).toEqual( titles[ i ] );
+
+ }
+ );
+
+ });
+
+});
diff --git a/public/docs/_examples/cb-set-document-title/ts/example-config.json b/public/docs/_examples/cb-set-document-title/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-set-document-title/ts/plnkr.json b/public/docs/_examples/cb-set-document-title/ts/plnkr.json
new file mode 100644
index 0000000000..020d5a1db2
--- /dev/null
+++ b/public/docs/_examples/cb-set-document-title/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Set The Document Title In Angular",
+ "basePath": "src/",
+ "files": [
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ],
+ "tags": [ "cookbook" ]
+}
diff --git a/public/docs/_examples/cb-set-document-title/ts/src/app/app.component.ts b/public/docs/_examples/cb-set-document-title/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..f1905e635d
--- /dev/null
+++ b/public/docs/_examples/cb-set-document-title/ts/src/app/app.component.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+// Import the native Angular services.
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+@Component({
+selector: 'my-app',
+template:
+ `
+ Setting The Document Title Using The Title Service
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading app...
+
+
+
diff --git a/public/docs/_examples/cb-set-document-title/ts/src/main.ts b/public/docs/_examples/cb-set-document-title/ts/src/main.ts
new file mode 100644
index 0000000000..f332d1d245
--- /dev/null
+++ b/public/docs/_examples/cb-set-document-title/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
new file mode 100644
index 0000000000..bc67bac8f0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -0,0 +1,77 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('TypeScript to Javascript tests', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should display the basic component example', function () {
+ testTag('hero-view', 'Hero Detail: Windstorm');
+ });
+
+ it('should display the component example with lifecycle methods', function () {
+ testTag('hero-lifecycle', 'Hero: Windstorm');
+ });
+
+ it('should display component with DI example', function () {
+ testTag('hero-di', 'Hero: Windstorm');
+ });
+
+ it('should display component with DI using @Inject example', function () {
+ testTag('hero-di-inject', 'Hero: Windstorm');
+ });
+
+ it('should support optional, attribute, and query injections', function () {
+ let app = element(by.css('hero-di-inject-additional'));
+ let h1 = app.element(by.css('h1'));
+ let okMsg = app.element(by.css('p'));
+
+ expect(h1.getText()).toBe('Tour of Heroes');
+ app.element(by.buttonText('OK')).click();
+ expect(okMsg.getText()).toBe('OK!');
+ });
+
+ it('should support component with inputs and outputs', function () {
+ let app = element(by.css('hero-io'));
+ let confirmComponent = app.element(by.css('app-confirm'));
+
+ confirmComponent.element(by.buttonText('OK')).click();
+ expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
+
+ confirmComponent.element(by.buttonText('Cancel')).click();
+ expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
+ });
+
+ it('should support host bindings and host listeners', function() {
+ let app = element(by.css('hero-host'));
+ let h1 = app.element(by.css('h1'));
+
+ expect(app.getAttribute('class')).toBe('heading');
+ expect(app.getAttribute('title')).toContain('Tooltip');
+
+ h1.click();
+ expect(h1.getAttribute('class')).toBe('active');
+
+ h1.click();
+ browser.actions().doubleClick(h1.getWebElement()).perform();
+ expect(h1.getAttribute('class')).toBe('active');
+ });
+
+ it('should support content and view queries', function() {
+ let app = element(by.css('hero-queries'));
+ let windstorm = app.element(by.css('view-child:first-child'));
+
+ app.element(by.css('button')).click();
+ expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
+ expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
+ });
+
+ function testTag(selector: string, expectedText: string) {
+ let component = element(by.css(selector));
+ expect(component.getText()).toBe(expectedText);
+ }
+
+});
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
new file mode 100644
index 0000000000..81f31aaf0d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
new file mode 100644
index 0000000000..447fc5f605
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "TypeScript to JavaScript",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/.babelrc
new file mode 100644
index 0000000000..3aaf507508
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "es2015",
+ "angular2"
+ ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
new file mode 100644
index 0000000000..d425788f46
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html',
+ styles: [
+ // See hero-di-inject-additional.component
+ 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+ '.heading {font-style: italic}'
+ ]
+})
+export class AppComponent {
+ title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.html
new file mode 100644
index 0000000000..995645073a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.html
@@ -0,0 +1,31 @@
+
+
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
+
+
+
+ element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+
+ // HostListeners on the entire element
+ '(click)': 'clicked()',
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+ title = 'Hero Host in Metadata Tooltip';
+ headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ clicked() {
+ this.clicks += 1;
+ }
+
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host',
+ template: `
+ element
+ styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+ // HostBindings to the element
+ @HostBinding() title = 'Hero Host in Decorators Tooltip';
+ @HostBinding('class.heading') headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ // HostListeners on the entire element
+ @HostListener('click')
+ clicked() {
+ this.clicks += 1;
+ }
+
+ @HostListener('mouseenter', ['$event'])
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ @HostListener('mouseleave', ['$event'])
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
new file mode 100644
index 0000000000..4b36411e78
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-io',
+ template: `
+
+
+ OK clicked
+ Cancel clicked
+ `
+})
+export class HeroIOComponent {
+ okClicked = false;
+ cancelClicked = false;
+
+ onOk() {
+ this.okClicked = true;
+ }
+
+ onCancel() {
+ this.cancelClicked = true;
+ }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..2539266597
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-lifecycle',
+ template: `
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+ `
+})
+export class HeroQueriesComponent {
+ active = false;
+ heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+
+ @ViewChildren(ViewChildComponent) views;
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
new file mode 100644
index 0000000000..04c14a9631
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
@@ -0,0 +1,25 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+ selector: 'hero-title',
+ templateUrl: './hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+ msg = '';
+ constructor(
+ @Inject('titlePrefix') @Optional() titlePrefix,
+ @Attribute('title') title
+ ) {
+ this.titlePrefix = titlePrefix;
+ this.title = title;
+ }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.html
new file mode 100644
index 0000000000..164683cb7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/main.es6
new file mode 100644
index 0000000000..f22933ba8e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
new file mode 100644
index 0000000000..81f31aaf0d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
new file mode 100644
index 0000000000..447fc5f605
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "TypeScript to JavaScript",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/src/.babelrc
new file mode 100644
index 0000000000..3c078e9f99
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/.babelrc
@@ -0,0 +1,5 @@
+{
+ "presets": [
+ "es2015"
+ ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
new file mode 100644
index 0000000000..6079f7f246
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+ constructor() {
+ this.title = 'Plain ES6 JavaScript';
+ }
+}
+
+AppComponent.annotations = [
+ new Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html',
+ styles: [
+ // See hero-di-inject-additional.component
+ 'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+ '.heading {font-style: italic}'
+ ]
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.html
new file mode 100644
index 0000000000..52b9b4580e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.html
@@ -0,0 +1,30 @@
+
+
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
+
+
+
+ element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+ '(click)': 'clicked()',
+
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+ })
+];
+// #enddocregion metadata
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-io.component.es6
new file mode 100644
index 0000000000..0dc8c08f2d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-io.component.es6
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+export class HeroIOComponent {
+ constructor() {
+ this.okClicked = false;
+ this.cancelClicked = false;
+ }
+
+ onOk() {
+ this.okClicked = true;
+ }
+
+ onCancel() {
+ this.cancelClicked = true;
+ }
+}
+
+HeroIOComponent.annotations = [
+ new Component({
+ selector: 'hero-io',
+ template: `
+
+
+ OK clicked
+ Cancel clicked
+ `
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..b394ff59aa
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+export class HeroComponent {
+ ngOnInit() {
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
+ }
+}
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-lifecycle',
+ template: `
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+ inputs: ['hero'],
+ queries: {
+ content: new ContentChild(ContentChildComponent)
+ }
+ })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+ constructor(){
+ this.active = false;
+ this.heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+ }
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+
+HeroQueriesComponent.annotations = [
+ new Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+ `,
+ queries: {
+ views: new ViewChildren(ViewChildComponent)
+ }
+ })
+];
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
new file mode 100644
index 0000000000..4b89dfba83
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
@@ -0,0 +1,28 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+ constructor(titlePrefix, title) {
+ this.titlePrefix = titlePrefix;
+ this.title = title;
+ this.msg = '';
+ }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+ new Component({
+ selector: 'hero-title',
+ templateUrl: './hero-title.component.html'
+ })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+ [new Optional(), new Inject('titlePrefix')],
+ [new Attribute('title')]
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.html
new file mode 100644
index 0000000000..164683cb7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/main.es6
new file mode 100644
index 0000000000..f22933ba8e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js/example-config.json b/public/docs/_examples/cb-ts-to-js/js/example-config.json
new file mode 100644
index 0000000000..81f31aaf0d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/plnkr.json b/public/docs/_examples/cb-ts-to-js/js/plnkr.json
new file mode 100644
index 0000000000..5e1eb188be
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "TypeScript to JavaScript",
+ "basePath": "src/",
+ "files":[
+ "!**/karma*.*"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/src/app/app.component.html
new file mode 100644
index 0000000000..4ca26f2657
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/app.component.html
@@ -0,0 +1,47 @@
+
+
+Interfaces
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
+
+
+
+
+ element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+ '(click)': 'clicked()',
+
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+ })
+ ];
+
+ function HeroComponent() {
+ this.clicks = 0;
+ this.headingClass = true;
+ this.title = 'Hero Host Tooltip content';
+ }
+
+ HeroComponent.prototype.clicked = function() {
+ this.clicks += 1;
+ }
+
+ HeroComponent.prototype.enter = function(event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ HeroComponent.prototype.leave = function(event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+ // #enddocregion
+
+ app.HeroHostComponent = app.HeroComponent;
+ app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+ var old = app.HeroComponent;
+
+ // #docregion dsl
+ app.HeroComponent = ng.core.Component({
+ selector: 'hero-host-dsl',
+ template: `
+ element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+ '(click)': 'clicked()',
+
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: coral;}']
+ })
+ .Class({
+ constructor: function HeroComponent() {
+ this.clicks = 0;
+ this.headingClass = true;
+ this.title = 'Hero Host Tooltip DSL content';
+ },
+
+ clicked() {
+ this.clicks += 1;
+ },
+
+ enter(event) {
+ this.active = true;
+ this.headingClass = false;
+ },
+
+ leave(event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+ });
+ // #enddocregion dsl
+
+ app.HeroHostDslComponent = app.HeroComponent;
+ app.HeroComponent = old;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io-dsl.component.html
new file mode 100644
index 0000000000..c8023ccb45
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io-dsl.component.html
@@ -0,0 +1,7 @@
+
+
+OK clicked
+Cancel clicked
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.html
new file mode 100644
index 0000000000..215ddccf92
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.html
@@ -0,0 +1,7 @@
+
+
+OK clicked
+Cancel clicked
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.js
new file mode 100644
index 0000000000..b09208ce68
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-io.component.js
@@ -0,0 +1,52 @@
+(function(app) {
+
+ var old = app.HeroComponent
+
+ app.HeroComponent = HeroComponent;
+
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-io',
+ templateUrl: 'app/hero-io.component.html'
+ })
+ ];
+
+ function HeroComponent() { }
+
+ HeroComponent.prototype.onOk = function() {
+ this.okClicked = true;
+ }
+
+ HeroComponent.prototype.onCancel = function() {
+ this.cancelClicked = true;
+ }
+
+ app.HeroIOComponent = app.HeroComponent;
+ app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+ var old = app.HeroComponent
+
+ app.HeroComponent = ng.core.Component({
+ selector: 'hero-io-dsl',
+ templateUrl: 'app/hero-io-dsl.component.html'
+ })
+ .Class({
+ constructor: function HeroComponent() { },
+ onOk: function() {
+ this.okClicked = true;
+ },
+ onCancel: function() {
+ this.cancelClicked = true;
+ }
+ });
+
+ app.HeroIODslComponent = app.HeroComponent;
+ app.HeroComponent = old;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-lifecycle.component.js
new file mode 100644
index 0000000000..2a68288f92
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-lifecycle.component.js
@@ -0,0 +1,52 @@
+// #docplaster
+(function(app) {
+
+ var old = app.HeroComponent;
+
+ // #docregion
+ app.HeroComponent = HeroComponent;
+
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-lifecycle',
+ template: '' +
+ '{{hero.name}} ' +
+ '
',
+ styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+ inputs: ['hero'],
+ queries: {
+ content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+ }
+ })
+ .Class({
+ constructor: function HeroQueriesHeroComponent() {
+ this.active = false;
+ },
+
+ activate: function() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+ });
+ // #enddocregion content
+
+ ////////////////////
+
+ // #docregion view
+ app.heroQueries.HeroQueriesComponent = ng.core.Component({
+ selector: 'hero-queries',
+ template:
+ '' +
+ ' ' +
+ '',
+ queries: {
+ views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+ }
+ })
+ .Class({
+ constructor: function HeroQueriesComponent() {
+ this.active = false;
+ this.heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+ },
+
+ activate: function() {
+ this.active = !this.active;
+ this.views.forEach(function(view) {
+ view.activate();
+ });
+ },
+ });
+
+ // #docregion defined-property
+ // add prototype property w/ getter outside the DSL
+ var proto = app.heroQueries.HeroQueriesComponent.prototype;
+ Object.defineProperty(proto, "buttonLabel", {
+ get: function () {
+ return this.active ? 'Deactivate' : 'Activate';
+ },
+ enumerable: true
+ });
+ // #enddocregion defined-property
+ // #enddocregion view
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.html
new file mode 100644
index 0000000000..164683cb7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/main.js b/public/docs/_examples/cb-ts-to-js/js/src/main.js
new file mode 100644
index 0000000000..fd3e737c9e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/src/main.js
@@ -0,0 +1,9 @@
+(function(app) {
+
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+
+document.addEventListener('DOMContentLoaded', function() {
+ platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/ts/example-config.json b/public/docs/_examples/cb-ts-to-js/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-ts-to-js/ts/plnkr.json b/public/docs/_examples/cb-ts-to-js/ts/plnkr.json
new file mode 100644
index 0000000000..447fc5f605
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "TypeScript to JavaScript",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.html
new file mode 100644
index 0000000000..995645073a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.html
@@ -0,0 +1,31 @@
+
+
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
+
+
+
+ element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+
+ // HostListeners on the entire element
+ '(click)': 'clicked()',
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+ title = 'Hero Host in Metadata Tooltip';
+ headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ clicked() {
+ this.clicks += 1;
+ }
+
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host.component.ts
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host.component.ts
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host',
+ template: `
+ element
+ styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+ // HostBindings to the element
+ @HostBinding() title = 'Hero Host in Decorators Tooltip';
+ @HostBinding('class.heading') headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ // HostListeners on the entire element
+ @HostListener('click')
+ clicked() {
+ this.clicks += 1;
+ }
+
+ @HostListener('mouseenter', ['$event'])
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ @HostListener('mouseleave', ['$event'])
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-io.component.ts
new file mode 100644
index 0000000000..4b36411e78
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-io.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-io',
+ template: `
+
+
+ OK clicked
+ Cancel clicked
+ `
+})
+export class HeroIOComponent {
+ okClicked = false;
+ cancelClicked = false;
+
+ onOk() {
+ this.okClicked = true;
+ }
+
+ onCancel() {
+ this.cancelClicked = true;
+ }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts
new file mode 100644
index 0000000000..2629c85a1a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'hero-lifecycle',
+ template: `
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero: any;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content: ContentChildComponent;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+ `
+})
+export class HeroQueriesComponent {
+ active = false;
+ heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+
+ @ViewChildren(ViewChildComponent) views: QueryList;
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ // #docregion defined-property
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+ // #enddocregion defined-property
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html
new file mode 100644
index 0000000000..164683cb7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/main.ts b/public/docs/_examples/cb-ts-to-js/ts/src/main.ts
new file mode 100644
index 0000000000..f22933ba8e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/main.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore
new file mode 100644
index 0000000000..ca3f2dbd5e
--- /dev/null
+++ b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore
@@ -0,0 +1 @@
+!tsconfig.json
diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json b/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json
new file mode 100644
index 0000000000..2624488890
--- /dev/null
+++ b/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "removeComments": false,
+ "noImplicitAny": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "typeRoots": [
+ "node_modules/@types"
+ ]
+ },
+ "compileOnSave": true
+}
diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts b/public/docs/_examples/cli-quickstart/e2e-spec.ts
new file mode 100644
index 0000000000..59816e13c2
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/e2e-spec.ts
@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('cli-quickstart App', () => {
+ beforeEach(() => {
+ return browser.get('/');
+ });
+
+ it('should display message saying app works', () => {
+ let pageTitle = element(by.css('app-root h1')).getText();
+ expect(pageTitle).toEqual('My First Angular App');
+ });
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/.angular-cli.json b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
new file mode 100644
index 0000000000..49a6b93bd0
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
@@ -0,0 +1,57 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "project": {
+ "name": "master-project"
+ },
+ "apps": [
+ {
+ "root": "src",
+ "outDir": "dist",
+ "assets": [
+ "assets",
+ "favicon.ico"
+ ],
+ "index": "index.html",
+ "main": "main.ts",
+ "polyfills": "polyfills.ts",
+ "test": "test.ts",
+ "tsconfig": "tsconfig.app.json",
+ "testTsconfig": "tsconfig.spec.json",
+ "prefix": "app",
+ "styles": [
+ "styles.css"
+ ],
+ "scripts": [],
+ "environmentSource": "environments/environment.ts",
+ "environments": {
+ "dev": "environments/environment.ts",
+ "prod": "environments/environment.prod.ts"
+ }
+ }
+ ],
+ "e2e": {
+ "protractor": {
+ "config": "./protractor.conf.js"
+ }
+ },
+ "lint": [
+ {
+ "project": "src/tsconfig.app.json"
+ },
+ {
+ "project": "src/tsconfig.spec.json"
+ },
+ {
+ "project": "e2e/tsconfig.e2e.json"
+ }
+ ],
+ "test": {
+ "karma": {
+ "config": "./karma.conf.js"
+ }
+ },
+ "defaults": {
+ "styleExt": "css",
+ "component": {}
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/.editorconfig b/public/docs/_examples/cli-quickstart/ts/.editorconfig
new file mode 100644
index 0000000000..6e87a003da
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore
new file mode 100644
index 0000000000..04a48dc643
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.gitignore
@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
+
+!src/styles.css
+!karma.conf.js
+!protractor.conf.js
diff --git a/public/docs/_examples/cli-quickstart/ts/README.md b/public/docs/_examples/cli-quickstart/ts/README.md
new file mode 100644
index 0000000000..efe9ec67ae
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/README.md
@@ -0,0 +1,27 @@
+# MasterProject
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json b/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json
new file mode 100644
index 0000000000..ac61d35f83
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json
@@ -0,0 +1,11 @@
+{
+ "open": false,
+ "logLevel": "silent",
+ "port": 8080,
+ "server": {
+ "baseDir": "dist",
+ "middleware": {
+ "0": null
+ }
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000000..4346d120c8
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { MyAppPage } from './app.po';
+
+describe('my-app App', function() {
+ let page: MyAppPage;
+
+ beforeEach(() => {
+ page = new MyAppPage();
+ });
+
+ it('should display message saying app works', () => {
+ page.navigateTo();
+ expect(page.getParagraphText()).toEqual('app works!');
+ });
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts
new file mode 100644
index 0000000000..5d82157326
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class MyAppPage {
+ navigateTo() {
+ return browser.get('/');
+ }
+
+ getParagraphText() {
+ return element(by.css('app-root h1')).getText();
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
new file mode 100644
index 0000000000..74c2bca131
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../dist/out-tsc-e2e",
+ "module": "commonjs",
+ "target": "es6",
+ "types":[
+ "jasmine",
+ "node"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/example-config.json b/public/docs/_examples/cli-quickstart/ts/example-config.json
new file mode 100644
index 0000000000..313764c3c6
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/example-config.json
@@ -0,0 +1,4 @@
+{
+ "build": "build:cli",
+ "run": "serve:cli"
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/karma.conf.js b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
new file mode 100644
index 0000000000..84b4cd5aca
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular/cli'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular/cli/plugins/karma')
+ ],
+ client:{
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ files: [
+ { pattern: './src/test.ts', watched: false }
+ ],
+ preprocessors: {
+ './src/test.ts': ['@angular/cli']
+ },
+ mime: {
+ 'text/x-typescript': ['ts','tsx']
+ },
+ coverageIstanbulReporter: {
+ reports: [ 'html', 'lcovonly' ],
+ fixWebpackSourcePaths: true
+ },
+ angularCli: {
+ environment: 'dev'
+ },
+ reporters: config.angularCli && config.angularCli.codeCoverage
+ ? ['progress', 'coverage-istanbul']
+ : ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false
+ });
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/protractor.conf.js b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
new file mode 100644
index 0000000000..2cbc329391
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './e2e/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ beforeLaunch: function() {
+ require('ts-node').register({
+ project: 'e2e/tsconfig.e2e.json'
+ });
+ },
+ onPrepare() {
+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ }
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css
new file mode 100644
index 0000000000..a2b21fae82
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css
@@ -0,0 +1,6 @@
+/* #docregion */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html
new file mode 100644
index 0000000000..b6931b538a
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html
@@ -0,0 +1,3 @@
+MyApp
+ Loading...
+
+
diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts
new file mode 100644
index 0000000000..a9ca1caf8c
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
new file mode 100644
index 0000000000..53bdaf1b86
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
@@ -0,0 +1,68 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl'; // Run `npm install --save intl`.
diff --git a/public/docs/_examples/cli-quickstart/ts/src/styles.css b/public/docs/_examples/cli-quickstart/ts/src/styles.css
new file mode 100644
index 0000000000..d81835d0cd
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/styles.css
@@ -0,0 +1,116 @@
+/* #docregion , quickstart, toh */
+/* Master Styles */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
+h2, h3 {
+ color: #444;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: lighter;
+}
+body {
+ margin: 2em;
+}
+/* #enddocregion quickstart */
+body, input[text], button {
+ color: #888;
+ font-family: Cambria, Georgia;
+}
+/* #enddocregion toh */
+a {
+ cursor: pointer;
+ cursor: hand;
+}
+button {
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
+button:disabled {
+ background-color: #eee;
+ color: #aaa;
+ cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+ padding: 5px 10px;
+ text-decoration: none;
+ margin-right: 10px;
+ margin-top: 10px;
+ display: inline-block;
+ background-color: #eee;
+ border-radius: 4px;
+}
+nav a:visited, a:link {
+ color: #607D8B;
+}
+nav a:hover {
+ color: #039be5;
+ background-color: #CFD8DC;
+}
+nav a.active {
+ color: #039be5;
+}
+
+/* items class */
+.items {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 24em;
+}
+.items li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.items li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+.items li.selected {
+ background-color: #CFD8DC;
+ color: white;
+}
+.items li.selected:hover {
+ background-color: #BBD8DC;
+}
+.items .text {
+ position: relative;
+ top: -3px;
+}
+.items .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+/* #docregion toh */
+/* everywhere else */
+* {
+ font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/test.ts b/public/docs/_examples/cli-quickstart/ts/src/test.ts
new file mode 100644
index 0000000000..9bf72267e9
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/test.ts
@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
new file mode 100644
index 0000000000..9f12c4b849
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016",
+ "dom"
+ ],
+ "outDir": "../out-tsc/app",
+ "target": "es5",
+ "module": "es2015",
+ "baseUrl": "",
+ "types": []
+ },
+ "exclude": [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
new file mode 100644
index 0000000000..6c5160e12e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../out-tsc/spec",
+ "module": "commonjs",
+ "target": "es6",
+ "baseUrl": "",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
new file mode 100644
index 0000000000..cde5e35054
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/zipper.json b/public/docs/_examples/cli-quickstart/ts/zipper.json
new file mode 100644
index 0000000000..70bf41659e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/zipper.json
@@ -0,0 +1,11 @@
+{
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[0-9].*",
+ ".angular-cli.json",
+ "protractor.conf.js"
+ ],
+ "removeSystemJsConfig": true,
+ "type": "cli"
+}
diff --git a/public/docs/_examples/component-styles/e2e-spec.ts b/public/docs/_examples/component-styles/e2e-spec.ts
new file mode 100644
index 0000000000..32bd30832c
--- /dev/null
+++ b/public/docs/_examples/component-styles/e2e-spec.ts
@@ -0,0 +1,68 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Component Style Tests', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('scopes component styles to component view', function() {
+ let componentH1 = element(by.css('hero-app > h1'));
+ let externalH1 = element(by.css('body > h1'));
+
+ expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
+ expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
+ });
+
+
+ it('allows styling :host element', function() {
+ let host = element(by.css('hero-details'));
+
+ expect(host.getCssValue('borderWidth')).toEqual('1px');
+ });
+
+ it('supports :host() in function form', function() {
+ let host = element(by.css('hero-details'));
+
+ host.element(by.buttonText('Activate')).click();
+ expect(host.getCssValue('borderWidth')).toEqual('3px');
+ });
+
+ it('allows conditional :host-context() styling', function() {
+ let h2 = element(by.css('hero-details h2'));
+
+ expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+ });
+
+ it('styles both view and content children with /deep/', function() {
+ let viewH3 = element(by.css('hero-team h3'));
+ let contentH3 = element(by.css('hero-controls h3'));
+
+ expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+ expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+ });
+
+ it('includes styles loaded with CSS @import', function() {
+ let host = element(by.css('hero-details'));
+
+ expect(host.getCssValue('padding')).toEqual('10px');
+ });
+
+ it('processes template inline styles', function() {
+ let button = element(by.css('hero-controls button'));
+ let externalButton = element(by.css('body > button'));
+ expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+ expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+ });
+
+ it('processes template s', function() {
+ let li = element(by.css('hero-team li:first-child'));
+ let externalLi = element(by.css('body > ul li'));
+
+ expect(li.getCssValue('listStyleType')).toEqual('square');
+ expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+ });
+
+});
diff --git a/public/docs/_examples/component-styles/ts/example-config.json b/public/docs/_examples/component-styles/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/component-styles/ts/plnkr.json b/public/docs/_examples/component-styles/ts/plnkr.json
new file mode 100644
index 0000000000..e045ebcb38
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Component Styles",
+ "basePath": "src/",
+ "files": [
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.native.*"
+ ],
+ "tags": ["CSS"]
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/app.module.ts b/public/docs/_examples/component-styles/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..31c72cbbf2
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/app.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroAppComponent } from './hero-app.component';
+import { HeroAppMainComponent } from './hero-app-main.component';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
+import { HeroTeamComponent } from './hero-team.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ HeroAppComponent,
+ HeroAppMainComponent,
+ HeroDetailsComponent,
+ HeroControlsComponent,
+ QuestSummaryComponent,
+ HeroTeamComponent
+ ],
+ bootstrap: [ HeroAppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/src/app/hero-app-main.component.ts
new file mode 100644
index 0000000000..aebb1f729e
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-app-main.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+ selector: 'hero-app-main',
+ template: `
+
+
+ `
+})
+export class HeroAppMainComponent {
+ @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts
new file mode 100644
index 0000000000..5f1923e6f3
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts
@@ -0,0 +1,24 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+ selector: 'hero-app',
+ template: `
+ Component Styles
+
+
{{hero.name}} Detail
+Id: {{hero.id}}
+Name:
+
+
+
+
+Power:
diff --git a/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts
new file mode 100644
index 0000000000..b75d6dd225
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+ selector: 'hero-detail',
+ templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+ @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/architecture/ts/src/app/hero-list.component.1.html b/public/docs/_examples/architecture/ts/src/app/hero-list.component.1.html
new file mode 100644
index 0000000000..c6e6dd5133
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/hero-list.component.1.html
@@ -0,0 +1,9 @@
+
+Hero List
+ +Pick a hero from the list
+-
+
- + {{hero.name}} + +
Sales Tax Calculator
+ Amount: + +
+ The sales tax is
+ {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+
+ `,
+ providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+ constructor(private salesTaxService: SalesTaxService) { }
+
+ getTax(value: string | number) {
+ return this.salesTaxService.getVAT(value);
+ }
+}
diff --git a/public/docs/_examples/architecture/ts/src/app/sales-tax.service.ts b/public/docs/_examples/architecture/ts/src/app/sales-tax.service.ts
new file mode 100644
index 0000000000..d859dc1595
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/sales-tax.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+ constructor(private rateService: TaxRateService) { }
+
+ getVAT(value: string | number) {
+ let amount = (typeof value === 'string') ?
+ parseFloat(value) : value;
+ return (amount || 0) * this.rateService.getRate('VAT');
+ }
+}
diff --git a/public/docs/_examples/architecture/ts/src/app/tax-rate.service.ts b/public/docs/_examples/architecture/ts/src/app/tax-rate.service.ts
new file mode 100644
index 0000000000..fff2f4df8f
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/app/tax-rate.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+ getRate(rateName: string) { return 0.10; } // 10% everywhere
+}
diff --git a/public/docs/_examples/architecture/ts/src/index.html b/public/docs/_examples/architecture/ts/src/index.html
new file mode 100644
index 0000000000..9aadf6e109
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+ My First Attribute Directive
+ +Highlight me!
+ + + +Highlighted in yellow
+Highlighted in orange
+ + + +Highlighted with parent component's color
+ diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts new file mode 100644 index 0000000000..d9b98ef3fd --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.1.html' +}) +// #docregion class +export class AppComponent { + color = 'yellow'; +} diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.html b/public/docs/_examples/attribute-directives/ts/src/app/app.component.html new file mode 100644 index 0000000000..3adb52bc1e --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.html @@ -0,0 +1,24 @@ + +My First Attribute Directive
+ +Pick a highlight color
+
+ Green
+ Yellow
+ Cyan
+
+
+Highlight me!
+ + + ++ Highlight me too! +
+ + ++
Mouse over the following lines to see fixed highlights
+ +Highlighted in yellow
+Highlighted in orange
diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts new file mode 100644 index 0000000000..693918d8d6 --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts @@ -0,0 +1,11 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +// #docregion class +export class AppComponent { + color: string; +} diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.module.ts b/public/docs/_examples/attribute-directives/ts/src/app/app.module.ts new file mode 100644 index 0000000000..ca35d560fb --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { HighlightDirective } from './highlight.directive'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + HighlightDirective + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/attribute-directives/ts/src/app/dummy.module.1.ts b/public/docs/_examples/attribute-directives/ts/src/app/dummy.module.1.ts new file mode 100644 index 0000000000..7ba41d53bb --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/dummy.module.1.ts @@ -0,0 +1,17 @@ +// Not used. Keep away from plunker +// Keeps ATLS from complaining about undeclared directives. +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component.1'; +import { HighlightDirective as HLD1 } from './highlight.directive.1'; +import { HighlightDirective as HLD2 } from './highlight.directive.2'; +import { HighlightDirective as HLD3 } from './highlight.directive.3'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, HLD1, HLD2, HLD3 + ] +}) +export class DummyModule { } diff --git a/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts new file mode 100644 index 0000000000..4cacc0d22e --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts @@ -0,0 +1,10 @@ +/* tslint:disable:no-unused-variable */ +// #docregion +import { Directive, ElementRef, Input } from '@angular/core'; + +@Directive({ selector: '[myHighlight]' }) +export class HighlightDirective { + constructor(el: ElementRef) { + el.nativeElement.style.backgroundColor = 'yellow'; + } +} diff --git a/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.2.ts new file mode 100644 index 0000000000..4696132f64 --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.2.ts @@ -0,0 +1,41 @@ +/* tslint:disable:no-unused-variable member-ordering */ +// #docplaster +// #docregion +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[myHighlight]' +}) +export class HighlightDirective { + // #docregion ctor + constructor(private el: ElementRef) { } + // #enddocregion ctor + + // #docregion mouse-methods, host + @HostListener('mouseenter') onMouseEnter() { + // #enddocregion host + this.highlight('yellow'); + // #docregion host + } + + @HostListener('mouseleave') onMouseLeave() { + // #enddocregion host + this.highlight(null); + // #docregion host + } + // #enddocregion host + + private highlight(color: string) { + this.el.nativeElement.style.backgroundColor = color; + } + // #enddocregion mouse-methods, + + // #docregion color + @Input() highlightColor: string; + // #enddocregion color + + // #docregion color-2 + @Input() myHighlight: string; + // #enddocregion color-2 +} + diff --git a/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.3.ts b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.3.ts new file mode 100644 index 0000000000..bf76769c93 --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.3.ts @@ -0,0 +1,27 @@ +/* tslint:disable:member-ordering */ +// #docregion +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[myHighlight]' +}) +export class HighlightDirective { + + constructor(private el: ElementRef) { } + + @Input('myHighlight') highlightColor: string; + + // #docregion mouse-enter + @HostListener('mouseenter') onMouseEnter() { + this.highlight(this.highlightColor || 'red'); + } + // #enddocregion mouse-enter + + @HostListener('mouseleave') onMouseLeave() { + this.highlight(null); + } + + private highlight(color: string) { + this.el.nativeElement.style.backgroundColor = color; + } +} diff --git a/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.ts new file mode 100644 index 0000000000..97b1497013 --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.ts @@ -0,0 +1,34 @@ +/* tslint:disable:member-ordering */ +// #docregion imports, +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; +// #enddocregion imports + +@Directive({ + selector: '[myHighlight]' +}) +export class HighlightDirective { + + constructor(private el: ElementRef) { } + + // #docregion defaultColor + @Input() defaultColor: string; + // #enddocregion defaultColor + + // #docregion color + @Input('myHighlight') highlightColor: string; + // #enddocregion color + + // #docregion mouse-enter + @HostListener('mouseenter') onMouseEnter() { + this.highlight(this.highlightColor || this.defaultColor || 'red'); + } + // #enddocregion mouse-enter + + @HostListener('mouseleave') onMouseLeave() { + this.highlight(null); + } + + private highlight(color: string) { + this.el.nativeElement.style.backgroundColor = color; + } +} diff --git a/public/docs/_examples/attribute-directives/ts/src/index.html b/public/docs/_examples/attribute-directives/ts/src/index.html new file mode 100644 index 0000000000..97662437f0 --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/src/index.html @@ -0,0 +1,25 @@ + + + + + +{{title}}
+ +Routed Movies
+ ++ +
Example Snippets
+ + +
+
+ [ngClass] active
+
+
+
+
+ [ngClass] active and boldly important
+
+
+
+
+ [class.active]
+
+
+
+
+Angular Docs
+
+
+
+
+
+
+
+
+
+
+
+Image toggle event type was {{eventType}}
+
+
+ ![]()
+
+
+
+
+
+
+
+ color preference #1
+
+
+
+
+ color preference #2
+
+
+Movie as JSON
+ +{{movie | json}}
+
+
+Movie Titles via local variable
+| {{movie.title}} | +
Sliced Movies with pipes
+| {{movie.title | uppercase}} | + + + +{{movie.title | lowercase}} | + + + +{{movie.releaseDate | date}} | + + + +{{movie.price | currency:'USD':true}} | + + + +{{movie.starRating | number}} | +{{movie.starRating | number:'1.1-2'}} | +{{movie.approvalRating | percent: '1.0-2'}} | + + +
+
+
+
+Movie List
+Who is your favorite hero?
+
+
+
+
+
+
+
+
++ Excellent choice! +
++ No movie, sorry! +
++ Please enter your favorite hero. +
+ + ++ + Your favorite hero is: {{favoriteHero}} + +
+ + +
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
new file mode 100644
index 0000000000..b0b57f018c
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
@@ -0,0 +1,42 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+import { IMovie } from './movie';
+import { MovieService } from './movie.service';
+
+// #docregion component
+@Component({
+ selector: 'movie-list',
+ templateUrl: './movie-list.component.html',
+// #docregion style-url
+ styleUrls: [ './movie-list.component.css' ],
+// #enddocregion style-url
+})
+// #enddocregion component
+// #docregion class
+export class MovieListComponent {
+// #enddocregion class
+ favoriteHero: string;
+ showImage: boolean = false;
+ movies: IMovie[];
+
+// #docregion di
+ constructor(movieService: MovieService) {
+// #enddocregion di
+ this.movies = movieService.getMovies();
+// #docregion di
+ }
+// #enddocregion di
+
+ toggleImage(): void {
+ this.showImage = !this.showImage;
+ }
+
+ checkMovieHero(value: string): boolean {
+ return this.movies.filter(movie => movie.hero === value).length > 0 ;
+ }
+// #docregion class
+}
+// #enddocregion class
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts
new file mode 100644
index 0000000000..404fd4454c
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+import { IMovie } from './movie';
+
+@Injectable()
+export class MovieService {
+ getMovies(): IMovie[] {
+ return [
+ {
+ hero: 'Celeritas',
+ imageurl: 'images/hero.png',
+ movieId: 1,
+ mpaa: 'pg-13',
+ releaseDate: '2015-12-19T00:00:00',
+ title: 'Celeritas Reigns',
+ price: 12.95,
+ starRating: 4.925,
+ approvalRating: .97
+ },
+ {
+ hero: 'Mr. Nice',
+ imageurl: 'images/villain.png',
+ movieId: 2,
+ mpaa: 'pg-13',
+ releaseDate: '2015-12-18T00:00:00',
+ title: 'No More Mr. Nice Guy',
+ price: 14.95,
+ starRating: 4.6,
+ approvalRating: .94
+ },
+ {
+ hero: 'Angular',
+ imageurl: 'images/ng-logo.png',
+ movieId: 3,
+ mpaa: 'pg-13',
+ releaseDate: '2015-12-17T00:00:00',
+ title: 'Angular to the Rescue',
+ price: 15.95,
+ starRating: 4.98,
+ approvalRating: .9995
+ }
+ ];
+ }
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.ts
new file mode 100644
index 0000000000..0e6f321520
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.ts
@@ -0,0 +1,12 @@
+/* Defines the movie entity */
+export interface IMovie {
+ approvalRating: number;
+ hero: string;
+ imageurl: string;
+ movieId: number;
+ mpaa: string;
+ price: number;
+ releaseDate: string;
+ starRating: number;
+ title: string;
+}
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/hero.png b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/hero.png
new file mode 100644
index 0000000000..2a128ac367
Binary files /dev/null and b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/hero.png differ
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png
new file mode 100644
index 0000000000..1e488b1a49
Binary files /dev/null and b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png differ
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/villain.png b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/villain.png
new file mode 100644
index 0000000000..26697d1a42
Binary files /dev/null and b/public/docs/_examples/cb-ajs-quick-reference/ts/src/images/villain.png differ
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/index.html b/public/docs/_examples/cb-ajs-quick-reference/ts/src/index.html
new file mode 100644
index 0000000000..829f080ae3
--- /dev/null
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/index.html
@@ -0,0 +1,28 @@
+
+
+
+ | + + | +Title | +Hero | +Release Date | +Rating | +Price | +Star rating | +Approval rating | +
|---|---|---|---|---|---|---|---|
|
+ |
+ {{movie.title}} | +{{movie.hero}} | +{{movie.releaseDate | date}} | +{{movie.mpaa | uppercase}} | + +{{movie.price | currency:'USD':true}} | + +{{movie.starRating | number:'1.1-2'}} | +{{movie.approvalRating | percent: '1.0-0'}} | +
Hello Angular
+ +List of Heroes
+{{hero}}
+
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..879f7f663c
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html'
+})
+export class AppComponent {
+ showHeading = true;
+ heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
+
+ toggleHeading() {
+ this.showHeading = !this.showHeading;
+ }
+}
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/app/app.module.ts b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..b4fc185c24
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.module.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/index-jit.html b/public/docs/_examples/cb-aot-compiler/ts/src/index-jit.html
new file mode 100644
index 0000000000..713a04970e
--- /dev/null
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/index-jit.html
@@ -0,0 +1,24 @@
+
+
+
+
+ Component Communication Cookbook
+ +Pass data from parent to child with input binding ("Heroes")+Intercept input property changes with a setter ("Master")
+Intercept input property changes with ngOnChanges ("Source code version")
+Parent listens for child event ("Colonize Universe")
+Parent to child via local variable("Countdown to Liftoff")
+Parent calls ViewChild("Countdown to Liftoff")
+Parent and children communicate via a service ("Mission Control")
+ +
+
+Back to Top
+
++
+
+Back to Top
+
++
+
+Back to Top
+
++
+
+Back to Top
++ +
+
+Back to Top
++ +
+
+Back to Top
++ +
+
+Back to Top
+diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts new file mode 100644 index 0000000000..7556beb1ff --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts b/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts new file mode 100644 index 0000000000..a008fc5486 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.module.ts @@ -0,0 +1,54 @@ +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { AstronautComponent } from './astronaut.component'; +import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component'; +import { CountdownTimerComponent } from './countdown-timer.component'; +import { HeroChildComponent } from './hero-child.component'; +import { HeroParentComponent } from './hero-parent.component'; +import { MissionControlComponent } from './missioncontrol.component'; +import { NameChildComponent } from './name-child.component'; +import { NameParentComponent } from './name-parent.component'; +import { VersionChildComponent } from './version-child.component'; +import { VersionParentComponent } from './version-parent.component'; +import { VoterComponent } from './voter.component'; +import { VoteTakerComponent } from './votetaker.component'; + +let directives: any[] = [ + AppComponent, + AstronautComponent, + CountdownTimerComponent, + HeroChildComponent, + HeroParentComponent, + MissionControlComponent, + NameChildComponent, + NameParentComponent, + VersionChildComponent, + VersionParentComponent, + VoterComponent, + VoteTakerComponent + ]; + +let schemas: any[] = []; + +// Include Countdown examples +// unless in e2e tests which they break. +if (!/e2e/.test(location.search)) { + console.log('adding countdown timer examples'); + directives.push(CountdownLocalVarParentComponent); + directives.push(CountdownViewChildParentComponent); +} else { + // In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors + schemas.push(CUSTOM_ELEMENTS_SCHEMA); +} + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: directives, + bootstrap: [ AppComponent ], + schemas: schemas +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts new file mode 100644 index 0000000000..bc24964f86 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts @@ -0,0 +1,46 @@ +// #docregion +import { Component, Input, OnDestroy } from '@angular/core'; + +import { MissionService } from './mission.service'; +import { Subscription } from 'rxjs/Subscription'; + +@Component({ + selector: 'my-astronaut', + template: ` +
+ {{astronaut}}: {{mission}} + +
+ ` +}) +export class AstronautComponent implements OnDestroy { + @Input() astronaut: string; + mission = 'Countdown to Liftoff (via local variable)
+ + +{{timer.seconds}}
+ Countdown to Liftoff (via ViewChild)
+ + +{{ seconds() }}
+ {{message}}
' +}) +export class CountdownTimerComponent implements OnInit, OnDestroy { + + intervalId = 0; + message = ''; + seconds = 11; + + clearTimer() { clearInterval(this.intervalId); } + + ngOnInit() { this.start(); } + ngOnDestroy() { this.clearTimer(); } + + start() { this.countDown(); } + stop() { + this.clearTimer(); + this.message = `Holding at T-${this.seconds} seconds`; + } + + private countDown() { + this.clearTimer(); + this.intervalId = window.setInterval(() => { + this.seconds -= 1; + if (this.seconds === 0) { + this.message = 'Blast off!'; + } else { + if (this.seconds < 0) { this.seconds = 10; } // reset + this.message = `T-${this.seconds} seconds and counting`; + } + }, 1000); + } +} diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/hero-child.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/hero-child.component.ts new file mode 100644 index 0000000000..7447542a74 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/hero-child.component.ts @@ -0,0 +1,17 @@ +// #docregion +import { Component, Input } from '@angular/core'; + +import { Hero } from './hero'; + +@Component({ + selector: 'hero-child', + template: ` +{{hero.name}} says:
+I, {{hero.name}}, am at your service, {{masterName}}.
+ ` +}) +export class HeroChildComponent { + @Input() hero: Hero; + @Input('master') masterName: string; +} +// #enddocregion diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/hero-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/hero-parent.component.ts new file mode 100644 index 0000000000..bf3861c455 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/src/app/hero-parent.component.ts @@ -0,0 +1,20 @@ +// #docregion +import { Component } from '@angular/core'; + +import { HEROES } from './hero'; + +@Component({ + selector: 'hero-parent', + template: ` +{{master}} controls {{heroes.length}} heroes
+Mission Control
+ +History
+-
+
- {{event}} +
"{{name}}"
' +}) +export class NameChildComponent { + private _name = ''; + + @Input() + set name(name: string) { + this._name = (name && name.trim()) || 'Master controls {{names.length}} names
+Version {{major}}.{{minor}}
+Change log:
+-
+
- {{change}} +
Source code version
+ + +{{name}}
+ + + ` +}) +export class VoterComponent { + @Input() name: string; + @Output() onVoted = new EventEmitterShould mankind colonize the Universe?
+Agree: {{agreed}}, Disagree: {{disagreed}}
+DI Cookbook
+
+
+
+Logged in user
+Name: {{userContext.name}}
+ Role: {{userContext.role}}
+
+
+
+
+Hero Bios
+
+
+
+
+Hero Bios and Contacts
+
+
+
+
+
+
+
+
+Unsorted Heroes
+
+
+
+Sorted Heroes
+
+
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..3045893c58
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import-services
+import { LoggerService } from './logger.service';
+import { UserContextService } from './user-context.service';
+import { UserService } from './user.service';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html',
+// #docregion providers
+ providers: [ LoggerService, UserContextService, UserService ]
+// #enddocregion providers
+})
+export class AppComponent {
+// #enddocregion import-services
+
+ private userId: number = 1;
+
+ // #docregion ctor
+ constructor(logger: LoggerService, public userContext: UserContextService) {
+ userContext.loadUser(this.userId);
+ logger.logInfo('AppComponent initialized');
+ }
+ // #enddocregion ctor
+// #docregion import-services
+}
+// #enddocregion import-services
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..a240e21f7c
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.module.ts
@@ -0,0 +1,74 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+// import { AppRoutingModule } from './app-routing.module';
+import { LocationStrategy,
+ HashLocationStrategy } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { HeroData } from './hero-data';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+
+
+import { AppComponent } from './app.component';
+import { HeroBioComponent } from './hero-bio.component';
+import { HeroBiosComponent,
+ HeroBiosAndContactsComponent } from './hero-bios.component';
+import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
+import { HeroContactComponent } from './hero-contact.component';
+import { HeroesBaseComponent,
+ SortedHeroesComponent } from './sorted-heroes.component';
+import { HighlightDirective } from './highlight.directive';
+import { ParentFinderComponent,
+ AlexComponent,
+ AliceComponent,
+ CarolComponent,
+ ChrisComponent,
+ CraigComponent,
+ CathyComponent,
+ BarryComponent,
+ BethComponent,
+ BobComponent } from './parent-finder.component';
+
+const declarations = [
+ AppComponent,
+ HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent,
+ HeroesBaseComponent, SortedHeroesComponent,
+ HeroOfTheMonthComponent, HeroContactComponent,
+ HighlightDirective,
+ ParentFinderComponent,
+];
+
+const a_components = [AliceComponent, AlexComponent ];
+
+const b_components = [ BarryComponent, BethComponent, BobComponent ];
+
+const c_components = [
+ CarolComponent, ChrisComponent, CraigComponent,
+ CathyComponent
+];
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ InMemoryWebApiModule.forRoot(HeroData)
+ // AppRoutingModule TODO: add routes
+ ],
+ declarations: [
+ declarations,
+ a_components,
+ b_components,
+ c_components,
+ ],
+ bootstrap: [ AppComponent ],
+ // #docregion providers
+ providers: [
+ { provide: LocationStrategy, useClass: HashLocationStrategy }
+ ]
+ // #enddocregion providers
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts
new file mode 100644
index 0000000000..875779be40
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts
@@ -0,0 +1,19 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+// #docregion date-logger-service
+@Injectable()
+// #docregion date-logger-service-signature
+export class DateLoggerService extends LoggerService
+// #enddocregion date-logger-service-signature
+{
+ logInfo(msg: any) { super.logInfo(stamp(msg)); }
+ logDebug(msg: any) { super.logInfo(stamp(msg)); }
+ logError(msg: any) { super.logError(stamp(msg)); }
+}
+
+function stamp(msg: any) { return msg + ' at ' + new Date(); }
+// #enddocregion date-logger-service
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts
new file mode 100644
index 0000000000..84f8e05e66
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { Component, Input, OnInit } from '@angular/core';
+
+import { HeroCacheService } from './hero-cache.service';
+
+// #docregion component
+@Component({
+ selector: 'hero-bio',
+ // #docregion template
+ template: `
+ {{hero.name}}
+Phone #: {{phoneNumber}}
+ !!!
`
+})
+export class HeroContactComponent {
+
+ hasLogger = false;
+
+ constructor(
+ // #docregion ctor-params
+ @Host() // limit to the host component's instance of the HeroCacheService
+ private heroCache: HeroCacheService,
+
+ @Host() // limit search for logger; hides the application-wide logger
+ @Optional() // ok if the logger doesn't exist
+ private loggerService: LoggerService
+ // #enddocregion ctor-params
+ ) {
+ if (loggerService) {
+ this.hasLogger = true;
+ loggerService.logInfo('HeroContactComponent can log!');
+ }
+ // #docregion ctor
+ }
+ // #enddocregion ctor
+
+ get phoneNumber() { return this.heroCache.hero.phone; }
+
+}
+// #enddocregion component
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-data.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-data.ts
new file mode 100644
index 0000000000..10cdbcaab1
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-data.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Hero } from './hero';
+
+export class HeroData {
+ createDb() {
+ let heroes = [
+ new Hero(1, 'Windstorm'),
+ new Hero(2, 'Bombasto'),
+ new Hero(3, 'Magneta'),
+ new Hero(4, 'Tornado')
+ ];
+ return {heroes};
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts
new file mode 100644
index 0000000000..da2c57aeaf
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts
@@ -0,0 +1,26 @@
+// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
+// Injecting with the MinimalLogger "interface-class"
+import { Component, NgModule } from '@angular/core';
+import { LoggerService } from './logger.service';
+import { MinimalLogger } from './minimal-logger.service';
+
+// #docregion
+@Component({
+ selector: 'hero-of-the-month',
+ templateUrl: './hero-of-the-month.component.html',
+ // Todo: move this aliasing, `useExisting` provider to the AppModule
+ providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
+})
+export class HeroOfTheMonthComponent {
+ logs: string[] = [];
+ constructor(logger: MinimalLogger) {
+ logger.logInfo('starting up');
+ }
+}
+// #enddocregion
+
+// This NgModule exists only to avoid the Angular language service's "undeclared component" error
+@NgModule({
+ declarations: [ HeroOfTheMonthComponent ]
+})
+class NoopModule {}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html
new file mode 100644
index 0000000000..f0ae619d6a
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html
@@ -0,0 +1,9 @@
+{{title}}
+Winner: {{heroOfTheMonth.name}}
+Reason for award: {{heroOfTheMonth.description}}
+Runners-up: {{runnersUp}}
+
+Logs:
+
+
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts
new file mode 100644
index 0000000000..90ad13d639
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts
@@ -0,0 +1,63 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
+// #docregion injection-token
+import { InjectionToken } from '@angular/core';
+
+export const TITLE = new InjectionToken{{log}}
+
+
`;
+
+@Component({
+ selector: 'carol',
+ template: templateC
+})
+// #docregion carol-class
+export class CarolComponent {
+ name= 'Carol';
+ // #docregion carol-ctor
+ constructor( @Optional() public parent: Parent ) { }
+ // #enddocregion carol-ctor
+}
+// #enddocregion carol-class
+// #enddocregion carol
+
+@Component({
+ selector: 'chris',
+ template: templateC
+})
+export class ChrisComponent {
+ name= 'Chris';
+ constructor( @Optional() public parent: Parent ) { }
+}
+
+////// Craig ///////////
+/**
+ * Show we cannot inject a parent by its base class.
+ */
+// #docregion craig
+@Component({
+ selector: 'craig',
+ template: `
+ {{name}}
+My parent is {{parent?.name}}
+
+
`
+})
+export class CraigComponent {
+ constructor( @Optional() public alex: Base ) { }
+}
+// #enddocregion craig
+
+//////// B - Parent /////////
+// #docregion barry
+const templateB = `
+ Craig
+ {{alex ? 'Found' : 'Did not find'}} Alex via the base class. +
+
`;
+
+@Component({
+ selector: 'barry',
+ template: templateB,
+ providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
+})
+export class BarryComponent implements Parent {
+ name = 'Barry';
+// #docregion barry-ctor
+ constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+// #enddocregion barry-ctor
+}
+// #enddocregion barry
+
+@Component({
+ selector: 'bob',
+ template: templateB,
+ providers: [ provideParent(BobComponent) ]
+})
+export class BobComponent implements Parent {
+ name= 'Bob';
+ constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+@Component({
+ selector: 'beth',
+ template: templateB,
+// #docregion beth-providers
+ providers: [ provideParent(BethComponent, DifferentParent) ]
+// #enddocregion beth-providers
+})
+export class BethComponent implements Parent {
+ name= 'Beth';
+ constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+///////// A - Grandparent //////
+
+// #docregion alex, alex-1
+@Component({
+ selector: 'alex',
+ template: `
+
+
+ {{name}}
+My parent is {{parent?.name}}
+
+
`,
+// #enddocregion alex-1
+// #docregion alex-providers
+ providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
+// #enddocregion alex-providers
+// #docregion alex-1
+})
+// #enddocregion alex-1
+// Todo: Add `... implements Parent` to class signature
+// #docregion alex-1
+// #docregion alex-class-signature
+export class AlexComponent extends Base
+// #enddocregion alex-class-signature
+{
+ name= 'Alex';
+}
+// #enddocregion alex, alex-1
+
+/////
+
+// #docregion alice
+@Component({
+ selector: 'alice',
+ template: `
+ {{name}}
+
+
`,
+// #docregion alice-providers
+ providers: [ provideParent(AliceComponent) ]
+// #enddocregion alice-providers
+})
+// #docregion alice-class-signature
+export class AliceComponent implements Parent
+// #enddocregion alice-class-signature
+{
+ name= 'Alice';
+}
+// #enddocregion alice
+
+////// Cathy ///////////
+/**
+ * Show we can inject a parent by component type
+ */
+// #docregion cathy
+@Component({
+ selector: 'cathy',
+ template: `
+ {{name}}
+
+
+
`
+})
+export class CathyComponent {
+ constructor( @Optional() public alex: AlexComponent ) { }
+}
+// #enddocregion cathy
+
+///////// ParentFinder //////
+@Component({
+ selector: 'parent-finder',
+ template: `
+ Cathy
+ {{alex ? 'Found' : 'Did not find'}} Alex via the component class.+
Parent Finder
+{{hero.name}}
`,
+ providers: [HeroService]
+})
+export class HeroesBaseComponent implements OnInit {
+ constructor(private heroService: HeroService) { }
+// #enddocregion injection
+
+ heroes: Array{{hero.name}}
`,
+ providers: [HeroService]
+})
+export class SortedHeroesComponent extends HeroesBaseComponent {
+ constructor(heroService: HeroService) {
+ super(heroService);
+ }
+
+ protected afterGetHeroes() {
+ this.heroes = this.heroes.sort((h1, h2) => {
+ return h1.name < h2.name ? -1 :
+ (h1.name > h2.name ? 1 : 0);
+ });
+ }
+}
+// #enddocregion sorted-heroes
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts
new file mode 100644
index 0000000000..ed394fc734
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { LoggerService } from './logger.service';
+import { UserService } from './user.service';
+
+// #docregion injectables, injectable
+@Injectable()
+export class UserContextService {
+// #enddocregion injectables, injectable
+ name: string;
+ role: string;
+ loggedInSince: Date;
+
+ // #docregion ctor, injectables
+ constructor(private userService: UserService, private loggerService: LoggerService) {
+ // #enddocregion ctor, injectables
+ this.loggedInSince = new Date();
+ // #docregion ctor, injectables
+ }
+ // #enddocregion ctor, injectables
+
+ loadUser(userId: number) {
+ let user = this.userService.getUserById(userId);
+ this.name = user.name;
+ this.role = user.role;
+
+ this.loggerService.logDebug('loaded User');
+ }
+// #docregion injectables, injectable
+}
+// #enddocregion injectables, injectable
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/user.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/user.service.ts
new file mode 100644
index 0000000000..c48b025a08
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/user.service.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UserService {
+
+ getUserById(userId: number): any {
+ return {name: 'Bombasto', role: 'Admin'};
+ }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/index.html b/public/docs/_examples/cb-dependency-injection/ts/src/index.html
new file mode 100644
index 0000000000..0308c72155
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ `
+})
+export class AppComponent implements OnInit {
+ ads: AdItem[];
+
+ constructor(private adService: AdService) {}
+
+ ngOnInit() {
+ this.ads = this.adService.getAds();
+ }
+}
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.module.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..a65d394709
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/app.module.ts
@@ -0,0 +1,27 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { HeroJobAdComponent } from './hero-job-ad.component';
+import { AdBannerComponent } from './ad-banner.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdDirective } from './ad.directive';
+import { AdService } from './ad.service';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ providers: [AdService],
+ declarations: [ AppComponent,
+ AdBannerComponent,
+ HeroJobAdComponent,
+ HeroProfileComponent,
+ AdDirective ],
+ // #docregion entry-components
+ entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
+ // #enddocregion entry-components
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+ constructor() {}
+}
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts
new file mode 100644
index 0000000000..675a03d0e0
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { AdComponent } from './ad.component';
+
+@Component({
+ template: `
+
+
+ `
+})
+export class HeroJobAdComponent implements AdComponent {
+ @Input() data: any;
+
+}
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts
new file mode 100644
index 0000000000..1c266db3c9
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { AdComponent } from './ad.component';
+
+@Component({
+ template: `
+ {{data.headline}}
+ + {{data.body}} +
+
+ `
+})
+export class HeroProfileComponent implements AdComponent {
+ @Input() data: any;
+}
+
+
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/index.html b/public/docs/_examples/cb-dynamic-component-loader/ts/src/index.html
new file mode 100644
index 0000000000..9239d91d9a
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Featured Hero Profile
+{{data.name}}
+ +{{data.bio}}
+ + Hire this hero today! +
+
+ `,
+ providers: [QuestionService]
+})
+export class AppComponent {
+ questions: any[];
+
+ constructor(service: QuestionService) {
+ this.questions = service.getQuestions();
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/app.module.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..7a68e45a92
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { DynamicFormComponent } from './dynamic-form.component';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+ imports: [ BrowserModule, ReactiveFormsModule ],
+ declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+ constructor() {
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.html b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.html
new file mode 100644
index 0000000000..9f1b8cd4a6
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.html
@@ -0,0 +1,17 @@
+
+Job Application for Heroes
+
+
+
+
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
new file mode 100644
index 0000000000..024571a7c2
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { QuestionBase } from './question-base';
+
+@Component({
+ selector: 'df-question',
+ templateUrl: './dynamic-form-question.component.html'
+})
+export class DynamicFormQuestionComponent {
+ @Input() question: QuestionBase
+
+
+
+
+
+
+
+ {{question.label}} is required
+
+
+
+
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
new file mode 100644
index 0000000000..8d95c0d3a4
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
@@ -0,0 +1,28 @@
+// #docregion
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { QuestionBase } from './question-base';
+import { QuestionControlService } from './question-control.service';
+
+@Component({
+ selector: 'dynamic-form',
+ templateUrl: './dynamic-form.component.html',
+ providers: [ QuestionControlService ]
+})
+export class DynamicFormComponent implements OnInit {
+
+ @Input() questions: QuestionBase
+ Saved the following values
{{payLoad}} +
+{{payLoad}} +
+
+
+
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
new file mode 100644
index 0000000000..241ff1e782
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
@@ -0,0 +1,116 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+import { Hero } from '../shared/hero';
+import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
+
+@Component({
+ selector: 'hero-form-reactive3',
+ templateUrl: './hero-form-reactive.component.html'
+})
+export class HeroFormReactiveComponent implements OnInit {
+
+ powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+ hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What');
+
+ submitted = false;
+
+ // #docregion on-submit
+ onSubmit() {
+ this.submitted = true;
+ this.hero = this.heroForm.value;
+ }
+ // #enddocregion on-submit
+// #enddocregion
+
+ // Reset the form with a new hero AND restore 'pristine' class state
+ // by toggling 'active' flag which causes the form
+ // to be removed/re-added in a tick via NgIf
+ // TODO: Workaround until NgForm has a reset method (#6822)
+ active = true;
+// #docregion class
+ // #docregion add-hero
+ addHero() {
+ this.hero = new Hero(42, '', '');
+ this.buildForm();
+ // #enddocregion add-hero
+// #enddocregion class
+
+ this.active = false;
+ setTimeout(() => this.active = true, 0);
+// #docregion
+ // #docregion add-hero
+ }
+ // #enddocregion add-hero
+
+ // #docregion form-builder
+ heroForm: FormGroup;
+ constructor(private fb: FormBuilder) { }
+
+ ngOnInit(): void {
+ this.buildForm();
+ }
+
+ buildForm(): void {
+ this.heroForm = this.fb.group({
+ // #docregion name-validators
+ 'name': [this.hero.name, [
+ Validators.required,
+ Validators.minLength(4),
+ Validators.maxLength(24),
+ forbiddenNameValidator(/bob/i)
+ ]
+ ],
+ // #enddocregion name-validators
+ 'alterEgo': [this.hero.alterEgo],
+ 'power': [this.hero.power, Validators.required]
+ });
+
+ this.heroForm.valueChanges
+ .subscribe(data => this.onValueChanged(data));
+
+ this.onValueChanged(); // (re)set validation messages now
+ }
+
+ // #enddocregion form-builder
+
+ onValueChanged(data?: any) {
+ if (!this.heroForm) { return; }
+ const form = this.heroForm;
+
+ for (const field in this.formErrors) {
+ // clear previous error message (if any)
+ this.formErrors[field] = '';
+ const control = form.get(field);
+
+ if (control && control.dirty && !control.valid) {
+ const messages = this.validationMessages[field];
+ for (const key in control.errors) {
+ this.formErrors[field] += messages[key] + ' ';
+ }
+ }
+ }
+ }
+
+ formErrors = {
+ 'name': '',
+ 'power': ''
+ };
+
+ validationMessages = {
+ 'name': {
+ 'required': 'Name is required.',
+ 'minlength': 'Name must be at least 4 characters long.',
+ 'maxlength': 'Name cannot be more than 24 characters long.',
+ 'forbiddenName': 'Someone named "Bob" cannot be a hero.'
+ },
+ 'power': {
+ 'required': 'Power is required.'
+ }
+ };
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts
new file mode 100644
index 0000000000..6ff9265e92
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { SharedModule } from '../shared/shared.module';
+import { HeroFormReactiveComponent } from './hero-form-reactive.component';
+
+@NgModule({
+ imports: [ SharedModule, ReactiveFormsModule ],
+ declarations: [ HeroFormReactiveComponent ],
+ exports: [ HeroFormReactiveComponent ]
+})
+export class HeroFormReactiveModule { }
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts b/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts
new file mode 100644
index 0000000000..870f514842
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
+
+// #docregion custom-validator
+/** A hero's name can't match the given regular expression */
+export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
+ return (control: AbstractControl): {[key: string]: any} => {
+ const name = control.value;
+ const no = nameRe.test(name);
+ return no ? {'forbiddenName': {name}} : null;
+ };
+}
+// #enddocregion custom-validator
+
+// #docregion directive
+@Directive({
+ selector: '[forbiddenName]',
+ // #docregion directive-providers
+ providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
+ // #enddocregion directive-providers
+})
+export class ForbiddenValidatorDirective implements Validator, OnChanges {
+ @Input() forbiddenName: string;
+ private valFn = Validators.nullValidator;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ const change = changes['forbiddenName'];
+ if (change) {
+ const val: string | RegExp = change.currentValue;
+ const re = val instanceof RegExp ? val : new RegExp(val, 'i');
+ this.valFn = forbiddenNameValidator(re);
+ } else {
+ this.valFn = Validators.nullValidator;
+ }
+ }
+
+ validate(control: AbstractControl): {[key: string]: any} {
+ return this.valFn(control);
+ }
+}
+// #enddocregion directive
+
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/shared/hero.ts b/public/docs/_examples/cb-form-validation/ts/src/app/shared/hero.ts
new file mode 100644
index 0000000000..fe2b55e51a
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/shared/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+ constructor(
+ public id: number,
+ public name: string,
+ public power: string,
+ public alterEgo?: string
+ ) { }
+}
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/shared/shared.module.ts b/public/docs/_examples/cb-form-validation/ts/src/app/shared/shared.module.ts
new file mode 100644
index 0000000000..2b0ada59bd
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/shared/shared.module.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ForbiddenValidatorDirective } from './forbidden-name.directive';
+import { SubmittedComponent } from './submitted.component';
+
+@NgModule({
+ imports: [ CommonModule],
+ declarations: [ ForbiddenValidatorDirective, SubmittedComponent ],
+ exports: [ ForbiddenValidatorDirective, SubmittedComponent,
+ CommonModule ]
+})
+export class SharedModule { }
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/shared/submitted.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/shared/submitted.component.ts
new file mode 100644
index 0000000000..18cea6563f
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/shared/submitted.component.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+ selector: 'hero-submitted',
+ template: `
+
+
+
+ Hero Form 3 (Reactive)
+ + +
+
+ +
`
+})
+export class SubmittedComponent {
+ @Input() hero: Hero;
+ @Input() submitted = false;
+ @Output() submittedChange = new EventEmitterYou submitted the following:
+
+
+ Name
+ {{ hero.name }}
+
+
+ Alter Ego
+ {{ hero.alterEgo }}
+
+
+ Power
+ {{ hero.power }}
+ + +
+
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
new file mode 100644
index 0000000000..1bc29db44d
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
@@ -0,0 +1,47 @@
+/* tslint:disable: member-ordering */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+
+import { Hero } from '../shared/hero';
+
+@Component({
+ selector: 'hero-form-template1',
+ templateUrl: './hero-form-template1.component.html'
+})
+// #docregion class
+export class HeroFormTemplate1Component {
+
+ powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+ hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
+
+ submitted = false;
+
+ onSubmit() {
+ this.submitted = true;
+ }
+// #enddocregion class
+// #enddocregion
+ // Reset the form with a new hero AND restore 'pristine' class state
+ // by toggling 'active' flag which causes the form
+ // to be removed/re-added in a tick via NgIf
+ // TODO: Workaround until NgForm has a reset method (#6822)
+ active = true;
+// #docregion
+// #docregion class
+
+ addHero() {
+ this.hero = new Hero(42, '', '');
+// #enddocregion class
+// #enddocregion
+
+ this.active = false;
+ setTimeout(() => this.active = true, 0);
+// #docregion
+// #docregion class
+ }
+}
+// #enddocregion class
+// #enddocregion
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.html b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.html
new file mode 100644
index 0000000000..8bb7066541
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Hero Form 1 (Template)
+ + +
+
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
new file mode 100644
index 0000000000..320ef09efd
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
@@ -0,0 +1,99 @@
+/* tslint:disable: member-ordering forin */
+// #docplaster
+// #docregion
+import { Component, AfterViewChecked, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { Hero } from '../shared/hero';
+
+@Component({
+ selector: 'hero-form-template2',
+ templateUrl: './hero-form-template2.component.html'
+})
+export class HeroFormTemplate2Component implements AfterViewChecked {
+
+ powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+ hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
+
+ submitted = false;
+
+ onSubmit() {
+ this.submitted = true;
+ }
+// #enddocregion
+
+ // Reset the form with a new hero AND restore 'pristine' class state
+ // by toggling 'active' flag which causes the form
+ // to be removed/re-added in a tick via NgIf
+ // TODO: Workaround until NgForm has a reset method (#6822)
+ active = true;
+// #docregion
+
+ addHero() {
+ this.hero = new Hero(42, '', '');
+// #enddocregion
+
+ this.active = false;
+ setTimeout(() => this.active = true, 0);
+// #docregion
+ }
+
+ // #docregion view-child
+ heroForm: NgForm;
+ @ViewChild('heroForm') currentForm: NgForm;
+
+ ngAfterViewChecked() {
+ this.formChanged();
+ }
+
+ formChanged() {
+ if (this.currentForm === this.heroForm) { return; }
+ this.heroForm = this.currentForm;
+ if (this.heroForm) {
+ this.heroForm.valueChanges
+ .subscribe(data => this.onValueChanged(data));
+ }
+ }
+ // #enddocregion view-child
+
+ // #docregion handler
+ onValueChanged(data?: any) {
+ if (!this.heroForm) { return; }
+ const form = this.heroForm.form;
+
+ for (const field in this.formErrors) {
+ // clear previous error message (if any)
+ this.formErrors[field] = '';
+ const control = form.get(field);
+
+ if (control && control.dirty && !control.valid) {
+ const messages = this.validationMessages[field];
+ for (const key in control.errors) {
+ this.formErrors[field] += messages[key] + ' ';
+ }
+ }
+ }
+ }
+
+ formErrors = {
+ 'name': '',
+ 'power': ''
+ };
+ // #enddocregion handler
+
+ // #docregion messages
+ validationMessages = {
+ 'name': {
+ 'required': 'Name is required.',
+ 'minlength': 'Name must be at least 4 characters long.',
+ 'maxlength': 'Name cannot be more than 24 characters long.',
+ 'forbiddenName': 'Someone named "Bob" cannot be a hero.'
+ },
+ 'power': {
+ 'required': 'Power is required.'
+ }
+ };
+ // #enddocregion messages
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-form-validation/ts/src/forms.css b/public/docs/_examples/cb-form-validation/ts/src/forms.css
new file mode 100644
index 0000000000..67ad13037b
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/forms.css
@@ -0,0 +1,7 @@
+.ng-valid[required], .ng-valid.required {
+ border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid:not(form) {
+ border-left: 5px solid #a94442; /* red */
+}
diff --git a/public/docs/_examples/cb-form-validation/ts/src/index.html b/public/docs/_examples/cb-form-validation/ts/src/index.html
new file mode 100644
index 0000000000..e7201508d7
--- /dev/null
+++ b/public/docs/_examples/cb-form-validation/ts/src/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Hero Form 2 (Template & Messages)
+ + +Hello i18n!
+ + + +Hello i18n!
+ + + +Hello i18n!
+ + + +Hello i18n!
+ + + ++ + + +I don't output any element either + + + +
+ + +
+ + +{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}} + +({{wolves}}) +
+ + +The hero is {gender, select, m {male} f {female}} + +
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts new file mode 100644 index 0000000000..09b8722e9b --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts @@ -0,0 +1,19 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { + wolves = 0; + gender = 'f'; + fly = true; + logo = 'https://angular.io/resources/images/logos/angular/angular.png'; + inc(i: number) { + this.wolves = Math.min(5, Math.max(0, this.wolves + i)); + } + male() { this.gender = 'm'; } + female() { this.gender = 'f'; } +} + diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts new file mode 100644 index 0000000000..64ad44075b --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/app.module.ts @@ -0,0 +1,13 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) + +export class AppModule { } diff --git a/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts b/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts new file mode 100644 index 0000000000..f0bb662dc3 --- /dev/null +++ b/public/docs/_examples/cb-i18n/ts/src/app/i18n-providers.ts @@ -0,0 +1,33 @@ +// #docregion +import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core'; + +export function getTranslationProviders(): Promise
+ Select a title to set on the current HTML document: +
+ +-
+
- Good morning. +
- Good afternoon. +
- Good evening. +
+ Setting The Document Title Using The Title Service +
+ +{{title}}
+Classes and Class Metadata+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
Classes and Class Metadata
++
Input and Output Metadata
++
Dependency Injection
++
Host Metadata
++
View and Child Metadata
+Hero: {{name}}
` +}) +export class HeroComponent { + constructor(@Inject('heroName') name) { + this.name = name; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 new file mode 100644 index 0000000000..3a17abd281 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 @@ -0,0 +1,15 @@ +// #docregion +import { Component } from '@angular/core'; +import { DataService } from './data.service'; + +@Component({ + selector: 'hero-di', + template: `Hero: {{name}}
` +}) +export class HeroComponent { + name = ''; + constructor(dataService: DataService) { + this.name = dataService.getHeroName(); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 new file mode 100644 index 0000000000..fefe4a5470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +Hero Host in Metadata
+Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the Hero Host in Decorators
+Heading clicks: {{clicks}}
+ `,
+ // Styles within (but excluding) the Hero: {{name}}
` +}) +export class HeroComponent { + name = ''; + ngOnInit() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 new file mode 100644 index 0000000000..fced43d4d7 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 @@ -0,0 +1,81 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = true; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+ {{titlePrefix}} {{title}}
+ +{{ msg }}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6 new file mode 100644 index 0000000000..2976ec605e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6 @@ -0,0 +1,15 @@ +// #docregion +// #docregion metadata +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-view', + template: '{{title}}: {{getName()}}
' +}) +// #docregion appexport, class +export class HeroComponent { + title = 'Hero Detail'; + getName() {return 'Windstorm'; } +} +// #enddocregion appexport, class +// #enddocregion metadata diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/index.html new file mode 100644 index 0000000000..2a94db38cc --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/index.html @@ -0,0 +1,26 @@ + + + +{{title}}
+Classes and Class Metadata+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
Classes and Class Metadata
++
Input and Output Metadata
++
Dependency Injection
++
Host Metadata
++
View and Child Metadata
+Hero: {{name}}
` + }) +]; + +HeroComponent.parameters = [ + [new Inject('heroName')] +]; +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-di.component.es6 new file mode 100644 index 0000000000..a18b1ba777 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-di.component.es6 @@ -0,0 +1,21 @@ +// #docregion +import { Component } from '@angular/core'; +import { DataService } from './data.service'; + +export class HeroComponent { + constructor(dataService) { + this.name = dataService.getHeroName(); + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di', + template: `Hero: {{name}}
` + }) +]; + +HeroComponent.parameters = [ + [DataService] +]; +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6 new file mode 100644 index 0000000000..b06701ee8d --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6 @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; + +// #docregion +export class HeroHostComponent { + constructor() { + this.active = false; + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip'; + } + + clicked() { + this.clicks += 1; + } + + enter(event) { + this.active = true; + this.headingClass = false; + } + + leave(event) { + this.active = false; + this.headingClass = true; + } +} + +// #docregion metadata +HeroHostComponent.annotations = [ + new Component({ + selector: 'hero-host', + template: ` +Hero Host
+Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the Hero: {{name}}
` + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-queries.component.es6 new file mode 100644 index 0000000000..bf3b914406 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-queries.component.es6 @@ -0,0 +1,97 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +export class ContentChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + } +} + +ContentChildComponent.annotations = [ + new Component({ + selector: 'content-child', + template: ` + + Active + ` + }) +]; + +//////////////////// + +// #docregion content +export class ViewChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + this.content.activate(); + } +} + +ViewChildComponent.annotations = [ + new Component({ + selector: 'view-child', + template: `
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+ inputs: ['hero'],
+ queries: {
+ content: new ContentChild(ContentChildComponent)
+ }
+ })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+ constructor(){
+ this.active = false;
+ this.heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+ }
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+
+HeroQueriesComponent.annotations = [
+ new Component({
+ selector: 'hero-queries',
+ template: `
+ {{titlePrefix}} {{title}}
+ +{{ msg }}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero.component.es6 new file mode 100644 index 0000000000..350f946460 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero.component.es6 @@ -0,0 +1,21 @@ +// #docplaster +// #docregion +// #docregion metadata +import { Component } from '@angular/core'; + +// #docregion appexport, class +export class HeroComponent { + constructor() { + this.title = 'Hero Detail'; + } + getName() {return 'Windstorm'; } +} +// #enddocregion appexport, class + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-view', + template: '{{title}}: {{getName()}}
' + }) +]; +// #enddocregion metadata diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/src/index.html new file mode 100644 index 0000000000..2a94db38cc --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/index.html @@ -0,0 +1,26 @@ + + + +{{title}}
+Classes and Class Metadata+Interfaces
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
Classes and Class Metadata
+Classes and Class Metadata (DSL)
++
Interfaces
+Interfaces (DSL)
++
Input and Output Metadata
+Input and Output Metadata (DSL)
++
Dependency Injection
+Dependency Injection (DSL)
++
Host Metadata
+Host Metadata (DSL)
++
View and Child Metadata (DSL)
+Hero: {{name}}
' + }) + ]; + + HeroComponent.parameters = [ 'heroName' ]; + + function HeroComponent(name) { + this.name = name; + } + // #enddocregion + + app.HeroDIInjectComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); + +/////// DSL version //////// + +(function(app) { + + var old = app.HeroComponent; + + // #docregion dsl + app.HeroComponent = ng.core.Component({ + selector: 'hero-di-inject-dsl', + template: 'Hero: {{name}}
' + }) + .Class({ + constructor: [ + new ng.core.Inject('heroName'), + function HeroComponent(name) { + this.name = name; + } + ] + }); + // #enddocregion dsl + + app.HeroDIInjectDslComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-di.component.js new file mode 100644 index 0000000000..2f49a85079 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-di.component.js @@ -0,0 +1,51 @@ +(function(app) { + + var old = app.HeroComponent; + + // #docregion + app.HeroComponent = HeroComponent; + + HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-di', + template: 'Hero: {{name}}
' + }) + ]; + + HeroComponent.parameters = [ app.DataService ]; + + function HeroComponent(dataService) { + this.name = dataService.getHeroName(); + } + // #enddocregion + + app.HeroDIComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); + +////// DSL Version ///// + +(function(app) { + + var old = app.HeroComponent; + + // #docregion dsl + app.HeroComponent = ng.core.Component({ + selector: 'hero-di-dsl', + template: 'Hero: {{name}}
' + }) + .Class({ + constructor: [ + app.DataService, + function HeroComponent(service) { + this.name = service.getHeroName(); + } + ] + }); + // #enddocregion dsl + + app.HeroDIDslComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-host.component.js new file mode 100644 index 0000000000..b73e50aae0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-host.component.js @@ -0,0 +1,107 @@ +(function(app) { + + var old = app.HeroComponent + + // #docregion + app.HeroComponent = HeroComponent; + + HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-host', + template: + 'Hero Host
' + + 'Heading clicks: {{clicks}}
',
+ host: {
+ // HostBindings to the Hero Host (DSL)
+Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the Hero: {{name}}
' + }) + ]; + + function HeroComponent() { } + + HeroComponent.prototype.ngOnInit = function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + }; + // #enddocregion + + app.HeroLifecycleComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); + +/////// DSL version //// + +(function(app) { + + var old = app.HeroComponent; + + // #docregion dsl + app.HeroComponent = ng.core.Component({ + selector: 'hero-lifecycle-dsl', + template: 'Hero: {{name}}
' + }) + .Class({ + constructor: function HeroComponent() { }, + ngOnInit: function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } + }); + // #enddocregion dsl + + app.HeroLifecycleDslComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-queries.component.js new file mode 100644 index 0000000000..5e8de58d41 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-queries.component.js @@ -0,0 +1,92 @@ +(function(app) { + + app.heroQueries = app.heroQueries || {}; + + app.heroQueries.ContentChildComponent = ng.core.Component({ + selector: 'content-child', + template: + '' + + 'Active' + + '' + }).Class({ + constructor: function ContentChildComponent() { + this.active = false; + }, + + activate: function() { + this.active = !this.active; + } + }); + + //////////////////// + + // #docregion content + app.heroQueries.ViewChildComponent = ng.core.Component({ + selector: 'view-child', + template: + '' +
+ '{{hero.name}} ' +
+ '
',
+ styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+ inputs: ['hero'],
+ queries: {
+ content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+ }
+ })
+ .Class({
+ constructor: function HeroQueriesHeroComponent() {
+ this.active = false;
+ },
+
+ activate: function() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+ });
+ // #enddocregion content
+
+ ////////////////////
+
+ // #docregion view
+ app.heroQueries.HeroQueriesComponent = ng.core.Component({
+ selector: 'hero-queries',
+ template:
+ '{{titlePrefix}} {{title}}
+ +{{ msg }}
diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.js new file mode 100644 index 0000000000..f0770e1228 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero-title.component.js @@ -0,0 +1,64 @@ +(function(app) { + + // #docregion + app.HeroTitleComponent = HeroTitleComponent; + + // #docregion templateUrl + HeroTitleComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-title', + templateUrl: 'app/hero-title.component.html' + }) + ]; + // #enddocregion templateUrl + + function HeroTitleComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + + HeroTitleComponent.prototype.ok = function() { + this.msg = 'OK!'; + } + + HeroTitleComponent.parameters = [ + [new ng.core.Optional(), new ng.core.Inject('titlePrefix')], + [new ng.core.Attribute('title')] + ]; + // #enddocregion + +})(window.app = window.app || {}); + +////////// DSL version //////////// + +(function(app) { + + var old = app.HeroTitleComponent; + + // #docregion dsl + app.HeroTitleComponent = ng.core.Component({ + selector: 'hero-title-dsl', + templateUrl: 'app/hero-title.component.html' + }) + .Class({ + constructor: [ + [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], + new ng.core.Attribute('title'), + function HeroTitleComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + ], + + ok: function() { + this.msg = 'OK!'; + } + }); + // #enddocregion dsl + + app.HeroTitleDslComponent = app.HeroTitleComponent; + app.HeroTitleComponent = old; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/src/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/src/app/hero.component.js new file mode 100644 index 0000000000..e1407b2635 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/app/hero.component.js @@ -0,0 +1,53 @@ +// #docplaster +(function(app) { + +// #docregion +// #docregion appexport +// #docregion metadata +app.HeroComponent = HeroComponent; // "export" + +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-view', + template: '{{title}}: {{getName()}}
' + }) +]; + +// #docregion constructorproto +function HeroComponent() { + this.title = "Hero Detail"; +} + +HeroComponent.prototype.getName = function() { return 'Windstorm'; }; +// #enddocregion constructorproto + +// #enddocregion metadata +// #enddocregion appexport +// #enddocregion + +})(window.app = window.app || {}); + +//////////// DSL version /////////// + +(function(app) { + + var old = app.HeroComponent; + + // #docregion dsl + app.HeroComponent = ng.core.Component({ + selector: 'hero-view-dsl', + template: '{{title}}: {{getName()}}
', + }) + .Class({ + constructor: function HeroComponent() { + this.title = "Hero Detail"; + }, + + getName: function() { return 'Windstorm'; } + }); + // #enddocregion dsl + + app.HeroDslComponent = app.HeroComponent; + app.HeroComponent = old; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/src/index.html b/public/docs/_examples/cb-ts-to-js/js/src/index.html new file mode 100644 index 0000000000..00338aa55a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/src/index.html @@ -0,0 +1,43 @@ + + + +{{title}}
+Classes and Class Metadata+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+
Classes and Class Metadata
++
Input and Output Metadata
++
Dependency Injection
++
Host Metadata
++
View and Child Metadata
+Hero: {{name}}
` +}) +export class HeroComponent { + constructor(@Inject('heroName') private name: string) { } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-di.component.ts new file mode 100644 index 0000000000..3a17abd281 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-di.component.ts @@ -0,0 +1,15 @@ +// #docregion +import { Component } from '@angular/core'; +import { DataService } from './data.service'; + +@Component({ + selector: 'hero-di', + template: `Hero: {{name}}
` +}) +export class HeroComponent { + name = ''; + constructor(dataService: DataService) { + this.name = dataService.getHeroName(); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host-meta.component.ts new file mode 100644 index 0000000000..fefe4a5470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-host-meta.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +Hero Host in Metadata
+Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the Hero Host in Decorators
+Heading clicks: {{clicks}}
+ `,
+ // Styles within (but excluding) the Hero: {{name}}
` +}) +export class HeroComponent implements OnInit { + name: string; + ngOnInit() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } +} diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-queries.component.ts new file mode 100644 index 0000000000..8b2d91ea85 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-queries.component.ts @@ -0,0 +1,83 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = !this.active; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +
+ {{hero.name}}
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero: any;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content: ContentChildComponent;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+ {{titlePrefix}} {{title}}
+ +{{ msg }}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts new file mode 100644 index 0000000000..48aaae7d44 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts @@ -0,0 +1,21 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +// #docregion templateUrl +@Component({ + selector: 'hero-title', + templateUrl: './hero-title.component.html' +}) +// #enddocregion templateUrl +export class HeroTitleComponent { + msg: string = ''; + constructor( + @Inject('titlePrefix') @Optional() private titlePrefix: string, + @Attribute('title') private title: string + ) { } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts new file mode 100644 index 0000000000..2976ec605e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts @@ -0,0 +1,15 @@ +// #docregion +// #docregion metadata +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-view', + template: '{{title}}: {{getName()}}
' +}) +// #docregion appexport, class +export class HeroComponent { + title = 'Hero Detail'; + getName() {return 'Windstorm'; } +} +// #enddocregion appexport, class +// #enddocregion metadata diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/index.html b/public/docs/_examples/cb-ts-to-js/ts/src/index.html new file mode 100644 index 0000000000..d9ad1f7aef --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/src/index.html @@ -0,0 +1,26 @@ + + + ++ {{title}} +
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts new file mode 100644 index 0000000000..c740bcd745 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts @@ -0,0 +1,32 @@ +import { TestBed, async } from '@angular/core/testing'; + +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + + it(`should have as title 'app works!'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app works!'); + })); + + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('app works!'); + })); +}); diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts new file mode 100644 index 0000000000..4c1b4a9bf7 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts @@ -0,0 +1,16 @@ +// #docregion import +import { Component } from '@angular/core'; +// #enddocregion import + +// #docregion metadata +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +// #enddocregion metadata +// #docregion title, class +export class AppComponent { + title = 'My First Angular App'; +} +// #enddocregion title, class diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts new file mode 100644 index 0000000000..67ae49119b --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts @@ -0,0 +1,20 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep b/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts new file mode 100644 index 0000000000..3612073bc3 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts new file mode 100644 index 0000000000..b7f639aeca --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `.angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/public/docs/_examples/cli-quickstart/ts/src/favicon.ico b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico new file mode 100644 index 0000000000..8081c7ceaf Binary files /dev/null and b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico differ diff --git a/public/docs/_examples/cli-quickstart/ts/src/index.html b/public/docs/_examples/cli-quickstart/ts/src/index.html new file mode 100644 index 0000000000..8a1a7b32b3 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/index.html @@ -0,0 +1,14 @@ + + + + +Tour of Heroes
+Controls
+ + ` +}) +// #enddocregion inlinestyles +export class HeroControlsComponent { + @Input() hero: Hero; + + activate() { + this.hero.active = true; + } +} diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css b/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css new file mode 100644 index 0000000000..f240073005 --- /dev/null +++ b/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css @@ -0,0 +1,3 @@ +:host { + padding: 10px; +} diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css new file mode 100644 index 0000000000..fd938ca55c --- /dev/null +++ b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css @@ -0,0 +1,28 @@ +/* #docregion import */ +@import 'https://github.com/hero-details-box.css'; +/* #enddocregion import */ + +/* #docregion host */ +:host { + display: block; + border: 1px solid black; +} +/* #enddocregion host */ + +/* #docregion hostfunction */ +:host(.active) { + border-width: 3px; +} +/* #enddocregion hostfunction */ + +/* #docregion hostcontext */ +:host-context(.theme-light) h2 { + background-color: #eef; +} +/* #enddocregion hostcontext */ + +/* #docregion deep */ +:host /deep/ h3 { + font-style: italic; +} +/* #enddocregion deep */ diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts new file mode 100644 index 0000000000..bd86a63e04 --- /dev/null +++ b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts @@ -0,0 +1,18 @@ +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; + +// #docregion styleurls +@Component({ + selector: 'hero-details', + template: ` +{{hero.name}}
+Team
+-
+
- + {{member}} + +
No quests in progress
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts new file mode 100644 index 0000000000..2a2dc65fe0 --- /dev/null +++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts @@ -0,0 +1,20 @@ +/* tslint:disable:no-unused-variable */ +// #docplaster +import { Component, ViewEncapsulation } from '@angular/core'; + +// #docregion +@Component({ + selector: 'quest-summary', + // #docregion urls + templateUrl: './quest-summary.component.html', + styleUrls: ['./quest-summary.component.css'] + // #enddocregion urls +}) +export class QuestSummaryComponent { } +// #enddocregion +/* + // #docregion encapsulation.native + // warning: few browsers support shadow DOM encapsulation at this time + encapsulation: ViewEncapsulation.Native + // #enddocregion encapsulation.native +*/ diff --git a/public/docs/_examples/component-styles/ts/src/index.html b/public/docs/_examples/component-styles/ts/src/index.html new file mode 100644 index 0000000000..6e9dc51b32 --- /dev/null +++ b/public/docs/_examples/component-styles/ts/src/index.html @@ -0,0 +1,31 @@ + + + + +External H1 Title for E2E test
+{{title}}
+{{title}}
+{{title}}
+User
++ {{userInfo}} + +
+ Tests {{results.pass}}: {{results.message}} Get your crisis here Get your heroes here Heroes: Heroes: Heroes: Heroes: Heroes: There are many heroes! Heroes: There are many heroes!Cars
+ {{car.drive()}}
+ {{noDiCar.drive()}}
+ {{injectorCar.drive()}}
+ {{factoryCar.drive()}}
+ {{simpleCar.drive()}}
+ {{superCar.drive()}}
+ {{testCar.drive()}}
+ `,
+ providers: [Car, Engine, Tires]
+})
+export class CarComponent {
+ factoryCar = (new CarFactory).createCar();
+ injectorCar = useInjector();
+ noDiCar = new CarNoDi;
+ simpleCar = simpleCar();
+ superCar = superCar();
+ testCar = testCar();
+
+ constructor(public car: Car) {}
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts
new file mode 100644
index 0000000000..37162c570b
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+export class Engine {
+ public cylinders = 4;
+}
+
+export class Tires {
+ public make = 'Flintstone';
+ public model = 'Square';
+}
+
+@Injectable()
+export class Car {
+ // #docregion car-ctor
+ public description = 'DI';
+
+ constructor(public engine: Engine, public tires: Tires) { }
+ // #enddocregion car-ctor
+
+ // Method using the engine and tires
+ drive() {
+ return `${this.description} car with ` +
+ `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts
new file mode 100644
index 0000000000..ba32366aa9
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+
+ `
+})
+export class HeroListComponent {
+ heroes = HEROES;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts
new file mode 100644
index 0000000000..cb23d3257c
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+// #enddocregion
+import { HeroService } from './hero.service.1';
+/*
+// #docregion
+import { HeroService } from './hero.service';
+// #enddocregion
+*/
+// #docregion
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+
+ `
+})
+export class HeroListComponent {
+ heroes: Hero[];
+
+ // #docregion ctor
+ constructor(heroService: HeroService) {
+ this.heroes = heroService.getHeroes();
+ }
+ // #enddocregion ctor
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts
new file mode 100644
index 0000000000..db3a325bdb
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts
@@ -0,0 +1,26 @@
+/* tslint:disable:one-line */
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+ ({{hero.isSecret ? 'secret' : 'public'}})
+
+ `,
+})
+export class HeroListComponent {
+ heroes: Hero[];
+
+ // #docregion ctor-signature
+ constructor(heroService: HeroService)
+ // #enddocregion ctor-signature
+ {
+ this.heroes = heroService.getHeroes();
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts
new file mode 100644
index 0000000000..2e0e3ca734
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+ getHeroes() { return HEROES; }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts
new file mode 100644
index 0000000000..6b3a98306a
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+import { Logger } from '../logger.service';
+
+@Injectable()
+export class HeroService {
+
+ // #docregion ctor
+ constructor(private logger: Logger) { }
+ // #enddocregion ctor
+
+ getHeroes() {
+ this.logger.log('Getting heroes ...');
+ return HEROES;
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
new file mode 100644
index 0000000000..6de4ebee90
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
@@ -0,0 +1,19 @@
+/* tslint:disable:one-line */
+// #docregion
+import { HeroService } from './hero.service';
+import { Logger } from '../logger.service';
+import { UserService } from '../user.service';
+
+// #docregion factory
+let heroServiceFactory = (logger: Logger, userService: UserService) => {
+ return new HeroService(logger, userService.user.isAuthorized);
+};
+// #enddocregion factory
+
+// #docregion provider
+export let heroServiceProvider =
+ { provide: HeroService,
+ useFactory: heroServiceFactory,
+ deps: [Logger, UserService]
+ };
+// #enddocregion provider
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts
new file mode 100644
index 0000000000..fb03ec1de6
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+import { Logger } from '../logger.service';
+
+@Injectable()
+export class HeroService {
+ // #docregion internals
+ constructor(
+ private logger: Logger,
+ private isAuthorized: boolean) { }
+
+ getHeroes() {
+ let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
+ this.logger.log(`Getting heroes for ${auth} user.`);
+ return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
+ }
+ // #enddocregion internals
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts
new file mode 100644
index 0000000000..5c49328241
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts
@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+ id: number;
+ name: string;
+ isSecret = false;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts
new file mode 100644
index 0000000000..e0e9deae08
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion full, v1
+import { Component } from '@angular/core';
+// #enddocregion v1
+
+import { HeroService } from './hero.service';
+// #enddocregion full
+
+// #docregion full, v1
+
+@Component({
+ selector: 'my-heroes',
+ // #enddocregion v1
+ providers: [HeroService],
+ // #docregion v1
+ template: `
+ Heroes
+ Heroes
+ Other Injections
+ {{car.drive()}}
+ {{hero.name}}
+ {{rodent}}
+ `,
+ providers: [Car, Engine, Tires, heroServiceProvider, Logger]
+})
+export class InjectorComponent implements OnInit {
+ car: Car;
+
+ // #docregion get-hero-service
+ heroService: HeroService;
+ // #enddocregion get-hero-service
+ hero: Hero;
+
+ constructor(private injector: Injector) { }
+
+ ngOnInit() {
+ this.car = this.injector.get(Car);
+ this.heroService = this.injector.get(HeroService);
+ this.hero = this.heroService.getHeroes()[0];
+ }
+
+ get rodent() {
+ let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
+ return this.injector.get(ROUS, rousDontExist);
+ }
+}
+// #enddocregion injector
+
+/**
+ * R.O.U.S. - Rodents Of Unusual Size
+ * // https://www.youtube.com/watch?v=BOv5ZjAOpC8
+ */
+class ROUS { }
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts b/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts
new file mode 100644
index 0000000000..e943523ad2
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+ logs: string[] = []; // capture logs for testing
+
+ log(message: string) {
+ this.logs.push(message);
+ console.log(message);
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts
new file mode 100644
index 0000000000..a96bfce99e
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts
@@ -0,0 +1,267 @@
+/* tslint:disable:one-line:check-open-brace*/
+// Examples of provider arrays
+// #docplaster
+import { Component, Inject, Injectable, OnInit } from '@angular/core';
+
+import { APP_CONFIG, AppConfig,
+ HERO_DI_CONFIG } from './app.config';
+
+import { HeroService } from './heroes/hero.service';
+import { heroServiceProvider } from './heroes/hero.service.provider';
+import { Logger } from './logger.service';
+import { UserService } from './user.service';
+
+let template = '{{log}}';
+
+//////////////////////////////////////////
+@Component({
+ selector: 'provider-1',
+ template: template,
+ // #docregion providers-1, providers-logger
+ providers: [Logger]
+ // #enddocregion providers-1, providers-logger
+})
+export class Provider1Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with Logger class');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+@Component({
+ selector: 'provider-3',
+ template: template,
+ providers:
+ // #docregion providers-3
+ [{ provide: Logger, useClass: Logger }]
+ // #enddocregion providers-3
+})
+export class Provider3Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useClass:Logger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+class BetterLogger extends Logger {}
+
+@Component({
+ selector: 'provider-4',
+ template: template,
+ providers:
+ // #docregion providers-4
+ [{ provide: Logger, useClass: BetterLogger }]
+ // #enddocregion providers-4
+})
+export class Provider4Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useClass:BetterLogger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+// #docregion EvenBetterLogger
+@Injectable()
+class EvenBetterLogger extends Logger {
+ constructor(private userService: UserService) { super(); }
+
+ log(message: string) {
+ let name = this.userService.user.name;
+ super.log(`Message to ${name}: ${message}`);
+ }
+}
+// #enddocregion EvenBetterLogger
+
+@Component({
+ selector: 'provider-5',
+ template: template,
+ providers:
+ // #docregion providers-5
+ [ UserService,
+ { provide: Logger, useClass: EvenBetterLogger }]
+ // #enddocregion providers-5
+})
+export class Provider5Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from EvenBetterlogger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+class NewLogger extends Logger {}
+class OldLogger {
+ logs: string[] = [];
+ log(message: string) {
+ throw new Error('Should not call the old logger!');
+ };
+}
+
+@Component({
+ selector: 'provider-6a',
+ template: template,
+ providers:
+ // #docregion providers-6a
+ [ NewLogger,
+ // Not aliased! Creates two instances of `NewLogger`
+ { provide: OldLogger, useClass: NewLogger}]
+ // #enddocregion providers-6a
+})
+export class Provider6aComponent {
+ log: string;
+ constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+ if (newLogger === oldLogger){
+ throw new Error('expected the two loggers to be different instances');
+ }
+ oldLogger.log('Hello OldLogger (but we want NewLogger)');
+ // The newLogger wasn't called so no logs[]
+ // display the logs of the oldLogger.
+ this.log = newLogger.logs[0] || oldLogger.logs[0];
+ }
+}
+
+@Component({
+ selector: 'provider-6b',
+ template: template,
+ providers:
+ // #docregion providers-6b
+ [ NewLogger,
+ // Alias OldLogger w/ reference to NewLogger
+ { provide: OldLogger, useExisting: NewLogger}]
+ // #enddocregion providers-6b
+})
+export class Provider6bComponent {
+ log: string;
+ constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+ if (newLogger !== oldLogger){
+ throw new Error('expected the two loggers to be the same instance');
+ }
+ oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
+ this.log = newLogger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+// #docregion silent-logger
+// An object in the shape of the logger service
+let silentLogger = {
+ logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
+ log: () => {}
+};
+// #enddocregion silent-logger
+
+@Component({
+ selector: 'provider-7',
+ template: template,
+ providers:
+ // #docregion providers-7
+ [{ provide: Logger, useValue: silentLogger }]
+ // #enddocregion providers-7
+})
+export class Provider7Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useValue');
+ this.log = logger.logs[0];
+ }
+}
+/////////////////
+
+@Component({
+ selector: 'provider-8',
+ template: template,
+ providers: [heroServiceProvider, Logger, UserService]
+})
+export class Provider8Component {
+ // must be true else this component would have blown up at runtime
+ log = 'Hero service injected successfully via heroServiceProvider';
+
+ // #docregion provider-8-ctor
+ constructor(heroService: HeroService) { }
+ // #enddocregion provider-8-ctor
+}
+
+/////////////////
+@Component({
+ selector: 'provider-9',
+ template: template,
+ /*
+ // #docregion providers-9-interface
+ // FAIL! Can't use interface as provider token
+ [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
+ // #enddocregion providers-9-interface
+ */
+ // #docregion providers-9
+ providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
+ // #enddocregion providers-9
+})
+export class Provider9Component implements OnInit {
+ log: string;
+ /*
+ // #docregion provider-9-ctor-interface
+ // FAIL! Can't inject using the interface as the parameter type
+ constructor(private config: AppConfig){ }
+ // #enddocregion provider-9-ctor-interface
+ */
+ // #docregion provider-9-ctor
+ constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
+ // #enddocregion provider-9-ctor
+
+ ngOnInit() {
+ this.log = 'APP_CONFIG Application title is ' + this.config.title;
+ }
+}
+//////////////////////////////////////////
+// Sample providers 1 to 7 illustrate a required logger dependency.
+// Optional logger, can be null
+// #docregion import-optional
+import { Optional } from '@angular/core';
+// #enddocregion import-optional
+
+let some_message = 'Hello from the injected logger';
+
+@Component({
+ selector: 'provider-10',
+ template: template,
+ providers: [{ provide: Logger, useValue: null }]
+})
+export class Provider10Component implements OnInit {
+ log: string;
+ // #docregion provider-10-ctor
+ constructor(@Optional() private logger: Logger) {
+ if (this.logger) {
+ this.logger.log(some_message);
+ }
+ }
+ // #enddocregion provider-10-ctor
+
+ ngOnInit() {
+ this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
+ }
+}
+
+/////////////////
+@Component({
+ selector: 'my-providers',
+ template: `
+ Provider variations
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class ProvidersComponent { }
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts
new file mode 100644
index 0000000000..fc0fef75a8
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts
@@ -0,0 +1,55 @@
+/* tslint:disable */
+// Simulate a simple test
+// Reader should look to the testing chapter for the real thing
+
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes/hero.service';
+import { HeroListComponent } from './heroes/hero-list.component';
+
+@Component({
+ selector: 'my-tests',
+ template: `
+ Tests
+ Simple Deployment
+
+ CRISIS CENTER
+ HEROES
+ {{title}} [Ctor version]
+ My favorite hero is: {{myHero}}
+ `
+})
+// #docregion class
+export class AppCtorComponent {
+ title: string;
+ myHero: string;
+
+ constructor() {
+ this.title = 'Tour of Heroes';
+ this.myHero = 'Windstorm';
+ }
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app-ctor.ts b/public/docs/_examples/displaying-data/ts/src/app/app-ctor.ts
deleted file mode 100644
index d257de577c..0000000000
--- a/public/docs/_examples/displaying-data/ts/src/app/app-ctor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Component, bootstrap} from 'angular2/angular2';
-
-@Component({
- selector: 'my-app-ctor',
- template: `
- {{title}} [Ctor version]
- My favorite hero is: {{myHero}}
- `
-})
-// #docregion app-ctor
-export class AppCtorComponent {
- title: string;
- myHero: string;
-
- constructor() {
- this.title = 'Tour of Heroes';
- this.myHero = 'Windstorm';
- }
-}
-// #enddocregion app-ctor
\ No newline at end of file
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.1.ts b/public/docs/_examples/displaying-data/ts/src/app/app.1.ts
deleted file mode 100644
index a12c6f44e6..0000000000
--- a/public/docs/_examples/displaying-data/ts/src/app/app.1.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import {Component, bootstrap} from 'angular2/angular2';
-
-@Component({
- selector: 'my-app',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
- `
- // #enddocregion template
-})
-export class AppComponent {
- title = 'Tour of Heroes';
- myHero = 'Windstorm';
-}
-
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.2.ts b/public/docs/_examples/displaying-data/ts/src/app/app.2.ts
deleted file mode 100644
index bdefa492da..0000000000
--- a/public/docs/_examples/displaying-data/ts/src/app/app.2.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-// #docregion imports
-import {Component, bootstrap, NgFor} from 'angular2/angular2';
-// #enddocregion imports
-
-@Component({
- selector: 'my-app',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
-
- // #docregion li-repeater
-
- `,
- // #enddocregion template
- // #docregion directives
- directives: [NgFor]
- // #enddocregion directives
-})
-// #docregion mock-heroes
-export class AppComponent {
- title = 'Tour of Heroes';
- heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
- myHero = this.heroes[0];
-}
-// #enddocregion mock-heroes
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.3.ts b/public/docs/_examples/displaying-data/ts/src/app/app.3.ts
deleted file mode 100644
index 327882bd11..0000000000
--- a/public/docs/_examples/displaying-data/ts/src/app/app.3.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// #docregion
-// #docregion import-ng-if
-import {Component, bootstrap, NgFor, NgIf} from 'angular2/angular2';
-// #enddocregion import-ng-if
-// #docregion import-hero
-import {Hero} from './hero';
-// #enddocregion import-hero
-
-@Component({
- selector: 'my-app',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
-
-
- `,
- // #enddocregion template
- // #docregion directives
- directives: [NgFor, NgIf]
- // #enddocregion directives
-})
-// #docregion class
-export class AppComponent {
- title = 'Tour of Heroes';
- // #docregion heroes
- heroes = [
- new Hero(1, 'Windstorm'),
- new Hero(13, 'Bombasto'),
- new Hero(15, 'Magneta'),
- new Hero(20, 'Tornado')
- ];
- myHero = this.heroes[0];
- // #enddocregion heroes
-}
-// #enddocregion class
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts
new file mode 100644
index 0000000000..1cbeb0f731
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero}}
+ `
+ // #enddocregion template
+})
+export class AppComponent {
+ title = 'Tour of Heroes';
+ myHero = 'Windstorm';
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts
new file mode 100644
index 0000000000..da7a653973
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero}}
+
+ // #docregion li
+
+ `
+ // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+ title = 'Tour of Heroes';
+ heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+ myHero = this.heroes[0];
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts
new file mode 100644
index 0000000000..06ab060557
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import
+import { Hero } from './hero';
+// #enddocregion import
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero.name}}
+
+
+ `
+ // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+ title = 'Tour of Heroes';
+ // #docregion heroes
+ heroes = [
+ new Hero(1, 'Windstorm'),
+ new Hero(13, 'Bombasto'),
+ new Hero(15, 'Magneta'),
+ new Hero(20, 'Tornado')
+ ];
+ myHero = this.heroes[0];
+ // #enddocregion heroes
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..7234959265
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion final
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero.name}}
+
+
+ // #docregion message
+ {{title}}
- My favorite hero is: {{myHero.name}}
-
-
- // #docregion message
-
-
+
+
+
+
+
+
+
+
+
+ Hero Form
+
+
+
+
+
+You submitted the following:
+
+
+ Name
+ {{ model.name }}
+
+
+ Alter Ego
+ {{ model.alterEgo }}
+
+
+ Power
+ {{ model.power }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/forms/js/src/app/hero-form.component.js b/public/docs/_examples/forms/js/src/app/hero-form.component.js
new file mode 100644
index 0000000000..505993a1fd
--- /dev/null
+++ b/public/docs/_examples/forms/js/src/app/hero-form.component.js
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+// #docregion first, final
+(function(app) {
+ app.HeroFormComponent = ng.core
+ .Component({
+ selector: 'hero-form',
+ templateUrl: 'app/hero-form.component.html'
+ })
+ .Class({
+ // #docregion submitted
+ constructor: [function() {
+ // #enddocregion submitted
+ this.powers = ['Really Smart', 'Super Flexible',
+ 'Super Hot', 'Weather Changer'
+ ];
+
+ this.model = new app.Hero(18, 'Dr IQ', this.powers[0],
+ 'Chuck Overstreet');
+
+ // #docregion submitted
+ this.submitted = false;
+ }],
+ onSubmit: function() {
+ this.submitted = true;
+ },
+ // #enddocregion submitted
+
+ // #enddocregion final
+ // TODO: Remove this when we're done
+ diagnostic: function() {
+ return JSON.stringify(this.model);
+ },
+ // #enddocregion first
+
+
+ //////// DO NOT SHOW IN DOCS ////////
+
+ // Reveal in html:
+ // AlterEgo via form.controls = {{showFormControls(hf)}}
+ showFormControls: function(form) {
+ return form.controls['alterEgo'] &&
+ // #docregion form-controls
+ form.controls['name'].value; // Dr. IQ
+ // #enddocregion form-controls
+ },
+ /////////////////////////////
+
+ // #docregion first, final
+ });
+})(window.app || (window.app = {}));
+// #enddocregion first, final
diff --git a/public/docs/_examples/forms/js/src/app/hero.js b/public/docs/_examples/forms/js/src/app/hero.js
new file mode 100644
index 0000000000..9c2449c922
--- /dev/null
+++ b/public/docs/_examples/forms/js/src/app/hero.js
@@ -0,0 +1,11 @@
+// #docregion
+(function(app) {
+ app.Hero = Hero;
+
+ function Hero(id, name, power, alterEgo) {
+ this.id = id;
+ this.name = name;
+ this.power = power;
+ this.alterEgo = alterEgo;
+ }
+})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/forms/ts/src/styles.css b/public/docs/_examples/forms/js/src/forms.css
similarity index 100%
rename from public/docs/_examples/forms/ts/src/styles.css
rename to public/docs/_examples/forms/js/src/forms.css
diff --git a/public/docs/_examples/forms/js/src/index.html b/public/docs/_examples/forms/js/src/index.html
new file mode 100644
index 0000000000..3a41d74a3b
--- /dev/null
+++ b/public/docs/_examples/forms/js/src/index.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+ Hero Form
+
+
+
+
+
+
+
+
+ Hero Form
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+
+
+
+
+ Name via form.controls = {{showFormControls(heroForm)}}
+
@@ -82,6 +102,7 @@ Hero Form
-
- You submitted the following:
+
+
+
+
+
+
+
+
+
+
-
-