Merge remote-tracking branch 'remotes/angular.io/master'

# Conflicts:
#	public/docs/ts/latest/cookbook/_data.json
#	public/docs/ts/latest/guide/_data.json
#	public/docs/ts/latest/guide/testing.jade

public/_includes/_footer.jade

@@ -71,8 +71,8 @@ else
         li <a href="https://angular.io/" target="_blank">English</a>
 
   footer(class="background-midnight")
-    small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+    small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
+    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger")
       span.icon-favorite
     a(aria-label="查看风格指南" href="/docs/ts/latest/styleguide.html" title="风格指南" class="styleguide-trigger text-snow translated-cn" md-button)
       span.icon-favorite

public/docs/_examples/testing/ts/app/banner.component.spec.ts

@@ -11,7 +11,8 @@ import { BannerComponent } from './banner.component';
 // #docregion setup
 let comp:    BannerComponent;
 let fixture: ComponentFixture<BannerComponent>;
-let el:      DebugElement;
+let de:      DebugElement;
+let el:      HTMLElement;
 
 describe('BannerComponent', () => {
   beforeEach(() => {
@@ -23,25 +24,27 @@ describe('BannerComponent', () => {
 
     comp = fixture.componentInstance; // BannerComponent test instance
 
-    // get title DebugElement by element name
+    // query for the title <h1> by CSS element selector
-    el = fixture.debugElement.query(By.css('h1'));
+    de = fixture.debugElement.query(By.css('h1'));
+    el = de.nativeElement;
+
   });
 // #enddocregion setup
   // #docregion tests
   it('should display original title', () => {
-    fixture.detectChanges(); // trigger data binding
+    fixture.detectChanges();
-    expect(el.nativeElement.textContent).toContain(comp.title);
+    expect(el.textContent).toContain(comp.title);
   });
 
   it('should display a different test title', () => {
     comp.title = 'Test Title';
-    fixture.detectChanges(); // trigger data binding
+    fixture.detectChanges();
-    expect(el.nativeElement.textContent).toContain('Test Title');
+    expect(el.textContent).toContain('Test Title');
   });
   // #enddocregion tests
   // #docregion test-w-o-detect-changes
   it('no title in the DOM until manually call `detectChanges`', () => {
-    expect(el.nativeElement.textContent).toEqual('');
+    expect(el.textContent).toEqual('');
   });
   // #enddocregion test-w-o-detect-changes
 
@@ -59,8 +62,7 @@ describe('BannerComponent with AutoChangeDetect', () => {
     fixture = TestBed.configureTestingModule({
       declarations: [ BannerComponent ],
       providers: [
-        { provide: ComponentFixtureAutoDetect,
+        { provide: ComponentFixtureAutoDetect, useValue: true }
-          useValue: true }
       ]
     })
     // #enddocregion auto-detect
@@ -68,27 +70,28 @@ describe('BannerComponent with AutoChangeDetect', () => {
 
     comp = fixture.componentInstance; // BannerComponent test instance
 
-    // find title DebugElement by element name
+    // query for the title <h1> by CSS element selector
-    el = fixture.debugElement.query(By.css('h1'));
+    de = fixture.debugElement.query(By.css('h1'));
+    el = de.nativeElement;
   });
 
   // #docregion auto-detect-tests
   it('should display original title', () => {
     // Hooray! No `fixture.detectChanges()` needed
-    expect(el.nativeElement.textContent).toContain(comp.title);
+    expect(el.textContent).toContain(comp.title);
   });
 
   it('should still see original title after comp.title change', () => {
     const oldTitle = comp.title;
     comp.title = 'Test Title';
     // Displayed title is old because Angular didn't hear the change :(
-    expect(el.nativeElement.textContent).toContain(oldTitle);
+    expect(el.textContent).toContain(oldTitle);
   });
 
   it('should display updated title after detectChanges', () => {
     comp.title = 'Test Title';
     fixture.detectChanges(); // detect changes explicitly
-    expect(el.nativeElement.textContent).toContain(comp.title);
+    expect(el.textContent).toContain(comp.title);
   });
   // #enddocregion auto-detect-tests
 });
@@ -114,14 +117,14 @@ describe('BannerComponent (simpified)', () => {
   // #docregion simple-example-it
   it('should display original title', () => {
 
-    // trigger data binding to update the view
+    // trigger change detection to update the view
     fixture.detectChanges();
 
-    // find the title element in the DOM using a CSS selector
+    // query for the title <h1> by CSS element selector
-    el = fixture.debugElement.query(By.css('h1'));
+    de = fixture.debugElement.query(By.css('h1'));
 
     // confirm the element's content
-    expect(el.nativeElement.textContent).toContain(comp.title);
+    expect(de.nativeElement.textContent).toContain(comp.title);
   });
   // #enddocregion simple-example-it
 });

public/docs/_examples/testing/ts/app/shared/title-case.pipe.spec.ts

@@ -2,14 +2,15 @@
 // #docregion
 import { TitleCasePipe } from './title-case.pipe';
 
-// #docregion excerpt
+// #docregion excerpt, mini-excerpt
 describe('TitleCasePipe', () => {
-  // This pipe is a pure function so no need for BeforeEach
+  // This pipe is a pure, stateless function so no need for BeforeEach
   let pipe = new TitleCasePipe();
 
   it('transforms "abc" to "Abc"', () => {
     expect(pipe.transform('abc')).toBe('Abc');
   });
+// #enddocregion mini-excerpt
 
   it('transforms "abc def" to "Abc Def"', () => {
     expect(pipe.transform('abc def')).toBe('Abc Def');
@@ -28,6 +29,6 @@ describe('TitleCasePipe', () => {
   it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
     expect(pipe.transform('   abc   def')).toBe('   Abc   Def');
   });
-// #docregion excerpt
+// #docregion excerpt, mini-excerpt
 });
-// #enddocregion excerpt
+// #enddocregion excerpt, mini-excerpt

public/docs/_examples/testing/ts/app/shared/twain.component.spec.ts

@@ -12,7 +12,8 @@ describe('TwainComponent', () => {
   let fixture: ComponentFixture<TwainComponent>;
 
   let spy: jasmine.Spy;
-  let twainEl: DebugElement;  // the element with the Twain quote
+  let de: DebugElement;
+  let el: HTMLElement;
   let twainService: TwainService; // the actually injected service
 
   const testQuote = 'Test Quote';
@@ -37,54 +38,53 @@ describe('TwainComponent', () => {
     // #enddocregion spy
 
     // Get the Twain quote element by CSS selector (e.g., by class name)
-    twainEl = fixture.debugElement.query(By.css('.twain'));
+    de = fixture.debugElement.query(By.css('.twain'));
+    el = de.nativeElement;
   });
   // #enddocregion setup
 
   // #docregion tests
-  function getQuote() { return twainEl.nativeElement.textContent; }
-
   it('should not show quote before OnInit', () => {
-    expect(getQuote()).toBe('', 'nothing displayed');
+    expect(el.textContent).toBe('', 'nothing displayed');
     expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
   });
 
   it('should still not show quote after component initialized', () => {
-    fixture.detectChanges(); // trigger data binding
+    fixture.detectChanges();
     // getQuote service is async => still has not returned with quote
-    expect(getQuote()).toBe('...', 'no quote yet');
+    expect(el.textContent).toBe('...', 'no quote yet');
     expect(spy.calls.any()).toBe(true, 'getQuote called');
   });
 
   // #docregion async-test
   it('should show quote after getQuote promise (async)', async(() => {
-    fixture.detectChanges();          // trigger data binding
+    fixture.detectChanges();
 
     fixture.whenStable().then(() => { // wait for async getQuote
       fixture.detectChanges();        // update view with quote
-      expect(getQuote()).toBe(testQuote);
+      expect(el.textContent).toBe(testQuote);
     });
   }));
   // #enddocregion async-test
 
   // #docregion fake-async-test
   it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
-    fixture.detectChanges(); // trigger data binding
+    fixture.detectChanges();
     tick();                  // wait for async getQuote
     fixture.detectChanges(); // update view with quote
-    expect(getQuote()).toBe(testQuote);
+    expect(el.textContent).toBe(testQuote);
   }));
   // #enddocregion fake-async-test
   // #enddocregion tests
 
   // #docregion done-test
   it('should show quote after getQuote promise (done)', done => {
-    fixture.detectChanges();   // trigger data binding
+    fixture.detectChanges();
 
     // get the spy promise and wait for it to resolve
     spy.calls.mostRecent().returnValue.then(() => {
       fixture.detectChanges(); // update view with quote
-      expect(getQuote()).toBe(testQuote);
+      expect(el.textContent).toBe(testQuote);
       done();
     });
   });

public/docs/_examples/testing/ts/app/welcome.component.spec.ts

@@ -1,7 +1,7 @@
 // #docplaster
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { By }                        from '@angular/platform-browser';
+import { By }                                from '@angular/platform-browser';
-import { DebugElement }              from '@angular/core';
+import { DebugElement }                      from '@angular/core';
 
 import { UserService }      from './model';
 import { WelcomeComponent } from './welcome.component';
@@ -10,8 +10,10 @@ describe('WelcomeComponent', () => {
 
   let comp: WelcomeComponent;
   let fixture: ComponentFixture<WelcomeComponent>;
-  let userService: UserService; // the actually injected service
+  let componentUserService: UserService; // the actually injected service
-  let welcomeEl: DebugElement;  // the element with the welcome message
+  let userService: UserService; // the TestBed injected service
+  let de: DebugElement;  // the DebugElement with the welcome message
+  let el: HTMLElement; // the DOM element with the welcome message
 
   let userServiceStub: {
     isLoggedIn: boolean;
@@ -32,7 +34,8 @@ describe('WelcomeComponent', () => {
     TestBed.configureTestingModule({
        declarations: [ WelcomeComponent ],
     // #enddocregion setup
-    // providers:    [ UserService ]  // a real service would be a problem!
+    // providers:    [ UserService ]  // NO! Don't provide the real service!
+                                      // Provide a test-double instead
     // #docregion setup
        providers:    [ {provide: UserService, useValue: userServiceStub } ]
     });
@@ -42,51 +45,64 @@ describe('WelcomeComponent', () => {
     comp    = fixture.componentInstance;
 
     // #enddocregion setup
-    // #docregion inject-from-testbed
+   // #docregion injected-service
-    // UserService provided to the TestBed
-    userService = TestBed.get(UserService);
-    // #enddocregion inject-from-testbed
-    // #docregion setup
-    // #docregion injected-service
     // UserService actually injected into the component
     userService = fixture.debugElement.injector.get(UserService);
     // #enddocregion injected-service
+    componentUserService = userService;
+    // #docregion setup
+    // #docregion inject-from-testbed
+    // UserService from the root injector
+    userService = TestBed.get(UserService);
+    // #enddocregion inject-from-testbed
 
     //  get the "welcome" element by CSS selector (e.g., by class name)
-    welcomeEl = fixture.debugElement.query(By.css('.welcome'));
+    de = fixture.debugElement.query(By.css('.welcome'));
+    el = de.nativeElement;
   });
   // #enddocregion setup
 
   // #docregion tests
   it('should welcome the user', () => {
-    fixture.detectChanges(); // trigger data binding
+    fixture.detectChanges();
-
+    const content = el.textContent;
-    let content = welcomeEl.nativeElement.textContent;
     expect(content).toContain('Welcome', '"Welcome ..."');
     expect(content).toContain('Test User', 'expected name');
   });
 
   it('should welcome "Bubba"', () => {
     userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
-
+    fixture.detectChanges();
-    fixture.detectChanges(); // trigger data binding
+    expect(el.textContent).toContain('Bubba');
-
-    let content = welcomeEl.nativeElement.textContent;
-    expect(content).toContain('Bubba');
   });
 
   it('should request login if not logged in', () => {
     userService.isLoggedIn = false; // welcome message hasn't been shown yet
-
+    fixture.detectChanges();
-    fixture.detectChanges(); // trigger data binding
+    const content = el.textContent;
-
-    let content = welcomeEl.nativeElement.textContent;
     expect(content).not.toContain('Welcome', 'not welcomed');
     expect(content).toMatch(/log in/i, '"log in"');
   });
   // #enddocregion tests
 
-  it('orig stub and injected UserService are not the same object', () => {
+  // #docregion inject-it
-    expect(userServiceStub === userService).toBe(false);
+  it('should inject the component\'s UserService instance',
+    inject([UserService], (service: UserService) => {
+    expect(service).toBe(componentUserService);
+  }));
+  // #enddocregion inject-it
+
+  it('TestBed and Component UserService should be the same', () => {
+    expect(userService === componentUserService).toBe(true);
   });
+
+  // #docregion stub-not-injected
+  it('stub object and injected UserService should not be the same', () => {
+    expect(userServiceStub === userService).toBe(false);
+
+    // Changing the stub object has no effect on the injected service
+    userServiceStub.isLoggedIn = false;
+    expect(userService.isLoggedIn).toBe(true);
+  });
+  // #enddocregion stub-not-injected
 });

public/docs/dart/latest/cookbook/_data.json

@@ -60,7 +60,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
+    "intro": "Convert Angular TypeScript examples into ES5 JavaScript",
     "hide": true
   },
 

public/docs/dart/latest/guide/_data.json

@@ -10,7 +10,7 @@
   "architecture": {
     "title": "Architecture Overview",
     "navTitle": "Architecture",
-    "intro": "The basic building blocks of Angular 2 applications",
+    "intro": "The basic building blocks of Angular applications",
     "nextable": true,
     "basics": true
   },
@@ -59,7 +59,7 @@
 
   "style-guide": {
     "title": "Style Guide",
-    "intro": "Write Angular 2 with style.",
+    "intro": "Write Angular with style.",
     "basics": true
   },
 
@@ -92,7 +92,7 @@
 
   "glossary": {
     "title": "Glossary",
-    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
+    "intro": "Brief definitions of the most important words in the Angular vocabulary",
     "basics": true
   },
 
@@ -125,7 +125,7 @@
 
   "router": {
     "title": "Routing & Navigation",
-    "intro": "Discover the basics of screen navigation with the Angular 2 Component Router."
+    "intro": "Discover the basics of screen navigation with the Angular Component Router."
   },
 
   "security": {
@@ -140,13 +140,13 @@
 
   "testing": {
     "title": "Testing",
-    "intro": "Techniques and practices for testing an Angular 2 app",
+    "intro": "Techniques and practices for testing an Angular app",
     "hide": true
   },
 
   "typescript-configuration": {
     "title": "TypeScript Configuration",
-    "intro": "TypeScript configuration for Angular 2 developers",
+    "intro": "TypeScript configuration for Angular developers",
     "hide": true
   },
 
@@ -158,7 +158,7 @@
 
   "webpack": {
     "title": "Webpack: an introduction",
-    "intro": "Create your Angular 2 applications with a Webpack based tooling",
+    "intro": "Create your Angular applications with a Webpack based tooling",
     "hide": true
   }
 }

public/docs/js/latest/cookbook/_data.json

@@ -55,7 +55,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
   },
 
   "visual-studio-2015": {

public/docs/js/latest/guide/_data.json

@@ -10,7 +10,7 @@
   "architecture": {
     "title": "Architecture Overview",
     "navTitle": "Architecture",
-    "intro": "The basic building blocks of Angular 2 applications",
+    "intro": "The basic building blocks of Angular applications",
     "nextable": true,
     "basics": true
   },
@@ -59,7 +59,7 @@
 
   "style-guide": {
     "title": "Style Guide",
-    "intro": "Write Angular 2 with style.",
+    "intro": "Write Angular with style.",
     "basics": true
   },
 
@@ -86,7 +86,7 @@
 
   "glossary": {
     "title": "Glossary",
-    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
+    "intro": "Brief definitions of the most important words in the Angular vocabulary",
     "basics": true
   },
 
@@ -118,7 +118,7 @@
 
   "router": {
     "title": "Routing & Navigation",
-    "intro": "Discover the basics of screen navigation with the Angular 2 router."
+    "intro": "Discover the basics of screen navigation with the Angular router."
   },
 
   "security": {
@@ -133,13 +133,13 @@
 
   "testing": {
     "title": "Testing",
-    "intro": "Techniques and practices for testing an Angular 2 app",
+    "intro": "Techniques and practices for testing an Angular app",
     "hide": true
   },
 
   "typescript-configuration": {
     "title": "TypeScript Configuration",
-    "intro": "TypeScript configuration for Angular 2 developers",
+    "intro": "TypeScript configuration for Angular developers",
     "hide": true
   },
 
@@ -150,7 +150,7 @@
 
   "webpack": {
     "title": "Webpack: an introduction",
-    "intro": "Create your Angular 2 applications with a Webpack based tooling",
+    "intro": "Create your Angular applications with a Webpack based tooling",
     "hide": true
   }
 }

public/docs/ts/latest/cookbook/_data.json

@@ -65,7 +65,7 @@
 
   "ts-to-js": {
     "title": "从TypeScript到JavaScript",
-    "intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript"
+    "intro": "把Angular的TypeScript范例转换为ES5 JavaScript"
   },
 
   "visual-studio-2015": {

public/docs/ts/latest/guide/_data.json

@@ -10,7 +10,7 @@
   "architecture": {
     "title": "架构概览",
     "navTitle": "架构",
-    "intro": "Angular 2应用的基本构造块",
+    "intro": "Angular应用的基本构造块",
     "nextable": true,
     "basics": true
   },
@@ -59,7 +59,7 @@
 
   "style-guide": {
     "title": "风格指南",
-    "intro": "如何写Angular2风格的程序",
+    "intro": "如何写Angular风格的程序",
     "basics": true
   },
 
@@ -90,7 +90,7 @@
 
   "glossary": {
     "title": "词汇表",
-    "intro": "Angular 2重要词汇的简短定义。",
+    "intro": "Angular重要词汇的简短定义。",
     "basics": true
   },
 
@@ -122,7 +122,7 @@
 
   "router": {
     "title": "路由与导航",
-    "intro": "揭示如何通过Angular 2路由进行基本的屏幕导航。"
+    "intro": "揭示如何通过Angular路由进行基本的屏幕导航。"
   },
 
   "security": {
@@ -137,12 +137,12 @@
 
   "testing": {
     "title": "测试",
-    "intro": "Angular 2应用的测试技术与实践。"
+    "intro": "Angular应用的测试技术与实践。"
   },
 
   "typescript-configuration": {
     "title": "TypeScript配置",
-    "intro": "Angular 2开发者的TypeScript配置"
+    "intro": "Angular开发者的TypeScript配置"
   },
 
   "upgrade": {
@@ -152,6 +152,6 @@
 
   "webpack": {
     "title": "Webpack简介",
-    "intro": "使用基于Webpack的工具创建Angular 2应用"
+    "intro": "使用基于Webpack的工具创建Angular应用"
   }
 }

public/docs/ts/latest/guide/testing.jade

@@ -536,7 +536,8 @@ table(width="100%")
 +makeExample('testing/ts/app/1st.spec.ts', '', 'app/1st.spec.ts')(format='.')
 :marked
   ## Run karma
-  ## 运行`Karma`
+  
+  ## 运行Karma
   
   Compile and run it in karma from the command line with this command:
   
@@ -621,14 +622,7 @@ code-example(format="." language="bash").
     The console log can be quite long. Keep your eye on the last line.
     It says `SUCCESS` when all is well.
 
-    控制台的日志可能会非常长。注意最后一样。当一切正常时，它会显示`SUCCESS`。
+    控制台的日志可能会非常长。注意最后一样。当一切正常时，它会显示`SUCCESS`。   
-    
-    If it says `FAILED`, scroll up to look for the error or, if that's too painful,
-    pipe the console output to a file and inspect with your favorite editor.
-
-    如果它显示`FAILED`，往上翻查看错误。如果觉得这样太麻烦，你可以将控制台的输出内容导出到一个文件中，使用你最喜欢的编辑器查看。
-  code-example(format="." language="json").
-    npm test > spec-output.txt
 
 :marked
   ## Test debugging
@@ -640,6 +634,7 @@ code-example(format="." language="bash").
   在浏览器中，像调试应用一样调试测试配置。
 
     - Reveal the karma browser window (hidden earlier).
+    
     - 显示`Karma`的浏览器窗口（之前被隐藏了）。
     
     - Click the "DEBUG" button; it opens a new browser tab and re-runs the tests

public/resources/css/module/_footer.scss

@@ -25,9 +25,10 @@
   }
 
   .logo-inverse-large {
-    background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px no-repeat;
+    background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px / contain no-repeat;
     height: 200px;
     width: 200px;
+    max-width: 100%;
 
     @include respond-to('mobile') {
       display: none;
@@ -79,31 +80,35 @@
   footer {
     text-align: left;
     padding: ($unit * 2) ($unit * 6);
-    position: relative;
+
+    @include respond-to('mobile') {
+      text-align: center;
+    }
+
+    a {
+      color: $snow;
+    }
 
     .styleguide-trigger {
-      box-sizing: border-box;
+      color: $darkgrey;
-      position: absolute;
+      text-decoration: none;
-      display: inline-block;
+      float: right;
-      bottom: $unit * 2;
+      transition: color .3s;
-      right: $unit * 2;
+
-      font-size: 14px;
+      @include respond-to('mobile') {
-      line-height: 24px;
+        display: block;
-      height: 24px;
+        margin-top: $unit;
-      margin: 0;
+        font-size: 18px;
-      padding: 0 ($unit * 3);
+        float: none;
-      opacity: .24;
+      }
-      transition: all .3s;
 
       &:hover {
-        background: $blue-grey-700;
+        color: $red-600;
-        text-decoration: none;
       }
 
       .icon-favorite {
-        display: inline-block;
+        line-height: 20px;
-        line-height: 24px;
       }
     }
   }
-}
+}