Merge remote-tracking branch 'origin/master'
# Conflicts: # public/_data.json # public/_includes/_footer.jade # public/_includes/_hero-home.jade # public/_includes/_main-nav.jade # public/docs/_includes/_side-nav.jade # public/docs/ts/latest/_data.json # public/docs/ts/latest/cookbook/_data.json # public/docs/ts/latest/glossary.jade # public/docs/ts/latest/guide/_data.json # public/docs/ts/latest/guide/architecture.jade # public/docs/ts/latest/guide/displaying-data.jade # public/docs/ts/latest/guide/forms.jade # public/docs/ts/latest/guide/user-input.jade # public/docs/ts/latest/index.jade # public/docs/ts/latest/quickstart.jade # public/docs/ts/latest/tutorial/toh-pt2.jade # public/docs/ts/latest/tutorial/toh-pt5.jade # public/features.jade # public/index.jade
This commit is contained in:
Zhicheng Wang
commit
583247f0f9
18
gulpfile.js
18
gulpfile.js
|
|
@ -25,6 +25,8 @@ var globby = require("globby");
|
|||
var treeKill = require("tree-kill");
|
||||
var blc = require("broken-link-checker");
|
||||
|
||||
var tslint = require('gulp-tslint');
|
||||
|
||||
// TODO:
|
||||
// 1. Think about using runSequence
|
||||
// 2. Think about using spawn instead of exec in case of long error messages.
|
||||
|
|
@ -45,6 +47,7 @@ var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZip
|
|||
var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder'));
|
||||
var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
|
||||
|
||||
|
||||
var _devguideShredOptions = {
|
||||
examplesDir: path.join(DOCS_PATH, '_examples'),
|
||||
fragmentsDir: path.join(DOCS_PATH, '_fragments'),
|
||||
|
|
@ -74,6 +77,7 @@ var _exampleBoilerplateFiles = [
|
|||
'karma-test-shim.js',
|
||||
'package.json',
|
||||
'styles.css',
|
||||
'systemjs.config.js',
|
||||
'tsconfig.json',
|
||||
'tslint.json',
|
||||
'typings.json',
|
||||
|
|
@ -498,6 +502,20 @@ gulp.task('_zip-examples', function() {
|
|||
});
|
||||
|
||||
|
||||
// Linting
|
||||
|
||||
gulp.task('lint', function() {
|
||||
return gulp.src(['./public/docs/_examples/style-guide/ts/**/*.ts', '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts'])
|
||||
.pipe(tslint({
|
||||
rulesDirectory: ['node_modules/codelyzer'],
|
||||
configuration: require('./tslint.json')
|
||||
}))
|
||||
.pipe(tslint.report('prose', {
|
||||
summarizeFailureOutput: true
|
||||
}));
|
||||
});
|
||||
|
||||
|
||||
// Helper functions
|
||||
|
||||
function harpCompile() {
|
||||
|
|
|
|||
|
|
@ -286,7 +286,13 @@
|
|||
"bio": "Chuck is a Software Engineer on the Angular team at Google. He is a programming language geek, UI framework and component library veteran, and has a passion for simplifying the task of programming. Before Google, he worked at Microsoft and Borland.",
|
||||
"type": "Google"
|
||||
},
|
||||
|
||||
"stephenfluin": {
|
||||
"name": "Stephen Fluin",
|
||||
"picture": "/resources/images/bios/stephenfluin.jpg",
|
||||
"twitter": "stephenfluin",
|
||||
"bio": "Stephen is a Developer Advocate working on the Angular team. Before joining Google, he was a Google Expert. Stephen loves to help enterprises use technology more effectively.",
|
||||
"type": "Google"
|
||||
},
|
||||
"pawel": {
|
||||
"name": "Pawel Kozlowski",
|
||||
"picture": "/resources/images/bios/pawel.jpg",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
"harp": "harp",
|
||||
"live-server": "live-server",
|
||||
"test-api-builder": "jasmine-node tools/api-builder",
|
||||
|
||||
"protractor": "protractor"
|
||||
},
|
||||
"repository": {
|
||||
|
|
@ -28,10 +27,11 @@
|
|||
"devDependencies": {
|
||||
"archiver": "^0.16.0",
|
||||
"assert-plus": "^0.1.5",
|
||||
"broken-link-checker":"0.7.0",
|
||||
"broken-link-checker": "0.7.0",
|
||||
"browser-sync": "^2.9.3",
|
||||
"canonical-path": "0.0.2",
|
||||
"cross-spawn": "^2.1.0",
|
||||
"codelyzer": "0.0.18",
|
||||
"del": "^1.2.0",
|
||||
"dgeni": "^0.4.0",
|
||||
"dgeni-packages": "^0.11.1",
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
"gulp": "^3.5.6",
|
||||
"gulp-env": "0.4.0",
|
||||
"gulp-task-listing": "^1.0.1",
|
||||
"gulp-tslint": "^4.3.5",
|
||||
"gulp-util": "^3.0.6",
|
||||
"gulp-watch": "^4.3.4",
|
||||
"harp": "^0.20.3",
|
||||
|
|
@ -66,6 +67,7 @@
|
|||
"protractor": "^3.0.0",
|
||||
"q": "^1.4.1",
|
||||
"tree-kill": "^1.0.0",
|
||||
"tslint": "^3.2.2",
|
||||
"typescript": "1.7.3",
|
||||
"yargs": "^3.23.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
},
|
||||
|
||||
"features": {
|
||||
"title": "特性与优点",
|
||||
"subtitle": "开发应用程序的强力特性"
|
||||
"title": "特性与优点"
|
||||
},
|
||||
|
||||
"contribute": {
|
||||
|
|
@ -17,8 +16,7 @@
|
|||
},
|
||||
|
||||
"news": {
|
||||
"title": "新闻",
|
||||
"subtitle": "看看我们正在做什么"
|
||||
"title": "新闻"
|
||||
},
|
||||
|
||||
"events": {
|
||||
|
|
@ -29,5 +27,29 @@
|
|||
"support": {
|
||||
"title": "支持",
|
||||
"subtitle": "从Angular社区获得支持"
|
||||
},
|
||||
|
||||
"presskit": {
|
||||
"title": "出版工具"
|
||||
},
|
||||
|
||||
"books": {
|
||||
"title": "书籍"
|
||||
},
|
||||
|
||||
"training": {
|
||||
"title": "培训"
|
||||
},
|
||||
|
||||
"communities": {
|
||||
"title": "社区"
|
||||
},
|
||||
|
||||
"tooling": {
|
||||
"title": "工具与库"
|
||||
},
|
||||
|
||||
"all-resources": {
|
||||
"title": "资源"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,46 +8,42 @@ else
|
|||
- var styleguide = "/docs/ts/latest/styleguide.html"
|
||||
|
||||
.main-footer
|
||||
nav.background-silver.grid-fluid
|
||||
nav.background-blue-grey-900.grid-fluid
|
||||
|
||||
.c3.main-footer-branding
|
||||
.logo-inverse-large
|
||||
|
||||
.c2
|
||||
h3.text-headline 库
|
||||
.c3
|
||||
h3.text-headline 资源
|
||||
|
||||
ul.text-body
|
||||
li <a href="/"> Angular 2.0</a>
|
||||
li <a href="https://angularjs.org/"> Angular 1 for JS</a>
|
||||
li <a href="https://material.angularjs.org"> Angular Material</a>
|
||||
li <a href="https://www.firebase.com/docs/web/libraries/angular/"> AngularFire</a>
|
||||
// TODO: (ericjim) make a libraries page to showcase all angular 2 libraries
|
||||
//li <a href="/libraries.html">Libraries</a>
|
||||
li <a href="/about/">关于</a>
|
||||
li <a href="/resources/">书籍与培训</a>
|
||||
li <a href="/resources/">工具与库</a>
|
||||
li <a href="/resources/">社区</a>
|
||||
li <a href="/presskit.html">出版工具</a>
|
||||
|
||||
.c2
|
||||
h3.text-headline 学习资源
|
||||
|
||||
ul.text-body
|
||||
li <a href="/docs/ts/latest/quickstart.html"> 5分钟快速开始 </a>
|
||||
li <a href="/docs/ts/latest/guide/"> 单步指南 </a>
|
||||
li <a href="/docs/ts/latest/api/"> 全部API</a>
|
||||
li <a href="/docs/ts/latest/resources.html"> 资源 </a>
|
||||
li <a href="http://goo.gl/sj0Nk1">设计文档 & 记录</a>
|
||||
|
||||
.c2
|
||||
.c3
|
||||
h3.text-headline 帮助
|
||||
|
||||
ul.text-body
|
||||
li <a href="http://stackoverflow.com/questions/tagged/angular2">Stack Overflow</a>
|
||||
li <a href="https://gitter.im/angular/angular">Gitter</a>
|
||||
li <a href="https://groups.google.com/forum/#!forum/angular"> Google Group</a>
|
||||
li <a href="https://gitter.im/angular/angular"> 聊天室 </a>
|
||||
li <a href="https://github.com/angular/angular/issues"> 报告BUG </a>
|
||||
li <a href="https://github.com/angular/angular/issues"> 报告问题 </a>
|
||||
li <a class="footer-feedback" ng-click="appCtrl.openFeedback()" aria-label="Submit feedback on this page"> 站内反馈 </a>
|
||||
|
||||
.c3
|
||||
h3.text-headline 社区
|
||||
|
||||
ul.text-body
|
||||
li <a href="https://blog.angularjs.org/">官方博客</a>
|
||||
li <a href="https://plus.sandbox.google.com/+AngularJS/posts"> Google+</a>
|
||||
li <a href="/events.html">Events</a>
|
||||
li <a href="http://www.meetup.com/topics/angularjs/">Meetups</a>
|
||||
li <a href="https://twitter.com/angularjs"> Twitter</a>
|
||||
li <a href="https://github.com/angular/angular"> GitHub</a>
|
||||
li <a href="/contribute.html"> Contribute</a>
|
||||
|
||||
|
||||
footer(class="background-steel")
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@ header(class="background-sky")
|
|||
h1.text-headline.hero-logo #{title}<br>#{subtitle}
|
||||
|
||||
.hero-cta
|
||||
a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain"
|
||||
md-button) 现在开始！
|
||||
a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
|
||||
|
||||
.banner.is-centered
|
||||
.banner.banner-floaty
|
||||
.banner-ng-annoucement
|
||||
h4 Angular的挑战赛 — 一次48小时的线上黑客马拉松就在2016年5月14~15日。
|
||||
a(href="https://www.angularattack.com/" target="_blank") 立即注册
|
||||
div(class="banner-text")
|
||||
p Watch the ng-conf Live Stream May 4th-6th.
|
||||
p 观看 ng-conf 实时视频 May 4th-6th.
|
||||
div(class="banner-button")
|
||||
a(href="https://www.ng-conf.org/#/extended" target="_blank" class="button md-button") View Live Stream
|
||||
a(href="https://www.ng-conf.org/#/extended" target="_blank" class="button md-button") 查看实时视频
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ if current.path[4] && current.path[3] == 'api'
|
|||
- var textFormat = 'is-standard-case'
|
||||
|
||||
header(class="hero background-sky")
|
||||
h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
|
||||
if useBadges
|
||||
div(class="inner-header")
|
||||
h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
|
||||
if useBadges
|
||||
span(class="badges")
|
||||
if docType
|
||||
span(class="status-badge").
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off
|
|||
ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
|
||||
li.l-left <a class="main-nav-button" href="/features.html" md-button>特性</a>
|
||||
li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>文档</a>
|
||||
li.l-left <a class="main-nav-button" href="/about/" md-button>关于</a>
|
||||
li.l-left <a class="main-nav-button" href="/contribute.html" md-button>贡献</a>
|
||||
li.l-left <a class="main-nav-button" href="/support.html" md-button>支持</a>
|
||||
li.l-left <a class="main-nav-button" href="/news.html" md-button>新闻</a>
|
||||
li.l-left <a class="main-nav-button" href="/events.html" md-button>事件</a>
|
||||
li.l-right.feedback-button <md-button ng-click="appCtrl.openFeedback()" class="md-icon-button top-nav-icon" aria-label="提交关于本页面的反馈"><span class="material-icons">feedback</span></md-button>
|
||||
li.l-left <a class="main-nav-button" href="/news.html" md-button>新闻</a>
|
||||
li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>立即开始！</a>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,20 @@ mixin includeShared(filePath, region)
|
|||
- var newPath = translatePath(filePath, region);
|
||||
!=partial(newPath)
|
||||
|
||||
mixin makeExample(filePath, region, title, stylePatterns)
|
||||
mixin makeExample(_filePath, region, _title, stylePatterns)
|
||||
- var filePath = adjustExamplePath ? adjustExamplePath(_filePath) : _filePath;
|
||||
- var title = adjustExampleTitle ? adjustExampleTitle(_title) : _title;
|
||||
- var language = attributes.language || getExtn(filePath);
|
||||
- var frag = getFrag(filePath, region);
|
||||
- var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
|
||||
- var format = attributes.format || defaultFormat;
|
||||
- var avoid = !!attributes.avoid;
|
||||
|
||||
if (title)
|
||||
.example-title #{title}
|
||||
if (avoid)
|
||||
.example-title.avoid AVOID: #{title}
|
||||
else
|
||||
.example-title #{title}
|
||||
code-example(language="#{language}" format="#{format}")
|
||||
!= styleString(frag, stylePatterns)
|
||||
|
||||
|
|
@ -37,9 +44,13 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
|
|||
- var frag = getFrag(filePath, '');
|
||||
- var json = unescapeHtml(frag);
|
||||
- var jsonExtract = extractJson(json, jsonConfig);
|
||||
- var avoid = !!attributes.avoid;
|
||||
|
||||
if (title)
|
||||
.example-title #{title}
|
||||
if (avoid)
|
||||
.example-title.avoid #{title}
|
||||
else
|
||||
.example-title #{title}
|
||||
code-example(language="#{language}" format="#{format}")
|
||||
if (jsonExtract == 'ERROR')
|
||||
err 错误: 无法通过配置"#{jsonConfig.toString()}"解析JSON
|
||||
|
|
|
|||
|
|
@ -0,0 +1,200 @@
|
|||
div
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
div(style="display: flex; justify-content: space-between; flex-wrap: wrap;")
|
||||
div
|
||||
h1 Books
|
||||
div(class="resources")
|
||||
h3 Packt Publishing
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/switching-angular-2") Switching to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Mastering Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-blueprints") Angular 2 Blueprints
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-example") Angular 2 By Examples
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/learning-angular-2-net-developers") Learning Angular 2 for .NET Developers
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-test-driven-development") Angular 2 Test-driven Development
|
||||
|
||||
h3 Manning Publications
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-in-action") Angular 2 In Action
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-development-with-typescript") Angular 2 Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/testing-angular-2-applications") Testing Angular 2 Applications
|
||||
|
||||
h3 O'Reilly Media
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://www.oreilly.com/pub/e/3693") Angular 2 Web Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/0636920051824.do") Migrating to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/9781785886201.do") Switching to Angular 2
|
||||
|
||||
h3 Self-published
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://ngcourse.rangle.io/") Rangle.io: ngCourse 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.ng-book.com/2/") ng-book 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/angular2-book") Angular 2 Book
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://books.ninja-squad.com/angular2") Become a ninja with Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/practical-angular-2") Practical Angular 2
|
||||
|
||||
div
|
||||
h1 Training
|
||||
div(class="resources")
|
||||
h3 Rangle.io
|
||||
ul(class="publisher")
|
||||
li(class="course")
|
||||
a(class="title text-body" href="http://rangle.io/services/javascript-training/training-angular1-angular2-with-ngupgrade/") Angular 2 Online Training
|
||||
|
||||
h3 Pluralsight
|
||||
ul(class="publisher")
|
||||
li(class="course")
|
||||
a(class="title text-body" href="https://www.pluralsight.com/courses/angular-2-first-look") Angular 2: First Look
|
||||
li(class="course")
|
||||
a(class="title text-body" href="https://www.pluralsight.com/courses/angular-2-getting-started") Angular 2: Getting Started
|
||||
|
||||
h3 Udemy
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/the-complete-guide-to-angular-2/?utm_content=_._ag_angular%202_._ad_47395956109_._de_c_._dm__._lo_9061189_._&matchtype=b&gclid=CjwKEAjww9O3BRDp1tq0jIP023YSJAB0-j1S4bFN4tudrjzZO_-ABNAfFQJrhrKo7KX1AnV-8yjV-hoCRrDw_wcB&utm_medium=udemyads&k_clickid=dce13cd7-9844-44dc-9967-020275b637c9_408_GOOGLE_NEW-AW-PROS-TECH-Dev-angular-2-EN-ENG_._ci_756150_._sl_ENG_._vi_TECH_._sd_All_._la_EN_.__angular%202_%2Bangular%20%2B2_b_47395956109_c&utm_campaign=NEW-AW-PROS-TECH-Dev-angular-2-EN-ENG_._ci_756150_._sl_ENG_._vi_TECH_._sd_All_._la_EN_._&utm_source=adwords&utm_term=_._pl__._pd__._ti_kwd-68757357257_._kw_%2Bangular%20%2B2_._&pmtag=72bf13dc-329c-411c-b381-a6143735b9dc") The Complete Guide to Angular 2
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-tutorial-for-beginners/") Angular 2 With TypeScript for Beginners
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-tutorial-for-beginners/") Angular 2 Jumpstart with Typescript
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-fundamentals/") Angular 2 Fundamentals
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-master-class-with-alejandro-rangel/") Angular 2 Master Class
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/introduction-to-angular2/") Angular 2 Demystified
|
||||
|
||||
h3 egghead.io
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="https://egghead.io/technologies/angular2") Angular 2 videos
|
||||
|
||||
h3 Workshops & Onsite Training Vendors
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="http://rangle.io/services/javascript-training/angular2-training/") Rangle.io
|
||||
li
|
||||
a(class="title text-body" href="http://oasisdigital.com/training") Oasis Digital
|
||||
li
|
||||
a(class="title text-body" href="http://thoughtram.io/") Thoughtram
|
||||
|
||||
div
|
||||
h1 Tooling and Libraries
|
||||
div(class="resources")
|
||||
h3 Tooling
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://augury.rangle.io/") Augury
|
||||
li
|
||||
a(class="text-body" href="https://github.com/angular/universal") Angular Universal
|
||||
li
|
||||
a(class="text-body" href="https://github.com/johnpapa/lite-server") Lite-server
|
||||
li
|
||||
a(class="text-body" href="https://github.com/mgechev/codelyzer") Codelyzer
|
||||
|
||||
h3 IDEs
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="http://code.visualstudio.com/") Visual Studio Code
|
||||
li
|
||||
a(class="text-body" href="https://www.jetbrains.com/webstorm/") WebStorm
|
||||
li
|
||||
a(class="text-body" href="https://www.jetbrains.com/idea/") IntelliJ IDEA
|
||||
|
||||
h3 Data Libraries
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://www.firebase.com/") Firebase
|
||||
li
|
||||
a(class="text-body" href="https://www.meteor.com/") Meteor
|
||||
li
|
||||
a(class="text-body" href="http://mean.io/") MEAN
|
||||
|
||||
h3 UI Components
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://github.com/angular/material2") Angular Material 2
|
||||
li
|
||||
a(class="text-body" href="http://www.primefaces.org/primeng/") Prime Faces
|
||||
li
|
||||
a(class="text-body" href="http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more") Kendo UI
|
||||
li
|
||||
a(class="text-body" href="http://ng-lightning.github.io/ng-lightning/") ng-lightening
|
||||
li
|
||||
a(class="text-body" href="http://wijmo.com/products/wijmo-5/") Wijmo
|
||||
li
|
||||
a(class="text-body" href="https://angular-ui.github.io/bootstrap/") Bootstrap UI
|
||||
li
|
||||
a(class="text-body" href="https://vaadin.com/home") Vaadin
|
||||
|
||||
h3 Cross-Platform Development
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://github.com/NativeScript/nativescript-angular") NativeScript
|
||||
li
|
||||
a(class="text-body" href="http://angular.github.io/react-native-renderer/") React Native
|
||||
li
|
||||
a(class="text-body" href="http://ionicframework.com/docs/v2/") Ionic
|
||||
li
|
||||
a(class="text-body" href="http://github.com/angular/angular-electron") Electron
|
||||
li
|
||||
a(class="text-body" href="http://github.com/preboot/angular2-universal-windows-app") Windows (UWP)
|
||||
|
||||
div
|
||||
h1 Communities
|
||||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Podcasts
|
||||
ul(class="podcasts")
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://angularair.com/") AngularAir
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://javascriptair.com/") JavaScript Air
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://devchat.tv/adventures-in-angular") Adventures in Angular
|
||||
|
||||
|
||||
h3 Communities
|
||||
ul(class="communities")
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularbeers.org/") Angular Beers
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularcamp.org/") Angular Camp
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://www.meetup.com/find/?allMeetups=false&keywords=angularjs&radius=Infinity&userFreeform=94043&gcResults=Mountain+View%2C+CA+94043%2C+USA%3AUS%3ACalifornia%3ASanta+Clara+County%3AMountain+View%3Anull%3A94043%3A37.428434%3A-122.07238159999997&change=yes&sort=default") Angular Meetups
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Packt Publishing
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/switching-angular-2") Switching to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Mastering Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-blueprints") Angular 2 Blueprints
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-example") Angular 2 By Examples
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/learning-angular-2-net-developers") Learning Angular 2 for .NET Developers
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-test-driven-development") Angular 2 Test-driven Development
|
||||
|
||||
h3 Manning Publications
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-in-action") Angular 2 In Action
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-development-with-typescript") Angular 2 Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/testing-angular-2-applications") Testing Angular 2 Applications
|
||||
|
||||
h3 O'Reilly Media
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://www.oreilly.com/pub/e/3693") Angular 2 Web Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/0636920051824.do") Migrating to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/9781785886201.do") Switching to Angular 2
|
||||
|
||||
h3 Self-published
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://ngcourse.rangle.io/") Rangle.io: ngCourse 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.ng-book.com/2/") ng-book 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/angular2-book") Angular 2 Book
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://books.ninja-squad.com/angular2") Become a ninja with Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/practical-angular-2") Practical Angular 2
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Podcasts
|
||||
ul(class="podcasts")
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://angularair.com/") AngularAir
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://javascriptair.com/") JavaScript Air
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://devchat.tv/adventures-in-angular") Adventures in Angular
|
||||
|
||||
|
||||
h3 Communities
|
||||
ul(class="communities")
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularbeers.org/") Angular Beers
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularcamp.org/") Angular Camp
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://www.meetup.com/find/?allMeetups=false&keywords=angularjs&radius=Infinity&userFreeform=94043&gcResults=Mountain+View%2C+CA+94043%2C+USA%3AUS%3ACalifornia%3ASanta+Clara+County%3AMountain+View%3Anull%3A94043%3A37.428434%3A-122.07238159999997&change=yes&sort=default") Angular Meetups
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -15,7 +15,12 @@ tslint.json
|
|||
wallaby.js
|
||||
npm-debug*.
|
||||
protractor.config.js
|
||||
systemjs.config.js
|
||||
_test-output
|
||||
_temp
|
||||
**/ts/**/*.js
|
||||
**/ts-snippets/**/*.js
|
||||
**/ts/**/*.d.ts
|
||||
|
||||
!**/*e2e-spec.js
|
||||
!systemjs.config.1.js
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- #docregion -->
|
||||
<h2>Hero List</h2>
|
||||
|
||||
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
|
||||
<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
|
||||
{{hero.name}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
<!--#enddocregion binding -->
|
||||
|
||||
<!--#docregion structural -->
|
||||
<div *ngFor="#hero of heroes" ...>...</div>
|
||||
<div *ngFor="let hero of heroes" ...>...</div>
|
||||
<hero-detail *ngIf="selectedHero != null" ...></hero-detail>
|
||||
<!--#enddocregion structural -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.15
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**/*.js
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion import
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
// #enddocregion import
|
||||
import {HeroListComponent} from './hero-list.component';
|
||||
import {SalesTaxComponent} from './sales-tax.component';
|
||||
|
|
@ -14,4 +14,4 @@ import {SalesTaxComponent} from './sales-tax.component';
|
|||
})
|
||||
// #docregion export
|
||||
export class AppComponent { }
|
||||
// #enddocregion export
|
||||
// #enddocregion export
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable, Type} from 'angular2/core';
|
||||
import {Injectable, Type} from '@angular/core';
|
||||
import {Logger} from './logger.service';
|
||||
import {Hero} from './hero';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from 'angular2/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
|
||||
@Component({
|
||||
|
|
@ -7,5 +7,5 @@ import {Hero} from './hero';
|
|||
directives: [HeroDetailComponent]
|
||||
})
|
||||
export class HeroDetailComponent {
|
||||
@Input() hero:Hero;
|
||||
}
|
||||
@Input() hero: Hero;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!--#enddocregion binding -->
|
||||
|
||||
<!--#docregion structural -->
|
||||
<div *ngFor="#hero of heroes"></div>
|
||||
<div *ngFor="let hero of heroes"></div>
|
||||
<hero-detail *ngIf="selectedHero"></hero-detail>
|
||||
|
||||
<!--#enddocregion structural -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<h2>Hero List</h2>
|
||||
|
||||
<p><i>Pick a hero from the list</i></p>
|
||||
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
|
||||
<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
|
||||
{{hero.name}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docplaster
|
||||
import {Component, OnInit} from 'angular2/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroDetailComponent} from './hero-detail.component';
|
||||
import {HeroService} from './hero.service';
|
||||
|
|
@ -24,13 +24,13 @@ export class HeroesComponent { ... }
|
|||
// #docregion class
|
||||
export class HeroListComponent implements OnInit {
|
||||
// #docregion ctor
|
||||
constructor(private _service: HeroService){ }
|
||||
constructor(private _service: HeroService) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
heroes:Hero[];
|
||||
heroes: Hero[];
|
||||
selectedHero: Hero;
|
||||
|
||||
ngOnInit(){
|
||||
ngOnInit() {
|
||||
this.heroes = this._service.getHeroes();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {BackendService} from './backend.service';
|
||||
import {Logger} from './logger.service';
|
||||
|
|
@ -12,14 +12,14 @@ export class HeroService {
|
|||
private _logger: Logger) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
private _heroes:Hero[] = [];
|
||||
private _heroes: Hero[] = [];
|
||||
|
||||
getHeroes() {
|
||||
this._backend.getAll(Hero).then( (heroes:Hero[]) => {
|
||||
this._backend.getAll(Hero).then( (heroes: Hero[]) => {
|
||||
this._logger.log(`Fetched ${heroes.length} heroes.`);
|
||||
this._heroes.push(...heroes); // fill cache
|
||||
});
|
||||
return this._heroes;
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion class
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
let nextId = 1;
|
||||
|
||||
export class Hero {
|
||||
id:number
|
||||
id: number;
|
||||
constructor(
|
||||
public name:string,
|
||||
public power?:string){
|
||||
public name: string,
|
||||
public power?: string) {
|
||||
this.id = nextId++;
|
||||
}
|
||||
}
|
||||
|
||||
var nextId = 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
|
|
@ -8,4 +8,4 @@ export class Logger {
|
|||
error(msg: any) { console.error(msg); }
|
||||
warn(msg: any) { console.warn(msg); }
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion class
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
// #docregion import
|
||||
import {AppComponent} from './app.component';
|
||||
// #enddocregion import
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {SalesTaxService} from './sales-tax.service';
|
||||
import {TaxRateService} from './tax-rate.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable, Inject} from 'angular2/core';
|
||||
import {Injectable, Inject} from '@angular/core';
|
||||
import {TaxRateService} from './tax-rate.service';
|
||||
|
||||
// #docregion class
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
|
|
|
|||
|
|
@ -1,30 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Intro to Angular 2</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Architecture of Angular 2</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
@ -32,4 +23,4 @@
|
|||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"description": "Intro to Angular2",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!app/hero-list.component.1.*"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.15
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**/*.js
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {HighlightDirective} from './highlight.directive';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, Input} from 'angular2/core';
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, Input} from 'angular2/core';
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion full
|
||||
import {Directive, ElementRef, Input} from 'angular2/core';
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -2,33 +2,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Attribute Directives</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**/*.js
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
<h3>Movie Titles via local variable</h3>
|
||||
<table>
|
||||
<!-- #docregion local -->
|
||||
<tr *ngFor="#movie of movies">
|
||||
<tr *ngFor="let movie of movies">
|
||||
<td>{{movie.title}}</td>
|
||||
</tr>
|
||||
<!-- #enddocregion local -->
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<h3>Sliced Movies with pipes</h3>
|
||||
<table>
|
||||
<!-- #docregion slice -->
|
||||
<tr *ngFor="#movie of movies | slice:0:2">
|
||||
<tr *ngFor="let movie of movies | slice:0:2">
|
||||
<!-- #enddocregion slice -->
|
||||
|
||||
<!-- #docregion uppercase -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from 'angular2/core';
|
||||
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
|
||||
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';
|
||||
|
|
@ -19,7 +19,7 @@ import {StringSafeDatePipe} from './date.pipe';
|
|||
])
|
||||
export class AppComponent {
|
||||
|
||||
angularDocsUrl = "https://angular.io/";
|
||||
angularDocsUrl = 'https://angular.io/';
|
||||
colorPreference = 'red';
|
||||
eventType = '<not clicked yet>';
|
||||
isActive = true;
|
||||
|
|
@ -27,8 +27,8 @@ export class AppComponent {
|
|||
movie: IMovie = null;
|
||||
movies: IMovie[] = [];
|
||||
showImage = true;
|
||||
title: string = "A1-A2 Quick Ref Cookbook";
|
||||
toggleImage(event:UIEvent) {
|
||||
title: string = 'A1-A2 Quick Ref Cookbook';
|
||||
toggleImage(event: UIEvent) {
|
||||
this.showImage = !this.showImage;
|
||||
this.eventType = (event && event.type) || 'not provided';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import {Injectable, Pipe} from 'angular2/core';
|
||||
import {DatePipe} from 'angular2/common';
|
||||
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, args: any[]): string {
|
||||
transform(value: any, format: string): string {
|
||||
value = typeof value === 'string' ?
|
||||
Date.parse(value) : value
|
||||
return super.transform(value, args);
|
||||
Date.parse(value) : value;
|
||||
return super.transform(value, format);
|
||||
}
|
||||
}
|
||||
// #enddocregion date-pipe
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<!-- #docregion ngFor -->
|
||||
<tr *ngFor="#movie of movies">
|
||||
<tr *ngFor="let movie of movies">
|
||||
<!-- #enddocregion ngFor -->
|
||||
<td>
|
||||
<img [hidden]="!showImage || !movie.imageurl"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion import
|
||||
import {Component} from 'angular2/core';
|
||||
import {ROUTER_DIRECTIVES} from "angular2/router";
|
||||
import {Component} from '@angular/core';
|
||||
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
||||
// #enddocregion import
|
||||
import {MovieService} from './movie.service';
|
||||
import {IMovie} from './movie';
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {IMovie} from './movie';
|
||||
|
||||
@Injectable()
|
||||
export class MovieService {
|
||||
getMovies() : IMovie[] {
|
||||
getMovies(): IMovie[] {
|
||||
return [
|
||||
{
|
||||
hero: "Celeritas",
|
||||
imageurl: "images/hero.png",
|
||||
hero: 'Celeritas',
|
||||
imageurl: 'images/hero.png',
|
||||
movieId: 1,
|
||||
mpaa: "pg-13",
|
||||
releaseDate: "2015-12-19T00:00:00",
|
||||
title: "Celeritas Reigns",
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-19T00:00:00',
|
||||
title: 'Celeritas Reigns',
|
||||
price: 12.95,
|
||||
starRating: 4.925,
|
||||
approvalRating: .97
|
||||
},
|
||||
{
|
||||
hero: "Mr. Nice",
|
||||
imageurl: "images/villain.png",
|
||||
hero: 'Mr. Nice',
|
||||
imageurl: 'images/villain.png',
|
||||
movieId: 2,
|
||||
mpaa: "pg-13",
|
||||
releaseDate: "2015-12-18T00:00:00",
|
||||
title: "No More Mr. Nice Guy",
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-18T00:00:00',
|
||||
title: 'No More Mr. Nice Guy',
|
||||
price: 14.95,
|
||||
starRating: 4.6,
|
||||
approvalRating: .94
|
||||
},
|
||||
{
|
||||
hero: "Angular",
|
||||
imageurl: "images/ng-logo.png",
|
||||
hero: 'Angular',
|
||||
imageurl: 'images/ng-logo.png',
|
||||
movieId: 3,
|
||||
mpaa: "pg-13",
|
||||
releaseDate: "2015-12-17T00:00:00",
|
||||
title: "Angular to the Rescue",
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-17T00:00:00',
|
||||
title: 'Angular to the Rescue',
|
||||
price: 15.95,
|
||||
starRating: 4.98,
|
||||
approvalRating: .9995
|
||||
|
|
|
|||
|
|
@ -2,33 +2,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
<title>Angular 1 to Angular 2 Quick Reference</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- #docregion style -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/router.dev.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<h1 id="top">Component Communication Cookbook</h1>
|
||||
|
||||
<a href="#parent-to-child">Pass data from parent to child with input binding ("Heros")</a><br/>
|
||||
<a href="#parent-to-child">Pass data from parent to child with input binding ("Heroes")</a><br/>
|
||||
<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
|
||||
<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
|
||||
<a href="#child-to-parent">Parent listens for child event ("Colonize Universe")</a><br/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {HeroParentComponent} from './hero-parent.component';
|
||||
import {NameParentComponent} from './name-parent.component';
|
||||
import {VersionParentComponent} from './version-parent.component';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnDestroy} from 'angular2/core';
|
||||
import {Component, Input, OnDestroy} from '@angular/core';
|
||||
import {MissionService} from './mission.service';
|
||||
import {Subscription} from 'rxjs/Subscription';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// #docplaster
|
||||
// #docregion vc
|
||||
import {AfterViewInit, ViewChild} from 'angular2/core';
|
||||
import {AfterViewInit, ViewChild} from '@angular/core';
|
||||
// #docregion lv
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {CountdownTimerComponent} from './countdown-timer.component';
|
||||
|
||||
// #enddocregion lv
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, OnInit, OnDestroy} from 'angular2/core';
|
||||
import {Component, OnInit, OnDestroy} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector:'countdown-timer',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, Input} from 'angular2/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {HeroChildComponent} from './hero-child.component';
|
||||
import {HEROES} from './hero';
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ import {HEROES} from './hero';
|
|||
selector: 'hero-parent',
|
||||
template: `
|
||||
<h2>{{master}} controls {{heroes.length}} heroes</h2>
|
||||
<hero-child *ngFor="#hero of heroes"
|
||||
<hero-child *ngFor="let hero of heroes"
|
||||
[hero]="hero"
|
||||
[master]="master">
|
||||
</hero-child>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core'
|
||||
import {Injectable} from '@angular/core'
|
||||
import {Subject} from 'rxjs/Subject';
|
||||
|
||||
@Injectable()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {AstronautComponent} from './astronaut.component';
|
||||
import {MissionService} from './mission.service';
|
||||
|
||||
|
|
@ -8,12 +8,12 @@ import {MissionService} from './mission.service';
|
|||
template: `
|
||||
<h2>Mission Control</h2>
|
||||
<button (click)="announce()">Announce mission</button>
|
||||
<my-astronaut *ngFor="#astronaut of astronauts"
|
||||
<my-astronaut *ngFor="let astronaut of astronauts"
|
||||
[astronaut]="astronaut">
|
||||
</my-astronaut>
|
||||
<h3>History</h3>
|
||||
<ul>
|
||||
<li *ngFor="#event of history">{{event}}</li>
|
||||
<li *ngFor="let event of history">{{event}}</li>
|
||||
</ul>
|
||||
`,
|
||||
directives: [AstronautComponent],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, Input} from 'angular2/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'name-child',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {NameChildComponent} from './name-child.component';
|
||||
|
||||
@Component({
|
||||
selector: 'name-parent',
|
||||
template: `
|
||||
<h2>Master controls {{names.length}} names</h2>
|
||||
<name-child *ngFor="#name of names"
|
||||
<name-child *ngFor="let name of names"
|
||||
[name]="name">
|
||||
</name-child>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* tslint:disable:forin */
|
||||
// #docregion
|
||||
import {Component, Input, OnChanges, SimpleChange} from 'angular2/core';
|
||||
import {Component, Input, OnChanges, SimpleChange} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'version-child',
|
||||
|
|
@ -7,7 +8,7 @@ import {Component, Input, OnChanges, SimpleChange} from 'angular2/core';
|
|||
<h3>Version {{major}}.{{minor}}</h3>
|
||||
<h4>Change log:</h4>
|
||||
<ul>
|
||||
<li *ngFor="#change of changeLog">{{change}}</li>
|
||||
<li *ngFor="let change of changeLog">{{change}}</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
|
|
@ -27,4 +28,4 @@ export class VersionChildComponent implements OnChanges {
|
|||
this.changeLog.push(log.join(', '));
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {VersionChildComponent} from './version-child.component';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter, Input, Output} from 'angular2/core';
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-voter',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {VoterComponent} from './voter.component';
|
||||
|
||||
@Component({
|
||||
|
|
@ -7,7 +7,7 @@ import {VoterComponent} from './voter.component';
|
|||
template: `
|
||||
<h2>Should mankind colonize the Universe?</h2>
|
||||
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
|
||||
<my-voter *ngFor="#voter of voters"
|
||||
<my-voter *ngFor="let voter of voters"
|
||||
[name]="voter"
|
||||
(onVoted)="onVoted($event)">
|
||||
</my-voter>
|
||||
|
|
@ -23,4 +23,4 @@ export class VoteTakerComponent {
|
|||
agreed ? this.agreed++ : this.disagreed++;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Passing information from parent to child</title>
|
||||
<style>
|
||||
.to-top {margin-top: 8px; display: block;}
|
||||
|
|
@ -9,26 +9,16 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**/*.js
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import { Component } from 'angular2/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroBiosComponent,
|
||||
HeroBiosAndContactsComponent} from './hero-bios.component';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docregion
|
||||
import { Injectable } from 'angular2/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
// #docregion minimal-logger
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnInit} from 'angular2/core';
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
|
||||
import {Hero} from './hero';
|
||||
import {HeroCacheService} from './hero-cache.service';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component} from 'angular2/core';
|
||||
import { Component} from '@angular/core';
|
||||
|
||||
import { HeroContactComponent } from './hero-contact.component';
|
||||
import { HeroBioComponent } from './hero-bio.component';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, ElementRef, Host, Inject, Optional} from 'angular2/core';
|
||||
import {Component, ElementRef, Host, Inject, Optional} from '@angular/core';
|
||||
import {HeroCacheService} from './hero-cache.service';
|
||||
import {LoggerService} from './logger.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docplaster
|
||||
// #docregion opaque-token
|
||||
import {OpaqueToken} from 'angular2/core';
|
||||
import {OpaqueToken} from '@angular/core';
|
||||
|
||||
export const TITLE = new OpaqueToken('title');
|
||||
// #enddocregion opaque-token
|
||||
|
||||
// #docregion hero-of-the-month
|
||||
import { Component, Inject, provide } from 'angular2/core';
|
||||
import { Component, Inject, provide } from '@angular/core';
|
||||
|
||||
import { DateLoggerService,
|
||||
MinimalLogger } from './date-logger.service';
|
||||
|
|
@ -30,7 +30,7 @@ const template = `
|
|||
|
||||
<p>Logs:</p>
|
||||
<div id="logs">
|
||||
<div *ngFor="#log of logs">{{log}}</div>
|
||||
<div *ngFor="let log of logs">{{log}}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
|
||||
//TODO move to database
|
||||
private _heros:Array<Hero> = [
|
||||
private _heroes:Array<Hero> = [
|
||||
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._heros.filter(hero => hero.id === id)[0];
|
||||
return this._heroes.filter(hero => hero.id === id)[0];
|
||||
}
|
||||
|
||||
getAllHeroes():Array<Hero>{
|
||||
return this._heros;
|
||||
return this._heroes;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Directive, ElementRef, Input} from 'angular2/core';
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class LoggerService {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
// #docregion
|
||||
import { bootstrap } from 'angular2/platform/browser';
|
||||
import { provide } from 'angular2/core';
|
||||
import { XHRBackend } from 'angular2/http';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { provide } from '@angular/core';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import { LocationStrategy,
|
||||
HashLocationStrategy,
|
||||
ROUTER_PROVIDERS } from 'angular2/router';
|
||||
HashLocationStrategy } from '@angular/common';
|
||||
|
||||
import { HeroData } from './hero-data';
|
||||
import { InMemoryBackendService,
|
||||
SEED_DATA } from 'a2-in-memory-web-api/core';
|
||||
SEED_DATA } from 'angular2-in-memory-web-api/core';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, forwardRef, Optional, provide, SkipSelf } from 'angular2/core';
|
||||
import { Component, forwardRef, Optional, provide, SkipSelf } from '@angular/core';
|
||||
|
||||
// A component base class (see AlexComponent)
|
||||
export abstract class Base { name = 'Count Basie'; }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {OpaqueToken} from 'angular2/core';
|
||||
import {OpaqueToken} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, OnInit} from 'angular2/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ import {HeroService} from './hero.service';
|
|||
// #docregion heroes-base, injection
|
||||
@Component({
|
||||
selector: 'unsorted-heroes',
|
||||
template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
|
||||
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
|
||||
providers: [HeroService]
|
||||
})
|
||||
export class HeroesBaseComponent implements OnInit {
|
||||
|
|
@ -33,7 +33,7 @@ export class HeroesBaseComponent implements OnInit {
|
|||
// #docregion sorted-heroes
|
||||
@Component({
|
||||
selector: 'sorted-heroes',
|
||||
template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
|
||||
template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
|
||||
providers: [HeroService]
|
||||
})
|
||||
export class SortedHeroesComponent extends HeroesBaseComponent {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {LoggerService} from './logger.service';
|
||||
import {UserService} from './user.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class UserService {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
<title>Dependency Injection</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- #docregion style -->
|
||||
|
|
@ -9,31 +10,16 @@
|
|||
<link rel="stylesheet" href="sample.css">
|
||||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
|
||||
<!-- Additional modules: router, http, in-mem-web-api -->
|
||||
<script src="node_modules/angular2/bundles/router.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/http.dev.js"></script>
|
||||
<script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**/*.js
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core'
|
||||
import {Component} from '@angular/core'
|
||||
import {DynamicForm} from './dynamic-form.component';
|
||||
import {QuestionService} from './question.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
[id]="question.key" [type]="question.type">
|
||||
|
||||
<select [id]="question.key" *ngSwitchWhen="'dropdown'" [ngControl]="question.key">
|
||||
<option *ngFor="#opt of question.options" [value]="opt.key">{{opt.value}}</option>
|
||||
<option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Component, Input} from 'angular2/core';
|
||||
import {ControlGroup} from 'angular2/common';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {ControlGroup} from '@angular/common';
|
||||
import {QuestionBase} from './question-base';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<form (ngSubmit)="onSubmit()" [ngFormModel]="form">
|
||||
|
||||
<div *ngFor="#question of questions" class="form-row">
|
||||
<div *ngFor="let question of questions" class="form-row">
|
||||
<df-question [question]="question" [form]="form"></df-question>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnInit} from 'angular2/core';
|
||||
import {ControlGroup} from 'angular2/common';
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {ControlGroup} from '@angular/common';
|
||||
|
||||
import {QuestionBase} from './question-base';
|
||||
import {QuestionControlService} from './question-control.service';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
bootstrap(AppComponent, [])
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {ControlGroup, FormBuilder, Validators} from '@angular/common';
|
||||
import {QuestionBase} from './question-base';
|
||||
|
||||
@Injectable()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {QuestionBase} from './question-base';
|
||||
import {DynamicForm} from './dynamic-form.component';
|
||||
import {TextboxQuestion} from './question-textbox';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<base href="/">
|
||||
<title>Dynamic Form</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -9,29 +10,18 @@
|
|||
<link rel="stylesheet" href="sample.css">
|
||||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
app: {
|
||||
format: 'register',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading app...</my-app>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
// gulp run-e2e-tests --filter=cb-set-document-title
|
||||
describe('Set Document Title', function () {
|
||||
|
||||
beforeAll(function () {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
it('should set the document title', function () {
|
||||
|
||||
var titles = [
|
||||
'Good morning!',
|
||||
'Good afternoon!',
|
||||
'Good evening!'
|
||||
];
|
||||
|
||||
element.all( by.css( 'ul li a' ) ).each(
|
||||
function iterator( element, i ) {
|
||||
|
||||
element.click();
|
||||
expect( browser.getTitle() ).toEqual( titles[ i ] );
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// Import the native Angular services.
|
||||
import { Component } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template:
|
||||
`<p>
|
||||
Select a title to set on the current HTML document:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
|
||||
<li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
|
||||
<li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
// #docregion class
|
||||
export class AppComponent {
|
||||
public constructor(private _titleService: Title ) { }
|
||||
|
||||
public setTitle( newTitle: string) {
|
||||
this._titleService.setTitle( newTitle );
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// While Angular supplies a Title service for setting the HTML document title
|
||||
// it doesn't include this service as part of the default Browser platform providers.
|
||||
// As such, if we want to inject it into the components within our application,
|
||||
// we have to explicitly provide the Angular service in our top component.
|
||||
// #docregion bootstrap-title
|
||||
import { Title } from '@angular/platform-browser';
|
||||
|
||||
bootstrap(AppComponent, [ Title ])
|
||||
// #enddocregion bootstrap-title
|
||||
.then(
|
||||
() => window.console.info( 'Angular finished bootstrapping your application!' ),
|
||||
(error) => {
|
||||
console.warn( 'Angular was not able to bootstrap your application.' );
|
||||
console.error( error );
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<base href="/">
|
||||
|
||||
<title>
|
||||
Setting The Document Title Using The Title Service
|
||||
</title>
|
||||
|
||||
<!-- #docregion style -->
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="sample.css">
|
||||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app')
|
||||
.then(function() { console.info( "System.js loaded your application module." )})
|
||||
.catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>
|
||||
Setting The Document Title Using The Title Service
|
||||
</h1>
|
||||
|
||||
<my-app>Loading app...</my-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"description": "Set The Document Title In Angular 2",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1].*"
|
||||
],
|
||||
"tags": [ "cookbook" ]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue