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

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() {

harp.json

@@ -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",

package.json

@@ -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"
   },

public/_data.json

@@ -6,8 +6,7 @@
   },
 
   "features": {
-    "title": "特性与优点",
+    "title": "特性与优点"
-    "subtitle": "开发应用程序的强力特性"
   },
 
   "contribute": {
@@ -17,8 +16,7 @@
   },
 
   "news": {
-    "title": "新闻",
+    "title": "新闻"
-    "subtitle": "看看我们正在做什么"
   },
 
   "events": {
@@ -29,5 +27,29 @@
   "support": {
     "title": "支持",
     "subtitle": "从Angular社区获得支持"
+  },
+
+  "presskit": {
+    "title": "出版工具"
+  },
+
+  "books": {
+    "title": "书籍"
+  },
+
+  "training": {
+    "title": "培训"
+  },
+
+  "communities": {
+    "title": "社区"
+  },
+
+  "tooling": {
+    "title": "工具与库"
+  },
+
+  "all-resources": {
+    "title": "资源"
   }
 }

public/_includes/_footer.jade

@@ -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
+    .c3
-      h3.text-headline 库
+      h3.text-headline 资源
 
       ul.text-body
-        li <a href="/"> Angular 2.0</a>
+        // TODO: (ericjim) make a libraries page to showcase all angular 2 libraries
-        li <a href="https://angularjs.org/"> Angular 1 for JS</a>
+        //li <a href="/libraries.html">Libraries</a>
-        li <a href="https://material.angularjs.org"> Angular Material</a>
+        li <a href="/about/">关于</a>
-        li <a href="https://www.firebase.com/docs/web/libraries/angular/"> AngularFire</a>
+        li <a href="/resources/">书籍与培训</a>
+        li <a href="/resources/">工具与库</a>
+        li <a href="/resources/">社区</a>
+        li <a href="/presskit.html">出版工具</a>
 
-    .c2
+    .c3
-      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">设计文档 &amp; 记录</a>
-
-    .c2
       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"> 报告问题 </a>
-        li <a href="https://github.com/angular/angular/issues"> 报告BUG </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="/events.html">Events</a>
-        li <a href="https://plus.sandbox.google.com/+AngularJS/posts"> Google+</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")

public/_includes/_hero-home.jade

@@ -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"
+      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
-      md-button) 现在开始！
 
-.banner.is-centered
+.banner.banner-floaty
   .banner-ng-annoucement
-    h4 Angular的挑战赛 — 一次48小时的线上黑客马拉松就在2016年5月14~15日。&nbsp;
+    div(class="banner-text")
-      a(href="https://www.angularattack.com/" target="_blank") 立即注册
+      p Watch the ng-conf Live Stream May 4th-6th.&nbsp;
+      p 观看 ng-conf 实时视频 May 4th-6th.&nbsp;
+    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") 查看实时视频

public/_includes/_hero.jade

@@ -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}
+  div(class="inner-header")
-  if useBadges
+    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+    if useBadges
     span(class="badges")
       if docType
         span(class="status-badge").

public/_includes/_main-nav.jade

@@ -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>

public/_includes/_util-fns.jade

@@ -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

public/all-resources.jade

@@ -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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

public/books.jade

@@ -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
+
+
+
+

public/communities.jade

@@ -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
+
+
+
+
+

public/docs/_examples/.gitignore

@@ -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

public/docs/_examples/architecture/dart/lib/hero_list_component.html

@@ -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>
 

public/docs/_examples/architecture/dart/lib/hero_list_component_1.html

@@ -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 -->

public/docs/_examples/architecture/dart/pubspec.yaml

@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.15
+  angular2: 2.0.0-beta.17
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:

public/docs/_examples/architecture/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

public/docs/_examples/architecture/ts/app/app.component.ts

@@ -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';

public/docs/_examples/architecture/ts/app/backend.service.ts

@@ -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';
 

public/docs/_examples/architecture/ts/app/hero-detail.component.ts

@@ -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;
 }

public/docs/_examples/architecture/ts/app/hero-list.component.1.html

@@ -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 -->

public/docs/_examples/architecture/ts/app/hero-list.component.html

@@ -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>
 

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -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();
   }
 

public/docs/_examples/architecture/ts/app/hero.service.ts

@@ -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,10 +12,10 @@ 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
     });

public/docs/_examples/architecture/ts/app/hero.ts

