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
|
// #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 {}
|
||||||
|
|
|
@ -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('');
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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).
|
||||||
|
|
|
@ -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 |
Loading…
Reference in New Issue