docs(quickstart): app says "Hello Angular!" instead of "My first..." (#2760)
This commit is contained in:
parent
8fafa8a01e
commit
a46cba06f0
|
@ -5,7 +5,7 @@ import 'package:angular2/core.dart';
|
|||
// #docregion metadata
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular App</h1>')
|
||||
template: '<h1>Hello Angular!</h1>')
|
||||
// #enddocregion metadata
|
||||
// #docregion class
|
||||
class AppComponent {}
|
||||
|
|
|
@ -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';
|
||||
|
||||
describe('QuickStart E2E Tests', function () {
|
||||
|
||||
let expectedMsg = 'My First Angular App';
|
||||
let expectedMsg = 'Hello Angular!';
|
||||
|
||||
beforeEach(function () {
|
||||
browser.get('');
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
ng.core.Component({
|
||||
// #enddocregion ng-namespace-funcs
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular App</h1>'
|
||||
template: '<h1>Hello Angular!</h1>'
|
||||
// #docregion ng-namespace-funcs
|
||||
})
|
||||
// #enddocregion component
|
||||
|
|
|
@ -6,7 +6,7 @@ import { Component } from '@angular/core';
|
|||
// #docregion metadata
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular App</h1>'
|
||||
template: '<h1>Hello Angular!</h1>'
|
||||
})
|
||||
// #enddocregion metadata
|
||||
// #docregion class
|
||||
|
|
|
@ -20,7 +20,7 @@ include _util-fns
|
|||
and displays a simple message:
|
||||
|
||||
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
|
||||
Here is the file structure:
|
||||
.filetree
|
||||
|
@ -208,7 +208,7 @@ code-example(format="").
|
|||
:marked
|
||||
The `template` property holds the component's companion template.
|
||||
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.
|
||||
|
||||
|
@ -299,7 +299,7 @@ code-example(format="").
|
|||
In a few moments, a browser tab should open and 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
|
||||
Congratulations! We are in business.
|
||||
|
@ -311,7 +311,7 @@ figure.image-display
|
|||
:marked
|
||||
### 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,
|
||||
refresh the browser, and display the revised message.
|
||||
|
|
|
@ -33,7 +33,7 @@ block includes
|
|||
and displays the simple message:
|
||||
|
||||
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
|
||||
# Build this app!
|
||||
|
@ -290,7 +290,7 @@ p.
|
|||
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.
|
||||
|
||||
>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
|
||||
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
|
||||
|
||||
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
|
||||
**Great job!**
|
||||
|
@ -556,7 +556,7 @@ block build-app
|
|||
:marked
|
||||
## Make some changes
|
||||
|
||||
Try changing the message to "My SECOND Angular app".
|
||||
Try changing the message to "Hello Angular 2!".
|
||||
block server-watching
|
||||
:marked
|
||||
The TypeScript compiler and `lite-server` are watching.
|
||||
|
|
|
@ -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=".")
|
||||
|
||||
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
|
||||
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='.')
|
||||
:marked
|
||||
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.
|
||||
|
||||
The **styleUrls** array specifies the location(s) of the component's private CSS style file(s).
|
||||
|
|
|
@ -30,7 +30,7 @@ aside.is-right
|
|||
displays the simple message:
|
||||
|
||||
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
|
||||
**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:
|
||||
|
||||
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
|
||||
|
@ -332,7 +332,7 @@ block build-app
|
|||
.l-main-section#make-changes
|
||||
h1 Step !{step++}: Make some live changes
|
||||
: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
|
||||
:marked
|
||||
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 |
Loading…
Reference in New Issue