@@ -1,10 +1,10 @@
+let nextId = 1;
+
 export class Hero {
-  id:number
+  id: number;
   constructor(
-    public name:string,
+    public name: string,
-    public power?:string){
+    public power?: string) {
       this.id = nextId++;
     }
 }
-
-var nextId = 1;

public/docs/_examples/architecture/ts/app/logger.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 // #docregion class

public/docs/_examples/architecture/ts/app/main.ts

@@ -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

public/docs/_examples/architecture/ts/app/sales-tax.component.ts

@@ -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';
 

public/docs/_examples/architecture/ts/app/sales-tax.service.ts

@@ -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

public/docs/_examples/architecture/ts/app/tax-rate.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 // #docregion class
 @Injectable()

public/docs/_examples/architecture/ts/index.html

@@ -1,30 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Intro to Angular 2</title>
+    <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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/attribute-directives/dart/pubspec.yaml

@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.15
+  angular2: 2.0.0-beta.17
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:

public/docs/_examples/attribute-directives/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

public/docs/_examples/attribute-directives/ts/app/app.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {HighlightDirective} from './highlight.directive';
 
 @Component({

public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
     selector: '[myHighlight]'

public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',

public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion full
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',

public/docs/_examples/attribute-directives/ts/app/main.ts

@@ -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);

public/docs/_examples/attribute-directives/ts/index.html

@@ -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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 
+
   <body>
     <my-app>loading...</my-app>
   </body>

public/docs/_examples/cb-a1-a2-quick-reference/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html

@@ -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 -->

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts

@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
-import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
+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";
+  title: string = 'A1-A2 Quick Ref Cookbook';
-  toggleImage(event:UIEvent) {
+  toggleImage(event: UIEvent) {
     this.showImage = !this.showImage;
     this.eventType = (event && event.type) || 'not provided';
   }

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts

@@ -1,14 +1,14 @@
-import {Injectable, Pipe} from 'angular2/core';
+import {Injectable, Pipe} from '@angular/core';
-import {DatePipe} from 'angular2/common';
+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
+           Date.parse(value) : value;
-   return super.transform(value, args);
+   return super.transform(value, format);
  }
 }
 // #enddocregion date-pipe

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts

@@ -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);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html

@@ -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"

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion import
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
-import {ROUTER_DIRECTIVES} from "angular2/router";
+import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 // #enddocregion import
 import {MovieService} from './movie.service';
 import {IMovie} from './movie';

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts

@@ -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",
+        hero: 'Celeritas',
-        imageurl: "images/hero.png",
+        imageurl: 'images/hero.png',
         movieId: 1,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-19T00:00:00",
+        releaseDate: '2015-12-19T00:00:00',
-        title: "Celeritas Reigns",
+        title: 'Celeritas Reigns',
         price: 12.95,
         starRating: 4.925,
         approvalRating: .97
       },
       {
-        hero: "Mr. Nice",
+        hero: 'Mr. Nice',
-        imageurl: "images/villain.png",
+        imageurl: 'images/villain.png',
         movieId: 2,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-18T00:00:00",
+        releaseDate: '2015-12-18T00:00:00',
-        title: "No More Mr. Nice Guy",
+        title: 'No More Mr. Nice Guy',
         price: 14.95,
         starRating: 4.6,
         approvalRating: .94
       },
       {
-        hero: "Angular",
+        hero: 'Angular',
-        imageurl: "images/ng-logo.png",
+        imageurl: 'images/ng-logo.png',
         movieId: 3,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-17T00:00:00",
+        releaseDate: '2015-12-17T00:00:00',
-        title: "Angular to the Rescue",
+        title: 'Angular to the Rescue',
         price: 15.95,
         starRating: 4.98,
         approvalRating: .9995

public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html

@@ -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="systemjs.config.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/cb-component-communication/ts/app/app.component.html

@@ -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/>

public/docs/_examples/cb-component-communication/ts/app/app.component.ts

@@ -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';

public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts

@@ -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';
 

public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts

@@ -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

public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, OnInit, OnDestroy} from 'angular2/core';
+import {Component, OnInit, OnDestroy} from '@angular/core';
 
 @Component({
   selector:'countdown-timer',

public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 @Component({

public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts

@@ -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>

public/docs/_examples/cb-component-communication/ts/app/main.ts

@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);

public/docs/_examples/cb-component-communication/ts/app/mission.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core'
+import {Injectable} from '@angular/core'
 import {Subject}    from 'rxjs/Subject';
 
 @Injectable()

public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts

@@ -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],

public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'name-child',

public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts

@@ -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>
   `,

public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts

@@ -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>
   `
 })

public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {VersionChildComponent} from './version-child.component';
 
 @Component({

public/docs/_examples/cb-component-communication/ts/app/voter.component.ts

@@ -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',

public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts

@@ -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>

public/docs/_examples/cb-component-communication/ts/index.html

@@ -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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/cb-dependency-injection/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 import { HeroBiosComponent,
          HeroBiosAndContactsComponent} from './hero-bios.component';

public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts

@@ -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

public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts

@@ -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';

public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts

@@ -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';

public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable}  from 'angular2/core';
+import {Injectable}  from '@angular/core';
 import {Hero}        from './hero';
 import {HeroService} from './hero.service';
 

public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts

@@ -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';
 

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -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>
   `;
 

public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts

@@ -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;
   }
 }

public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',

public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class LoggerService {

public/docs/_examples/cb-dependency-injection/ts/app/main.ts

@@ -1,15 +1,16 @@
 // #docregion
-import { bootstrap }        from 'angular2/platform/browser';
+import { bootstrap }        from '@angular/platform-browser-dynamic';
-import { provide }          from 'angular2/core';
+import { provide }          from '@angular/core';
-import { XHRBackend }       from 'angular2/http';
+import { XHRBackend }       from '@angular/http';
+
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 import { LocationStrategy,
-         HashLocationStrategy,
+         HashLocationStrategy } from '@angular/common';
-         ROUTER_PROVIDERS } from 'angular2/router';
 
 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';
 

public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts

@@ -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'; }

public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts

@@ -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';
 

public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts

@@ -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 {

public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts

@@ -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';
 

public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class UserService {

public/docs/_examples/cb-dependency-injection/ts/index.html

@@ -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="systemjs.config.js"></script>
-    <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>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/cb-dynamic-form/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts

@@ -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';
 

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.html

@@ -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>

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts

@@ -1,6 +1,6 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
-import {ControlGroup}     from 'angular2/common';
+import {ControlGroup}     from '@angular/common';
 import {QuestionBase}     from './question-base';
 
 @Component({

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.html

@@ -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>
 

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts

@@ -1,6 +1,6 @@
 // #docregion
-import {Component, Input, OnInit}  from 'angular2/core';
+import {Component, Input, OnInit}  from '@angular/core';
-import {ControlGroup}              from 'angular2/common';
+import {ControlGroup}              from '@angular/common';
 
 import {QuestionBase}                 from './question-base';
 import {QuestionControlService}       from './question-control.service';

public/docs/_examples/cb-dynamic-form/ts/app/main.ts

@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent, [])

public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts

@@ -1,6 +1,6 @@
 // #docregion
-import {Injectable}   from 'angular2/core';
+import {Injectable}   from '@angular/core';
-import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
+import {ControlGroup, FormBuilder, Validators} from '@angular/common';
 import {QuestionBase} from './question-base';
 
 @Injectable()

public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts

@@ -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';

public/docs/_examples/cb-dynamic-form/ts/index.html

@@ -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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
-
   <body>
     <my-app>Loading app...</my-app>
   </body>

public/docs/_examples/cb-set-document-title/e2e-spec.js

@@ -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 ] );
+
+        }
+      );
+
+  });
+
+});

public/docs/_examples/cb-set-document-title/ts/app/app.component.ts

@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion
+// Import the native Angular services.
+import { Component } from '@angular/core';
+import { Title }     from '@angular/platform-browser';
+
+@Component({
+selector: 'my-app',
+template:
+  `<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

public/docs/_examples/cb-set-document-title/ts/app/main.ts

@@ -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 );
+    }
+  );

public/docs/_examples/cb-set-document-title/ts/index.html

@@ -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>

public/docs/_examples/cb-set-document-title/ts/plnkr.json

@@ -0,0 +1,9 @@
+{
+	"description": "Set The Document Title In Angular 2",
+	"files": [
+		"!**/*.d.ts",  
+		"!**/*.js",
+		"!**/*.[1].*"
+	],
+	"tags": [ "cookbook" ]
+}

public/docs/_examples/cb-set-document-title/ts/sample.css

@@ -0,0 +1,4 @@
+a {
+	color: #607D8B ;
+	text-decoration: underline ;
+}