#{subtitle} +header(class="background-sky l-relative") - .hero-cta - a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started \ No newline at end of file + .hero.background-superhero-paper.is-large + img(class="hero-logo" src='/resources/images/logos/angular/angular.svg') + h1.text-headline #{title}
#{subtitle} + a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started + + announcement-bar + .announcement-bar-slide.clearfix + img(src="/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 6e301a0b71..bf346a6a3a 100644 --- a/public/_includes/_hero.jade +++ b/public/_includes/_hero.jade @@ -1,11 +1,11 @@ -// Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates +//- 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` +//- renamer :: String -> String +//- Renames `Let` and `Var` into `Const` - var renamer = function renamer(docType) { - return (docType === 'Let' || docType === 'Var') ? 'Const' : docType - } @@ -13,25 +13,29 @@ if current.path[4] && current.path[3] == 'api' - var textFormat = 'is-standard-case' -header(class="hero background-sky") - div(class="inner-header") - h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} - if useBadges - span(class="badges") - if docType - span(class="status-badge"). - #{renamer(capitalize(docType))} - if stability - span(layout="row" class="status-badge") - // badge circle is filled based on stability by matching a css selector in _hero.scss - span(class="status-circle status-#{stability}") - span Stability: #{capitalize(stability)} - if security - span(class="status-badge security-risk-badge"). - Security Risk +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;
+ - var avoidClass = avoid ? 'is-anti-pattern' : '';
+
+ div(class="code-example #{avoidClass}")
+ if (title)
+ header
+ h4 #{title}
+ code-example(language="#{language}" format="#{format}")
+ if (jsonExtract == 'ERROR')
+ err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
+ else
+ != styleString(jsonExtract, stylePatterns)
+
+if !jade2ng
+ //- Open (and close) an explanation
. See QuickStart
+ script.
+ function why(id, backTo) {
+ var id = "#"+id;
+ var el = document.querySelector(id);
+ el.hidden=el.hidden=!el.hidden;
+
+ if (el.hidden && backTo){
+ // the next line is required to work around a bug in WebKit (Chrome / Safari)
+ location.href = "#";
+ location.href = "#" + backTo;
+ }
}
- }
-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;
+ 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;
}
}
- break;
- }
+ if(value == undefined)
+ return CCSstyle[style]
+ else
+ return CCSstyle[style] = value
}
- if(value == undefined)
- return CCSstyle[style]
- else
- return CCSstyle[style] = value
- }
+
//---------------------------------------------------------------------------------------------------------
//- Converts the given project-relative path (like 'app/main.ts')
//- to a doc folder relative path (like 'quickstart/ts/app/main.ts')
@@ -212,8 +231,8 @@ script.
- // E.g. of a project relative path is 'app/main.ts'
- if (ex.title === null || ex.title === undefined) {
- // Title is not given so take it to be ex.filePath.
-- // Is title like styles.1.css? Then drop the '.1' qualifier:
-- var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/);
+- // Title like styles.1.css or foo_1.dart? Then drop the '.1' or '_1' qualifier:
+- var matches = ex.filePath.match(/^(.*)[\._]\d(\.\w+)$/);
- ex.title = matches ? matches[1] + matches[2] : ex.filePath;
- }
- ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath;
@@ -234,7 +253,7 @@ script.
//- Returns truthy iff path is example project relative.
- var isProjRelDir = function(path) {
-- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.js');
+- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.ts');
- // Last conjunct handles case for shared project e2e test file like
- // cb-component-communication/e2e-spec.js (is shared between ts & dart)
- // TODO: generalize: compare start with getExampleName(); which needs to be fixed.
diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index 6bba60975a..d9ebe2b368 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -5,7 +5,7 @@
- var version = ''
- var page = ''
-
+//- Replace _ underscores with . dots
if current.path[2]
- var version = current.path[2].replace(/\_+/gm, ".")
@@ -33,43 +33,45 @@ else if current.path[3]
else
- var page = current.path[3] + '.html'
-
+//- VERSION TREE CREATOR MIXIN
mixin tree(directory, urlPrefix, name, latest)
- ul
- for val, semvar in directory
- if semvar !== '.git' && semvar !== '_data'
- - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".")
- li #{name} #{libVersion}
+ for val, semvar in directory
+ if semvar !== '.git' && semvar !== '_data'
+ - var libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".")
+ li #{name} #{libVersion}
-
+//- BUTTON TITLE GENERATION
if language == 'ts'
if version == "latest"
- - var title = 'Angular 2 for TypeScript'
+ - var title = 'Angular for TypeScript'
else
- var title = 'Angular ' + version + ' for TypeScript'
if language == 'js'
if version == "latest"
- - var title = 'Angular 2 for JavaScript'
+ - var title = 'Angular for JavaScript'
else
- var title = 'Angular ' + version + ' for JavaScript'
if language == 'dart'
if version == "latest"
- - var title = 'Angular 2 for Dart'
+ - var title = 'Angular for Dart'
else
- var title = 'Angular ' + version + ' for Dart'
+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.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")
-
-
- div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
- mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
- mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
- mixin tree(public.docs.dart, "/docs/dart", "Angular 2 for Dart")
+ //- 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 aef7728caa..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.ng-cloak.l-offset-nav(ng-controller="AppCtrl as 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/index.jade b/public/cardboard/index.jade
index 57a8b0bbb6..a0a76d0e80 100644
--- a/public/cardboard/index.jade
+++ b/public/cardboard/index.jade
@@ -30,7 +30,7 @@ style(rel='stylesheet').
li.
Best Technology Demonstration
- Huge hint: Angular 2 scores points + Huge hint: Angular scores points p Don’t have Cardboard and want one? Check out: p.text-center diff --git a/public/contribute.jade b/public/contribute.jade index 451269dd40..994d46a36d 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -3,11 +3,11 @@ p We'd love for you to contribute to our source code and to make Angular projects even better. .l-sub-section - h3 Angular 2 + h3 Angular - p Angular 2, now in beta, is a next generation mobile and desktop application development platform. + p Angular is a next generation mobile and desktop application development platform. - a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2 + a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular .l-sub-section h3 Angular for JavaScript or Dart diff --git a/public/docs/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 shreds files in directories changed during -the current session. diff --git a/public/docs/_examples/.editorconfig b/public/docs/_examples/.editorconfig deleted file mode 100644 index f2abacf6d3..0000000000 --- a/public/docs/_examples/.editorconfig +++ /dev/null @@ -1,20 +0,0 @@ -# http://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true - - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = false - -# Indentation override -#[lib/**.js] -#[{package.json,.travis.yml}] -#[**/**.js] diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 449fd35581..3fb5ae8562 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -1,26 +1,18 @@ -.editorconfig -.idea -.vscode -styles.css -typings -typings.json -node_modules -jspm_packages -*.js.map -package.json -karma.conf.js -karma-test-shim.js -tsconfig.json -tslint.json -wallaby.js -npm-debug*. -protractor.config.js -systemjs.config.js +# _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 -_temp +protractor-helpers.js +*/e2e-spec.js **/ts/**/*.js +**/js-es6*/**/*.js **/ts-snippets/**/*.js -*.d.ts - -!**/*e2e-spec.js -!systemjs.config.1.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/tslint.json b/public/docs/_examples/_boilerplate/tslint.json similarity index 100% rename from public/docs/_examples/tslint.json rename to public/docs/_examples/_boilerplate/tslint.json diff --git a/public/docs/_examples/_protractor/e2e.d.ts b/public/docs/_examples/_protractor/e2e.d.ts deleted file mode 100644 index ab91658443..0000000000 --- a/public/docs/_examples/_protractor/e2e.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -///;
-declare function describeIf(cond: boolean, name: string, func: Function): void;
-declare function itIf(cond: boolean, name: string, func: Function): void;
-
-declare namespace protractor {
- interface IBrowser {
- appIsTs: boolean;
- appIsJs: boolean;
- }
-}
diff --git a/public/docs/_examples/_protractor/package.json b/public/docs/_examples/_protractor/package.json
deleted file mode 100644
index eca5cae41f..0000000000
--- a/public/docs/_examples/_protractor/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "name": "angular2-examples-protractor",
- "version": "1.0.0",
- "description": "Manage _protractor folder installations",
- "scripts": {
- "postinstall": "typings install",
- "typings": "typings",
- "protractor": "protractor",
- "webdriver:update": "webdriver-manager update"
- },
- "keywords": [],
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "protractor": "^3.3.0",
- "typings": "^1.0.4"
- },
- "repository": {}
-}
diff --git a/public/docs/_examples/_protractor/tsconfig.json b/public/docs/_examples/_protractor/tsconfig.json
deleted file mode 100644
index eab9c24f92..0000000000
--- a/public/docs/_examples/_protractor/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "module": "commonjs",
- "moduleResolution": "node",
- "sourceMap": true,
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "removeComments": false,
- "noImplicitAny": true,
- "suppressImplicitAnyIndexErrors": true
- },
- "files": [
- "e2e-spec.ts"
- ]
-}
diff --git a/public/docs/_examples/_protractor/typings.json b/public/docs/_examples/_protractor/typings.json
deleted file mode 100644
index 6962cc930f..0000000000
--- a/public/docs/_examples/_protractor/typings.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "globalDependencies": {
- "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
- "core-js": "registry:dt/core-js#0.0.0+20160317120654",
- "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
- "node": "registry:dt/node#4.0.0+20160509154515",
- "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
- }
-}
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/architecture/dart/example-config.json b/public/docs/_examples/animations/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/architecture/dart/example-config.json
rename to public/docs/_examples/animations/ts/example-config.json
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
+
- heroes;
- Hero selectedHero;
-// #docregion ctor
- HeroListComponent(HeroService heroService) {
- heroes = heroService.getHeroes();
- }
-// #enddocregion ctor
- selectHero(Hero hero) {
- selectedHero = hero;
- }
-}
-// #enddocregion class
diff --git a/public/docs/_examples/architecture/dart/lib/hero_list_component.html b/public/docs/_examples/architecture/dart/lib/hero_list_component.html
deleted file mode 100644
index e493e949fb..0000000000
--- a/public/docs/_examples/architecture/dart/lib/hero_list_component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
- getHeroes() {
- List heroes = _backendService.getAll(Hero);
- _logger.log('Got ${heroes.length} heroes from the server.');
- return heroes;
- }
-}
-// #enddocregion class
diff --git a/public/docs/_examples/architecture/dart/lib/logger_service.dart b/public/docs/_examples/architecture/dart/lib/logger_service.dart
deleted file mode 100644
index 2d6d1c4f75..0000000000
--- a/public/docs/_examples/architecture/dart/lib/logger_service.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import 'dart:html';
-
-import 'package:angular2/core.dart';
-
-/// A service for logging messages of various types.
-///
-/// We could switch this implementation to use package:logging.
-@Injectable()
-class Logger {
- void log(Object msg) => window.console.log(msg);
-
- void error(Object msg) => window.console.error(msg);
-
- void warn(Object msg) => window.console.warn(msg);
-}
diff --git a/public/docs/_examples/architecture/dart/pubspec.yaml b/public/docs/_examples/architecture/dart/pubspec.yaml
deleted file mode 100644
index 9418b2ec76..0000000000
--- a/public/docs/_examples/architecture/dart/pubspec.yaml
+++ /dev/null
@@ -1,15 +0,0 @@
-# #docregion
-name: developer_guide_intro
-description: Developer Guide Intro
-version: 0.0.1
-environment:
- sdk: '>=1.13.0 <2.0.0'
-dependencies:
- angular2: 2.0.0-beta.17
- browser: ^0.10.0
- dart_to_js_script_rewriter: ^1.0.1
-transformers:
-- angular2:
- platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
- entry_points: web/main.dart
-- dart_to_js_script_rewriter
diff --git a/public/docs/_examples/architecture/dart/web/index.html b/public/docs/_examples/architecture/dart/web/index.html
deleted file mode 100644
index 17a00ffbed..0000000000
--- a/public/docs/_examples/architecture/dart/web/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
- Intro to Angular 2
-
-
-
-
-
- Loading...
-
-
diff --git a/public/docs/_examples/architecture/dart/web/main.dart b/public/docs/_examples/architecture/dart/web/main.dart
deleted file mode 100644
index acb382ab8e..0000000000
--- a/public/docs/_examples/architecture/dart/web/main.dart
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import 'package:angular2/platform/browser.dart';
-
-import 'package:developer_guide_intro/backend_service.dart';
-import 'package:developer_guide_intro/hero_list_component.dart';
-import 'package:developer_guide_intro/hero_service.dart';
-import 'package:developer_guide_intro/logger_service.dart';
-
-main() {
- // #docregion bootstrap
- bootstrap(HeroListComponent, [BackendService, HeroService, Logger]);
- // #enddocregion bootstrap
-}
diff --git a/public/docs/_examples/architecture/e2e-spec.ts b/public/docs/_examples/architecture/e2e-spec.ts
index 66ea2a1081..e967804483 100644
--- a/public/docs/_examples/architecture/e2e-spec.ts
+++ b/public/docs/_examples/architecture/e2e-spec.ts
@@ -1,62 +1,100 @@
-/// {
+ // Get hero id from the first ('RunnersUp');
+// #enddocregion runners-up
// #docregion factory-synopsis
export function runnersUpFactory(take: number) {
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts
similarity index 100%
rename from public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts
similarity index 80%
rename from public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts
index 782e65043d..ed394fc734 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/user-context.service.ts
@@ -9,19 +9,19 @@ import { UserService } from './user.service';
@Injectable()
export class UserContextService {
// #enddocregion injectables, injectable
- name:string;
- role:string;
- loggedInSince:Date;
+ name: string;
+ role: string;
+ loggedInSince: Date;
// #docregion ctor, injectables
- constructor(private userService:UserService, private loggerService:LoggerService){
+ constructor(private userService: UserService, private loggerService: LoggerService) {
// #enddocregion ctor, injectables
this.loggedInSince = new Date();
// #docregion ctor, injectables
}
// #enddocregion ctor, injectables
- loadUser(userId:number){
+ loadUser(userId: number) {
let user = this.userService.getUserById(userId);
this.name = user.name;
this.role = user.role;
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 @@
+
+
+
+ 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/sample.css b/public/docs/_examples/cb-dependency-injection/ts/src/sample.css
similarity index 100%
rename from public/docs/_examples/cb-dependency-injection/ts/sample.css
rename to public/docs/_examples/cb-dependency-injection/ts/src/sample.css
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-component-relative-paths/ts/example-config.json b/public/docs/_examples/cb-dynamic-component-loader/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/cb-component-relative-paths/ts/example-config.json
rename to public/docs/_examples/cb-dynamic-component-loader/ts/example-config.json
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
index d526626b24..408ac75766 100644
--- a/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
+++ b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
@@ -1,4 +1,7 @@
-/// ;
- @Input() form:ControlGroup;
- get isValid() { return this.form.controls[this.question.key].valid; }
-}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
deleted file mode 100644
index 68aafc839b..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { Component, Input, OnInit } from '@angular/core';
-import { ControlGroup } from '@angular/common';
-
-import { QuestionBase } from './question-base';
-import { QuestionControlService } from './question-control.service';
-import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
-
-@Component({
- selector:'dynamic-form',
- templateUrl:'app/dynamic-form.component.html',
- directives: [DynamicFormQuestionComponent],
- providers: [QuestionControlService]
-})
-export class DynamicForm {
-
- @Input() questions: QuestionBase[] = [];
- form: ControlGroup;
- payLoad = '';
-
- constructor(private qcs: QuestionControlService) { }
-
- ngOnInit(){
- this.form = this.qcs.toControlGroup(this.questions);
- }
-
- onSubmit() {
- this.payLoad = JSON.stringify(this.form.value);
- }
-}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
deleted file mode 100644
index aca0a06056..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, [])
- .catch((err:any) => console.error(err));
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-base.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-base.ts
deleted file mode 100644
index c22de02989..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question-base.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #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/app/question-control.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
deleted file mode 100644
index d4cf25951c..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { ControlGroup, FormBuilder, Validators } from '@angular/common';
-import { QuestionBase } from './question-base';
-
-@Injectable()
-export class QuestionControlService {
- constructor(private fb:FormBuilder){ }
-
- toControlGroup(questions:QuestionBase[] ) {
- let group = {};
-
- questions.forEach(question => {
- group[question.key] = question.required ? [question.value || '', Validators.required] : [question.value || ''];
- });
- return this.fb.group(group);
- }
-}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts
deleted file mode 100644
index 50b5d64a1d..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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/app/question-textbox.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts
deleted file mode 100644
index a1c9980de5..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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/app/question.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
deleted file mode 100644
index 52b4fc70ff..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { QuestionBase } from './question-base';
-import { DynamicForm } from './dynamic-form.component';
-import { TextboxQuestion } from './question-textbox';
-import { DropdownQuestion } from './question-dropdown';
-
-@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/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html
deleted file mode 100644
index ec3e1cbbb2..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
- Dynamic Form
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading app...
-
-
-
diff --git a/public/docs/_examples/cb-dynamic-form/ts/plnkr.json b/public/docs/_examples/cb-dynamic-form/ts/plnkr.json
index faa498f46f..1f50b4a992 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/plnkr.json
+++ b/public/docs/_examples/cb-dynamic-form/ts/plnkr.json
@@ -1,7 +1,8 @@
{
"description": "Dynamic Form",
+ "basePath": "src/",
"files":[
- "!**/*.d.ts",
+ "!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
],
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/app/dynamic-form.component.html b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html
similarity index 88%
rename from public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.html
rename to public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html
index e8f14612c9..717f09ff71 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.html
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html
@@ -1,6 +1,6 @@
- Huge hint: Angular 2 scores points + Huge hint: Angular scores points p Don’t have Cardboard and want one? Check out: p.text-center diff --git a/public/contribute.jade b/public/contribute.jade index 451269dd40..994d46a36d 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -3,11 +3,11 @@ p We'd love for you to contribute to our source code and to make Angular projects even better. .l-sub-section - h3 Angular 2 + h3 Angular - p Angular 2, now in beta, is a next generation mobile and desktop application development platform. + p Angular is a next generation mobile and desktop application development platform. - a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2 + a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular .l-sub-section h3 Angular for JavaScript or Dart diff --git a/public/docs/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 shreds files in directories changed during -the current session. diff --git a/public/docs/_examples/.editorconfig b/public/docs/_examples/.editorconfig deleted file mode 100644 index f2abacf6d3..0000000000 --- a/public/docs/_examples/.editorconfig +++ /dev/null @@ -1,20 +0,0 @@ -# http://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true - - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = false - -# Indentation override -#[lib/**.js] -#[{package.json,.travis.yml}] -#[**/**.js] diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 449fd35581..3fb5ae8562 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -1,26 +1,18 @@ -.editorconfig -.idea -.vscode -styles.css -typings -typings.json -node_modules -jspm_packages -*.js.map -package.json -karma.conf.js -karma-test-shim.js -tsconfig.json -tslint.json -wallaby.js -npm-debug*. -protractor.config.js -systemjs.config.js +# _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 -_temp +protractor-helpers.js +*/e2e-spec.js **/ts/**/*.js +**/js-es6*/**/*.js **/ts-snippets/**/*.js -*.d.ts - -!**/*e2e-spec.js -!systemjs.config.1.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/tslint.json b/public/docs/_examples/_boilerplate/tslint.json similarity index 100% rename from public/docs/_examples/tslint.json rename to public/docs/_examples/_boilerplate/tslint.json diff --git a/public/docs/_examples/_protractor/e2e.d.ts b/public/docs/_examples/_protractor/e2e.d.ts deleted file mode 100644 index ab91658443..0000000000 --- a/public/docs/_examples/_protractor/e2e.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -///
-
+
- + {{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
+-
{{hero.name}} Detail
-Id: {{hero.id}}
-Name:
-
-
-
-Power:
-
diff --git a/public/docs/_examples/architecture/dart/lib/hero_list_component.dart b/public/docs/_examples/architecture/dart/lib/hero_list_component.dart
deleted file mode 100644
index ba2b75de70..0000000000
--- a/public/docs/_examples/architecture/dart/lib/hero_list_component.dart
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docplaster
-import 'package:angular2/core.dart';
-
-import 'hero.dart';
-import 'hero_detail_component.dart';
-import 'hero_service.dart';
-
-// #docregion metadata
-// #docregion providers
-@Component(
-// #enddocregion providers
- selector: 'hero-list',
- templateUrl: 'hero_list_component.html',
- directives: const [HeroDetailComponent],
-// #docregion providers
- providers: const [HeroService])
-// #enddocregion providers
-// #enddocregion metadata
-/*
-// #docregion metadata, providers
-class HeroListComponent { ... }
-// #enddocregion metadata, providers
-*/
-// #docregion class
-class HeroListComponent {
- ListHero List
- -
- {{hero.name}}
-
-
-{{hero.name}}
-...
-
-
-
-...
-
+ // 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/app/app.component.ts b/public/docs/_examples/architecture/ts/app/app.component.ts
deleted file mode 100644
index 930cf5f045..0000000000
--- a/public/docs/_examples/architecture/ts/app/app.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion import
-import { Component } from '@angular/core';
-// #enddocregion import
-import { HeroListComponent } from './hero-list.component';
-import { SalesTaxComponent } from './sales-tax.component';
-
-@Component({
- selector: 'my-app',
- template: `
-
-Architecture of Angular 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
diff --git a/public/docs/_examples/architecture/ts/plnkr.json b/public/docs/_examples/architecture/ts/plnkr.json
index 3acf69014c..b2f47131df 100644
--- a/public/docs/_examples/architecture/ts/plnkr.json
+++ b/public/docs/_examples/architecture/ts/plnkr.json
@@ -1,5 +1,6 @@
{
- "description": "Intro to Angular2",
+ "description": "Intro to Angular",
+ "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
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: `
+ {
+ getAll(type: Type): PromiseLike {
if (type === Hero) {
// TODO get from the database
return Promise.resolve(HEROES);
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/dart/lib/app_component.dart b/public/docs/_examples/attribute-directives/dart/lib/app_component.dart
deleted file mode 100644
index 29f44ea6e9..0000000000
--- a/public/docs/_examples/attribute-directives/dart/lib/app_component.dart
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import 'package:angular2/core.dart';
-
-import 'highlight_directive.dart';
-
-@Component(
- selector: 'my-app',
- templateUrl: 'app_component.html',
- directives: const [HighlightDirective])
-class AppComponent {
- String color;
-}
diff --git a/public/docs/_examples/attribute-directives/dart/lib/app_component.html b/public/docs/_examples/attribute-directives/dart/lib/app_component.html
deleted file mode 100644
index f174bebbbb..0000000000
--- a/public/docs/_examples/attribute-directives/dart/lib/app_component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-Attribute Directives
-
-
-
-
-
- Loading...
-
-
diff --git a/public/docs/_examples/attribute-directives/dart/web/main.dart b/public/docs/_examples/attribute-directives/dart/web/main.dart
deleted file mode 100644
index 0703b7ab25..0000000000
--- a/public/docs/_examples/attribute-directives/dart/web/main.dart
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import 'package:angular2/platform/browser.dart';
-
-import 'package:attribute_directives/app_component.dart';
-
-main() {
- bootstrap(AppComponent);
-}
diff --git a/public/docs/_examples/attribute-directives/e2e-spec.ts b/public/docs/_examples/attribute-directives/e2e-spec.ts
index b15d85220f..79425d7923 100644
--- a/public/docs/_examples/attribute-directives/e2e-spec.ts
+++ b/public/docs/_examples/attribute-directives/e2e-spec.ts
@@ -1,4 +1,7 @@
-/// Attribute Directives
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
diff --git a/public/docs/_examples/attribute-directives/ts/plnkr.json b/public/docs/_examples/attribute-directives/ts/plnkr.json
index 7124dcb6a7..112e1de6f4 100644
--- a/public/docs/_examples/attribute-directives/ts/plnkr.json
+++ b/public/docs/_examples/attribute-directives/ts/plnkr.json
@@ -1,9 +1,10 @@
{
"description": "Attribute Directive",
+ "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
- "!app/*.[1,2].*"
+ "!app/*.[1,2,3].*"
],
"tags": ["attribute", "directive"]
-}
\ No newline at end of file
+}
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-a1-a2-quick-reference/e2e-spec.ts b/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
deleted file mode 100644
index f75a17ee6e..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-///
- -
-
-
-
-
-
-
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
deleted file mode 100644
index f2ca099297..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
-
-import { MovieListComponent } from './movie-list.component';
-import { MovieService } from './movie.service';
-import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
-
-@Component({
- selector: 'my-app',
- templateUrl: 'app/app.component.html',
- styleUrls: ['app/app.component.css'],
- directives: [MovieListComponent, ROUTER_DIRECTIVES],
- pipes: [StringSafeDatePipe],
- providers: [MovieService, ROUTER_PROVIDERS]
-})
-@RouteConfig([
- {path: '/movies', name: 'Movies', component: MovieListComponent, useAsDefault: true}
-])
-export class AppComponent {
-
- angularDocsUrl = 'https://angular.io/';
- colorPreference = 'red';
- eventType = '';
- isActive = true;
- isImportant = true;
- movie: IMovie = null;
- movies: IMovie[] = [];
- showImage = true;
- title: string = 'A1-A2 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-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts
deleted file mode 100644
index c04e64247d..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Injectable, Pipe } from '@angular/core';
-import { DatePipe } from '@angular/common';
-
-@Injectable()
-// #docregion date-pipe
-@Pipe({name: 'date', pure: true})
-export class StringSafeDatePipe extends DatePipe {
- 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-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
deleted file mode 100644
index 52b47899ef..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
deleted file mode 100644
index 99f0699410..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docplaster
-// #docregion import
-import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
-// #enddocregion import
-import { MovieService } from './movie.service';
-import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
-
-
-// #docregion component
-@Component({
- selector: 'movie-list',
- templateUrl:'app/movie-list.component.html',
-// #enddocregion component
-// #docregion style-url
- styleUrls: ['app/movie-list.component.css'],
-// #enddocregion style-url
-// #docregion date-pipe
- pipes: [StringSafeDatePipe]
-// #enddocregion date-pipe
-})
-// #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-a1-a2-quick-reference/ts/images/hero.png b/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/hero.png
deleted file mode 100644
index b60c3ecc30..0000000000
Binary files a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/hero.png and /dev/null differ
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/ng-logo.png b/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/ng-logo.png
deleted file mode 100644
index 7929242740..0000000000
Binary files a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/ng-logo.png and /dev/null differ
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/villain.png b/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/villain.png
deleted file mode 100644
index d1e71cf00b..0000000000
Binary files a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/villain.png and /dev/null differ
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
deleted file mode 100644
index ee2eb6fdec..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
- Angular 1 to Angular 2 Quick Reference
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading app...
-
-
-
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json b/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json
deleted file mode 100644
index 4f3ebce61d..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Angular 1 to Angular 2 Quick Reference",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1].*"
- ],
- "tags":["cookbook"]
-}
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-a1-a2-quick-reference/ts/example-config.json b/public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/example-config.json
rename to public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json
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-a1-a2-quick-reference/ts/app/app.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.css
similarity index 100%
rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css
rename to public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.css
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-a1-a2-quick-reference/ts/app/movie-list.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
similarity index 100%
rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css
rename to public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
similarity index 96%
rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html
rename to public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
index 91f7f416cd..9de98806d7 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
@@ -10,10 +10,10 @@ 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
index fc2566662d..d78e0784d9 100644
--- a/public/docs/_examples/cb-component-communication/e2e-spec.ts
+++ b/public/docs/_examples/cb-component-communication/e2e-spec.ts
@@ -1,4 +1,7 @@
-/// ';
-
- @Input()
- set name(name: string) {
- this._name = (name && name.trim()) || '';
- }
-
- get name() { return this._name; }
-}
-// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
deleted file mode 100644
index aa7382503a..0000000000
--- a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { NameChildComponent } from './name-child.component';
-
-@Component({
- selector: 'name-parent',
- template: `
-
-
- `,
- directives: [NameChildComponent]
-})
-export class NameParentComponent {
- // Displays 'Mr. IQ', '', 'Bombasto'
- names = ['Mr. IQ', ' ', ' Bombasto '];
-}
-// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
deleted file mode 100644
index 91f5d547f7..0000000000
--- a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/* tslint:disable:forin */
-// #docregion
-import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
-
-@Component({
- selector: 'version-child',
- template: `
- Passing information from parent to child
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
diff --git a/public/docs/_examples/cb-component-communication/ts/plnkr.json b/public/docs/_examples/cb-component-communication/ts/plnkr.json
index 3c83b2d0f9..03bd55cd1a 100644
--- a/public/docs/_examples/cb-component-communication/ts/plnkr.json
+++ b/public/docs/_examples/cb-component-communication/ts/plnkr.json
@@ -1,8 +1,9 @@
{
"description": "Component Communication Cookbook samples",
+ "basePath": "src/",
"files":[
- "!**/*.d.ts",
+ "!**/*.d.ts",
"!**/*.js"
],
"tags":["cookbook", "component"]
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.html b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.html
similarity index 100%
rename from public/docs/_examples/cb-component-communication/ts/app/app.component.html
rename to public/docs/_examples/cb-component-communication/ts/src/app/app.component.html
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/app/astronaut.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts
similarity index 85%
rename from public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
rename to public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts
index 7bda2b100f..bc24964f86 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/astronaut.component.ts
@@ -17,12 +17,12 @@ import { Subscription } from 'rxjs/Subscription';
`
})
-export class AstronautComponent implements OnDestroy{
+export class AstronautComponent implements OnDestroy {
@Input() astronaut: string;
- mission = "";
+ mission = '';
confirmed = false;
announced = false;
- subscription:Subscription;
+ subscription: Subscription;
constructor(private missionService: MissionService) {
this.subscription = missionService.missionAnnounced$.subscribe(
@@ -30,7 +30,7 @@ export class AstronautComponent implements OnDestroy{
this.mission = mission;
this.announced = true;
this.confirmed = false;
- })
+ });
}
confirm() {
@@ -38,9 +38,9 @@ export class AstronautComponent implements OnDestroy{
this.missionService.confirmMission(this.astronaut);
}
- ngOnDestroy(){
+ ngOnDestroy() {
// prevent memory leak when component destroyed
this.subscription.unsubscribe();
}
}
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts
similarity index 85%
rename from public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
rename to public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts
index 95425deef2..5bcf0645c9 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/countdown-parent.component.ts
@@ -11,7 +11,7 @@ import { CountdownTimerComponent } from './countdown-timer.component';
//// Local variable, #timer, version
// #docregion lv
@Component({
- selector:'countdown-parent-lv',
+ selector: 'countdown-parent-lv',
template: `
{{event}}
`,
- directives: [AstronautComponent],
providers: [MissionService]
})
export class MissionControlComponent {
- astronauts = ['Lovell', 'Swigert', 'Haise']
+ astronauts = ['Lovell', 'Swigert', 'Haise'];
history: string[] = [];
missions = ['Fly to the moon!',
'Fly to mars!',
@@ -32,7 +30,7 @@ export class MissionControlComponent {
missionService.missionConfirmed$.subscribe(
astronaut => {
this.history.push(`${astronaut} confirmed the mission`);
- })
+ });
}
announce() {
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/name-child.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/name-child.component.ts
new file mode 100644
index 0000000000..bc6d3c6f59
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/name-child.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'name-child',
+ 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){
+ vote(agreed: boolean) {
this.onVoted.emit(agreed);
this.voted = true;
}
}
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts
similarity index 78%
rename from public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
rename to public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts
index 3e2970b691..87f06161f5 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/votetaker.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { VoterComponent } from './voter.component';
-
@Component({
selector: 'vote-taker',
template: `
@@ -12,13 +10,12 @@ import { VoterComponent } from './voter.component';
[name]="voter"
(onVoted)="onVoted($event)">
- `,
- directives: [VoterComponent]
+ `
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
- voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']
+ voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
diff --git a/public/docs/_examples/cb-component-communication/ts/demo.css b/public/docs/_examples/cb-component-communication/ts/src/demo.css
similarity index 100%
rename from public/docs/_examples/cb-component-communication/ts/demo.css
rename to public/docs/_examples/cb-component-communication/ts/src/demo.css
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-component-relative-paths/e2e-spec.ts b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
deleted file mode 100644
index e39dfdb8a9..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/// element');
- });
-
- it('should display the absolute path text', function () {
- expect(page.absComp.getText()).toContain('Absolute');
- });
-
- it('should display the component-relative path text', function () {
- expect(page.relComp.getText()).toContain('Component-relative');
- });
-});
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/app.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/app.component.ts
deleted file mode 100644
index 09ccc94591..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/app/app.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { SomeAbsoluteComponent, SomeRelativeComponent} from './some.component';
-
-@Component({
-selector: 'my-app',
-template:
- `
- Component-Relative Paths
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading app...
-
-
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json b/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
deleted file mode 100644
index a4c33bbde3..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Module-relative Paths",
- "files": [
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags": [ "cookbook" ]
-}
diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
index 29a8822110..8c9d163d5e 100644
--- a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
@@ -1,4 +1,7 @@
-///
-
- `,
- // #enddocregion template
- directives:[HeroBioComponent, HeroContactComponent],
- // #docregion class-provider
- providers: [HeroService]
- // #enddocregion class-provider
-})
-export class HeroBiosAndContactsComponent{
- constructor(logger: LoggerService) {
- logger.logInfo('Creating HeroBiosAndContactsComponent');
- }
-}
-// #enddocregion hero-bios-and-contacts
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
deleted file mode 100644
index c8e6104666..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #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/app/hero-data.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts
deleted file mode 100644
index decccdbf72..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #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/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
deleted file mode 100644
index c5bafca36d..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/* tslint:disable:one-line:check-open-brace*/
-// #docplaster
-// #docregion opaque-token
-import { OpaqueToken } from '@angular/core';
-
-export const TITLE = new OpaqueToken('title');
-// #enddocregion opaque-token
-
-// #docregion hero-of-the-month
-import { Component, Inject } from '@angular/core';
-
-import { DateLoggerService,
- MinimalLogger } from './date-logger.service';
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-import { LoggerService } from './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
-
-const template = `
- = [
- 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.filter(hero => hero.id === id)[0];
- }
-
- getAllHeroes():Array{
- return this.heroes;
- }
-}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts
deleted file mode 100644
index 51ce8ebbff..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-export class Hero{
- constructor(
- public id: number,
- public name:string,
- public description?:string,
- public phone?:string) {
- }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
deleted file mode 100644
index 69bd1a1577..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// #docplaster
-// #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
-
-@Directive({
- selector: '[myHighlight]',
- host: {
- '(mouseenter)': 'onMouseEnter()',
- '(mouseleave)': 'onMouseLeave()'
- }
-})
-export class HighlightDirective {
-
- @Input('myHighlight') highlightColor: string;
-
- private el: HTMLElement;
-
- constructor(el: ElementRef) {
- this.el = el.nativeElement;
- }
-
- onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
- onMouseLeave() { this.highlight(null); }
-
- private highlight(color: string) {
- this.el.style.backgroundColor = color;
- }
-}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
deleted file mode 100644
index fd4646a055..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { XHRBackend } from '@angular/http';
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
-import { LocationStrategy,
- HashLocationStrategy } from '@angular/common';
-
-import { HeroData } from './hero-data';
-import { InMemoryBackendService,
- SEED_DATA } from 'angular2-in-memory-web-api';
-
-import { AppComponent } from './app.component';
-
-// #docregion bootstrap
-bootstrap(AppComponent, [
- ROUTER_PROVIDERS,
- { provide: LocationStrategy, useClass: HashLocationStrategy },
-
- { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
- { provide: SEED_DATA, useClass: HeroData } // in-mem server data
-]).catch((err: any) => console.error(err));
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
deleted file mode 100644
index d4ca4fda2a..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #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/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
deleted file mode 100644
index ba1d2761e1..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Dependency Injection
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading app...
-
-
-
diff --git a/public/docs/_examples/cb-dependency-injection/ts/plnkr.json b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
index d20b01cf1d..ff0aedca01 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
+++ b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
@@ -1,9 +1,10 @@
{
"description": "Dependency Injection",
+ "basePath": "src/",
"files":[
- "!**/*.d.ts",
+ "!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
],
"tags":["cookbook"]
-}
\ No newline at end of file
+}
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/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.html
similarity index 100%
rename from public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.html
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/app/hero-bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts
similarity index 77%
rename from public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts
index b4d122bfe4..84f8e05e66 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts
@@ -1,14 +1,13 @@
// #docregion
import { Component, Input, OnInit } from '@angular/core';
-import { Hero } from './hero';
import { HeroCacheService } from './hero-cache.service';
// #docregion component
@Component({
- selector:'hero-bio',
+ selector: 'hero-bio',
// #docregion template
- template:`
+ template: `
+
+ `,
+ // #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/app/hero-contact.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts
similarity index 88%
rename from public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts
index a91f01b104..add6df91c5 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts
@@ -1,14 +1,14 @@
// #docplaster
// #docregion
-import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
+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:`
+ 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/app/logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/logger.service.ts
similarity index 100%
rename from public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/logger.service.ts
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/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts
similarity index 87%
rename from public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
rename to public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts
index 045ce8c545..c6f208f79b 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts
@@ -1,8 +1,8 @@
-/* tslint:disable:no-unused-variable */
-/* tslint:disable:one-line:check-open-brace*/
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
// #docplaster
// #docregion
-import { Component, forwardRef, Optional, provide, SkipSelf } from '@angular/core';
+import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
// A component base class (see AlexComponent)
export abstract class Base { name = 'Count Basie'; }
@@ -23,7 +23,7 @@ const provideParent =
// #enddocregion provide-parent, provide-the-parent
// #docregion provide-parent
(component: any, parentType?: any) => {
- return { provide: parentType || Parent, useExisting: forwardRef(() => component) }
+ return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
};
// #enddocregion provide-parent
@@ -31,7 +31,7 @@ const provideParent =
const provideTheParent =
// #docregion provide-the-parent
(component: any) => {
- return { provide: Parent, useExisting: forwardRef(() => component) }
+ return { provide: Parent, useExisting: forwardRef(() => component) };
};
// #enddocregion provide-the-parent
@@ -85,13 +85,6 @@ export class CraigComponent {
}
// #enddocregion craig
-// #docregion C_DIRECTIVES
-const C_DIRECTIVES = [
- CarolComponent, ChrisComponent, CraigComponent,
- forwardRef(() => CathyComponent)
-];
-// #enddocregion C_DIRECTIVES
-
//////// B - Parent /////////
// #docregion barry
const templateB = `
@@ -107,7 +100,6 @@ const templateB = `
@Component({
selector: 'barry',
template: templateB,
- directives: C_DIRECTIVES,
providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
})
export class BarryComponent implements Parent {
@@ -121,7 +113,6 @@ export class BarryComponent implements Parent {
@Component({
selector: 'bob',
template: templateB,
- directives: C_DIRECTIVES,
providers: [ provideParent(BobComponent) ]
})
export class BobComponent implements Parent {
@@ -132,7 +123,6 @@ export class BobComponent implements Parent {
@Component({
selector: 'beth',
template: templateB,
- directives: C_DIRECTIVES,
// #docregion beth-providers
providers: [ provideParent(BethComponent, DifferentParent) ]
// #enddocregion beth-providers
@@ -142,8 +132,6 @@ export class BethComponent implements Parent {
constructor( @SkipSelf() @Optional() public parent: Parent ) { }
}
-const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
-
///////// A - Grandparent //////
// #docregion alex, alex-1
@@ -161,7 +149,6 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
// #enddocregion alex-providers
// #docregion alex-1
- directives: C_DIRECTIVES
})
// #enddocregion alex-1
// Todo: Add `... implements Parent` to class signature
@@ -187,7 +174,6 @@ export class AlexComponent extends Base
`,
- directives: [ B_DIRECTIVES, C_DIRECTIVES ],
// #docregion alice-providers
providers: [ provideParent(AliceComponent) ]
// #enddocregion alice-providers
@@ -224,7 +210,6 @@ export class CathyComponent {
template: `
-
{{hero.name}} Detail
-Id: {{hero.id}}
-Name:
-
-
-
-
-Power:
\ No newline at end of file
diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
deleted file mode 100644
index 579ef637b0..0000000000
--- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, Input} from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
- selector: 'hero-detail',
- templateUrl: 'app/hero-detail.component.html',
- directives: [HeroDetailComponent]
-})
-export class HeroDetailComponent {
- @Input() hero: Hero;
-}
diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.1.html b/public/docs/_examples/architecture/ts/app/hero-list.component.1.html
deleted file mode 100644
index d4d6b905fa..0000000000
--- a/public/docs/_examples/architecture/ts/app/hero-list.component.1.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-{{hero.name}}
-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' }}
-
- `,
-// #docregion providers
- providers: [SalesTaxService, TaxRateService]
-})
-// #enddocregion providers
-// #enddocregion metadata
-/*
-// #docregion metadata, providers
-export class SalesTaxComponent { ... }
-// #enddocregion metadata, providers
-*/
-// #docregion class
-export class SalesTaxComponent {
-// #docregion ctor
- constructor(private salesTaxService: SalesTaxService) { }
-// #enddocregion ctor
-
- getTax(value:string | number){
- return this.salesTaxService.getVAT(value);
- }
-}
-// #enddocregion class
diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts
deleted file mode 100644
index 813cb4c9c0..0000000000
--- a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Inject, Injectable } from '@angular/core';
-
-import { TaxRateService } from './tax-rate.service';
-
-// #docregion class
-@Injectable()
-export class SalesTaxService {
- constructor(private rateService: TaxRateService) { }
- getVAT(value:string | number){
- let amount:number;
- if (typeof value === "string"){
- amount = parseFloat(value);
- } else {
- amount = value;
- }
- return (amount || 0) * this.rateService.getRate('VAT');
- }
-}
-// #enddocregion class
diff --git a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts b/public/docs/_examples/architecture/ts/app/tax-rate.service.ts
deleted file mode 100644
index baaa8f49c7..0000000000
--- a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-// #docregion class
-@Injectable()
-export class TaxRateService {
- getRate(rateName:string){return 0.10;} // always 10% everywhere
-}
-// #enddocregion class
diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
deleted file mode 100644
index e365c39f02..0000000000
--- a/public/docs/_examples/architecture/ts/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
- +
{{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
-Pick a highlight color
-
- Green
- Yellow
- Cyan
-
-
-Highlight me!
- - - - --Highlight me too! -
- - diff --git a/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html b/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html deleted file mode 100644 index e5ee1c6463..0000000000 --- a/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html +++ /dev/null @@ -1,7 +0,0 @@ - -My First Attribute Directive
-Highlight me!
- - -I am green with envy!
- diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart deleted file mode 100644 index e6190a443c..0000000000 --- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -// #docregion full -import 'package:angular2/core.dart'; - -@Directive(selector: '[myHighlight]', host: const { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' -}) -// #docregion class-1 -class HighlightDirective { - String _defaultColor = 'red'; - final dynamic _el; - - HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement; - // #enddocregion class-1 - - // #docregion defaultColor - @Input() set defaultColor(String colorName) { - _defaultColor = (colorName ?? _defaultColor); - } - // #enddocregion defaultColor - // #docregion class-1 - - // #docregion color - @Input('myHighlight') String highlightColor; - // #enddocregion color - - // #docregion mouse-enter - void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); } - // #enddocregion mouse-enter - void onMouseLeave() { _highlight(); } - - void _highlight([String color]) { - if(_el != null) _el.style.backgroundColor = color; - } -} -// #enddocregion class-1 -// #enddocregion full -/* -// #docregion highlight -@Input() String myHighlight; -// #enddocregion highlight -*/ diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart deleted file mode 100644 index 2ce0e35919..0000000000 --- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -library attribute_directives.highlight_directive; - -import 'package:angular2/core.dart'; - -@Directive(selector: '[myHighlight]') -class HighlightDirective { - HighlightDirective(ElementRef element) { - element.nativeElement.style.backgroundColor = 'yellow'; - } -} diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart deleted file mode 100644 index 8546f36279..0000000000 --- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart +++ /dev/null @@ -1,28 +0,0 @@ -// #docregion -import 'package:angular2/core.dart'; - -@Directive(selector: '[myHighlight]', - // #docregion host - host: const { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' - } - // #enddocregion host -) -class HighlightDirective { - // #docregion ctor - final dynamic _el; - - HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement; - // #enddocregion ctor - - // #docregion mouse-methods - void onMouseEnter() { _highlight("yellow"); } - void onMouseLeave() { _highlight(); } - - void _highlight([String color]) { - if (_el != null) _el.style.backgroundColor = color; - } - // #enddocregion mouse-methods -} -// #enddocregion diff --git a/public/docs/_examples/attribute-directives/dart/pubspec.yaml b/public/docs/_examples/attribute-directives/dart/pubspec.yaml deleted file mode 100644 index 0472ac2166..0000000000 --- a/public/docs/_examples/attribute-directives/dart/pubspec.yaml +++ /dev/null @@ -1,15 +0,0 @@ -# #docregion -name: attribute_directives -description: Attribute directives example -version: 0.0.1 -environment: - sdk: '>=1.13.0 <2.0.0' -dependencies: - angular2: 2.0.0-beta.17 - browser: ^0.10.0 - dart_to_js_script_rewriter: ^1.0.1 -transformers: -- angular2: - platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES' - entry_points: web/main.dart -- dart_to_js_script_rewriter diff --git a/public/docs/_examples/attribute-directives/dart/web/index.html b/public/docs/_examples/attribute-directives/dart/web/index.html deleted file mode 100644 index ad852ad9eb..0000000000 --- a/public/docs/_examples/attribute-directives/dart/web/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - -My First Attribute Directive
-Highlight me!
- - -I am green with envy!
- diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.html b/public/docs/_examples/attribute-directives/ts/app/app.component.html deleted file mode 100644 index e4e445b1a8..0000000000 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.html +++ /dev/null @@ -1,20 +0,0 @@ - - -My First Attribute Directive
-Pick a highlight color
-
- Green
- Yellow
- Cyan
-
-
-Highlight me!
- - - - -- Highlight me too! -
- - diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts deleted file mode 100644 index 15167310c6..0000000000 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { HighlightDirective } from './highlight.directive'; - -@Component({ - selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [HighlightDirective] -}) - -export class AppComponent { } - -// #enddocregion \ No newline at end of file diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts deleted file mode 100644 index 8e64391f05..0000000000 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts +++ /dev/null @@ -1,31 +0,0 @@ -// #docregion -import { Directive, ElementRef, Input } from '@angular/core'; - -@Directive({ - selector: '[myHighlight]', - // #docregion host - host: { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' - } - // #enddocregion host -}) - -export class HighlightDirective { - - // #docregion ctor - private el:HTMLElement; - constructor(el: ElementRef) { this.el = el.nativeElement; } - // #enddocregion ctor - - // #docregion mouse-methods - onMouseEnter() { this.highlight("yellow"); } - onMouseLeave() { this.highlight(null); } - - private highlight(color: string) { - this.el.style.backgroundColor = color; - } - // #enddocregion mouse-methods - -} -// #enddocregion diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts deleted file mode 100644 index 6ec9842602..0000000000 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docplaster -// #docregion full -import { Directive, ElementRef, Input } from '@angular/core'; - -@Directive({ - selector: '[myHighlight]', - host: { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' - } -}) -// #docregion class-1 -export class HighlightDirective { - private _defaultColor = 'red'; - private el: HTMLElement; - - constructor(el: ElementRef) { this.el = el.nativeElement; } - // #enddocregion class-1 - - // #docregion defaultColor - @Input() set defaultColor(colorName:string){ - this._defaultColor = colorName || this._defaultColor; - } - // #enddocregion defaultColor - // #docregion class-1 - - // #docregion color - @Input('myHighlight') highlightColor: string; - // #enddocregion color - - // #docregion mouse-enter - onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); } - // #enddocregion mouse-enter - onMouseLeave() { this.highlight(null); } - - private highlight(color:string) { - this.el.style.backgroundColor = color; - } -} -// #enddocregion class-1 -// #enddocregion full -/* -// #docregion highlight -@Input() myHighlight: string; -// #enddocregion highlight -*/ diff --git a/public/docs/_examples/attribute-directives/ts/app/main.ts b/public/docs/_examples/attribute-directives/ts/app/main.ts deleted file mode 100644 index 4fc79adda1..0000000000 --- a/public/docs/_examples/attribute-directives/ts/app/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; - -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); - diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html deleted file mode 100644 index 197f1a8280..0000000000 --- a/public/docs/_examples/attribute-directives/ts/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - -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/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts similarity index 86% rename from public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts rename to public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts index f8c1a95ea1..4cacc0d22e 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts +++ b/public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.1.ts @@ -1,3 +1,4 @@ +/* tslint:disable:no-unused-variable */ // #docregion import { Directive, ElementRef, Input } from '@angular/core'; 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'}} | - - -
{{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
-+
Excellent choice!
-+
No movie, sorry!
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-a1-a2-quick-reference/ts/app/movie.service.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie.ts 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 @@ + + +
+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 @@
+
+
+
+
+ "{{name}}"
- ` -}) -export class NameChildComponent { - _name: string = 'Master controls {{names.length}} names
-Version {{major}}.{{minor}}
-Change log:
--
-
- {{change}} -
Countdown to Liftoff (via local variable)
@@ -19,7 +19,6 @@ import { CountdownTimerComponent } from './countdown-timer.component';{{timer.seconds}}
Countdown to Liftoff (via ViewChild)
@@ -36,13 +35,12 @@ export class CountdownLocalVarParentComponent { }{{ seconds() }}
"{{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}} +
Absolute & Component-Relative Paths
-
- {{type}}
{{path}} -
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts
deleted file mode 100644
index 2bd56c6930..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-///////// Using Absolute Paths ///////
-
-// #docregion absolute-config
-@Component({
- selector: 'absolute-path',
- templateUrl: 'app/some.component.html',
- styleUrls: ['app/some.component.css']
-})
-// #enddocregion absolute-config
-export class SomeAbsoluteComponent {
- class = 'absolute';
- type = 'Absolute template & style URLs';
- path = 'app/path.component.html';
-}
-
-///////// Using Relative Paths ///////
-
-// #docregion relative-config
-@Component({
- // #docregion module-id
- moduleId: module.id,
- // #enddocregion module-id
- selector: 'relative-path',
- templateUrl: 'some.component.html',
- styleUrls: ['some.component.css']
-})
-// #enddocregion relative-config
-
-export class SomeRelativeComponent {
- class = 'relative';
- type = 'Component-relative template & style URLs';
- path = 'path.component.html';
-
-}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/index.html b/public/docs/_examples/cb-component-relative-paths/ts/index.html
deleted file mode 100644
index cc0d972df2..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
- {{path}} -
{{title}}
-Winner: {{heroOfTheMonth.name}}
- Reason for award: {{heroOfTheMonth.description}}
- Runners-up: {{runnersUp}}
-
- Logs:
-
-
- `;
-
-// #docregion hero-of-the-month
-@Component({
- selector: 'hero-of-the-month',
- template: template,
- providers: [
- // #docregion use-value
- { provide: Hero, useValue: someHero },
- // #docregion provide-opaque-token
- { provide: TITLE, useValue: 'Hero of the Month' },
- // #enddocregion provide-opaque-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-opaque-token, use-factory
- { provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] }
- // #enddocregion provide-opaque-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/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
deleted file mode 100644
index 0222f6cd32..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Hero } from './hero';
-
-@Injectable()
-export class HeroService {
-
- //TODO move to database
- private heroes:Array{{log}}
- {{hero.name}}
Phone #: {{phoneNumber}}
!!!
`
})
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}}
+Parent Finder
+
+ `
+})
+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! +
-
- `,
- directives: [DynamicForm],
- providers: [QuestionService]
-})
-export class AppComponent {
- questions:any[]
-
- constructor(service: QuestionService) {
- this.questions = service.getQuestions();
- }
-}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.html b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.html
deleted file mode 100644
index ceb2f41177..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-Job Application for Heroes
-
-
-
-
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
deleted file mode 100644
index d039931f61..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-import { ControlGroup } from '@angular/common';
-
-import { QuestionBase } from './question-base';
-
-@Component({
- selector:'df-question',
- templateUrl:'app/dynamic-form-question.component.html'
-})
-export class DynamicFormQuestionComponent {
- @Input() question:QuestionBase
-
-
-
-
-
-
-
- {{question.label}} is required
-
+
+ `,
+ 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
+
-