docs(quickstart): app says "Hello Angular!" instead of "My first..." (#2760)

This commit is contained in:
Ward Bell 2016-11-05 13:12:11 -07:00 committed by GitHub
parent 8fafa8a01e
commit a46cba06f0
9 changed files with 18 additions and 18 deletions

View File

@ -5,7 +5,7 @@ import 'package:angular2/core.dart';
// #docregion metadata // #docregion metadata
@Component( @Component(
selector: 'my-app', selector: 'my-app',
template: '<h1>My First Angular App</h1>') template: '<h1>Hello Angular!</h1>')
// #enddocregion metadata // #enddocregion metadata
// #docregion class // #docregion class
class AppComponent {} class AppComponent {}

View File

@ -1,10 +1,10 @@
'use strict'; // necessary for es6 output in node 'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor'; import { browser, element, by } from 'protractor';
describe('QuickStart E2E Tests', function () { describe('QuickStart E2E Tests', function () {
let expectedMsg = 'My First Angular App'; let expectedMsg = 'Hello Angular!';
beforeEach(function () { beforeEach(function () {
browser.get(''); browser.get('');

View File

@ -10,7 +10,7 @@
ng.core.Component({ ng.core.Component({
// #enddocregion ng-namespace-funcs // #enddocregion ng-namespace-funcs
selector: 'my-app', selector: 'my-app',
template: '<h1>My First Angular App</h1>' template: '<h1>Hello Angular!</h1>'
// #docregion ng-namespace-funcs // #docregion ng-namespace-funcs
}) })
// #enddocregion component // #enddocregion component

View File

@ -6,7 +6,7 @@ import { Component } from '@angular/core';
// #docregion metadata // #docregion metadata
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: '<h1>My First Angular App</h1>' template: '<h1>Hello Angular!</h1>'
}) })
// #enddocregion metadata // #enddocregion metadata
// #docregion class // #docregion class

View File

@ -20,7 +20,7 @@ include _util-fns
and displays a simple message: and displays a simple message:
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of quickstart app")
:marked :marked
Here is the file structure: Here is the file structure:
.filetree .filetree
@ -208,7 +208,7 @@ code-example(format="").
:marked :marked
The `template` property holds the component's companion template. The `template` property holds the component's companion template.
A template is a form of HTML that tells Angular how to render a view. A template is a form of HTML that tells Angular how to render a view.
Our template is a single line of HTML announcing "My First Angular App". Our template is a single line of HTML announcing "Hello Angular!".
Now we need something to tell Angular to load this component. Now we need something to tell Angular to load this component.
@ -299,7 +299,7 @@ code-example(format="").
In a few moments, a browser tab should open and display In a few moments, a browser tab should open and display
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of quickstart app")
:marked :marked
Congratulations! We are in business. Congratulations! We are in business.
@ -311,7 +311,7 @@ figure.image-display
:marked :marked
### Make some changes ### Make some changes
Try changing the message to "My SECOND Angular app". Try changing the message to "Hello Angular 2!".
`lite-server` is watching, so it should detect the change, `lite-server` is watching, so it should detect the change,
refresh the browser, and display the revised message. refresh the browser, and display the revised message.

View File

@ -33,7 +33,7 @@ block includes
and displays the simple message: and displays the simple message:
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
:marked :marked
# Build this app! # Build this app!
@ -290,7 +290,7 @@ p.
The **template** specifies the component's companion template, The **template** specifies the component's companion template,
written in an enhanced form of HTML that tells Angular how to render this component's view. written in an enhanced form of HTML that tells Angular how to render this component's view.
>Our template is a single line of HTML announcing "*My First Angular App*". >Our template is a single line of HTML announcing "Hello Angular!".
>A more advanced template could contain data bindings to component properties >A more advanced template could contain data bindings to component properties
and might identify other application components which have their own templates. and might identify other application components which have their own templates.
@ -545,7 +545,7 @@ block run-app
In a few moments, a browser tab should open and display In a few moments, a browser tab should open and display
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
:marked :marked
**Great job!** **Great job!**
@ -556,7 +556,7 @@ block build-app
:marked :marked
## Make some changes ## Make some changes
Try changing the message to "My SECOND Angular app". Try changing the message to "Hello Angular 2!".
block server-watching block server-watching
:marked :marked
The TypeScript compiler and `lite-server` are watching. The TypeScript compiler and `lite-server` are watching.

View File

@ -108,7 +108,7 @@ h2#first-component Step 4: Edit our first Angular component
+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".") +makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".")
figure.image-display figure.image-display
img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/cli-quickstart/hello-angular.png' alt="Output of QuickStart app")
:marked :marked
Looking good! Looking good!
@ -199,7 +199,7 @@ h3#component-decorator @Component decorator
+makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.') +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.')
:marked :marked
The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's
`title` property. After out edit, Angular displays _My First Angular 2 App_. `title` property. After out edit, Angular displays "Hello Angular!".
We'll learn more about data binding as we read through the documentation. We'll learn more about data binding as we read through the documentation.
The **styleUrls** array specifies the location(s) of the component's private CSS style file(s). The **styleUrls** array specifies the location(s) of the component's private CSS style file(s).

View File

@ -30,7 +30,7 @@ aside.is-right
displays the simple message: displays the simple message:
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
:marked :marked
**Try it out**. Here's a link to a <live-example></live-example>. **Try it out**. Here's a link to a <live-example></live-example>.
@ -323,7 +323,7 @@ aside.is-right
In a few moments, a browser tab should open and display the following: In a few moments, a browser tab should open and display the following:
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
block build-app block build-app
@ -332,7 +332,7 @@ block build-app
.l-main-section#make-changes .l-main-section#make-changes
h1 Step !{step++}: Make some live changes h1 Step !{step++}: Make some live changes
:marked :marked
Try changing the message in `app/app.component.ts` to "My SECOND Angular App". Try changing the message in `app/app.component.ts` to "Hello Angular 2!".
block server-watching block server-watching
:marked :marked
The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript, The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB