Update GettingStarted for alpha-40 with @View merged into @Component
This commit is contained in:
parent
a63e6583f7
commit
53597ab601
|
@ -14,7 +14,7 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular2": "2.0.0-alpha.39",
|
"angular2": "2.0.0-alpha.40",
|
||||||
"systemjs": "0.19.2"
|
"systemjs": "0.19.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
// #docregion
|
// #docregion
|
||||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
import {Component, View, bootstrap} from 'angular2/core';
|
||||||
|
|
||||||
@Component({selector: 'my-app'})
|
@Component({
|
||||||
@View({template: '<h1>My First Angular 2 App</h1>'})
|
selector: 'my-app',
|
||||||
|
template: '<h1>My First Angular 2 App</h1>'
|
||||||
|
})
|
||||||
class AppComponent { }
|
class AppComponent { }
|
||||||
|
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
// #docregion
|
// #docregion
|
||||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
import {Component, View, bootstrap} from 'angular2/core';
|
||||||
|
|
||||||
@Component({selector: 'my-app'})
|
@Component({
|
||||||
@View({template: '<h1>My First Angular 2 App</h1>'})
|
selector: 'my-app',
|
||||||
|
template: '<h1>My First Angular 2 App</h1>'
|
||||||
|
})
|
||||||
class AppComponent { }
|
class AppComponent { }
|
||||||
|
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Getting Started</title>
|
<title>Getting Started</title>
|
||||||
<script src="https://code.angularjs.org/tools/system.js"></script>
|
<script src="https://code.angularjs.org/tools/system.js"></script>
|
||||||
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-alpha.39/angular2.dev.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-alpha.40/angular2.dev.js"></script>
|
||||||
<script>
|
<script>
|
||||||
System.config({
|
System.config({
|
||||||
transpiler: 'typescript',
|
transpiler: 'typescript',
|
||||||
|
|
|
@ -59,16 +59,18 @@ include ../../../../_includes/_util-fns
|
||||||
in the transpiled JavaScript and responds appropriately.
|
in the transpiled JavaScript and responds appropriately.
|
||||||
:markdown
|
:markdown
|
||||||
`@Component` tells Angular that this class *is an Angular component*.
|
`@Component` tells Angular that this class *is an Angular component*.
|
||||||
The configuration object passed to the `@Component` method
|
The configuration object passed to the `@Component` method has two
|
||||||
specifies a CSS selector for an HTML element named `my-app`.
|
field, a `selector` and a `template`.
|
||||||
When Angular sees `my-app`, it will know to
|
|
||||||
create and display an instance of our component.
|
|
||||||
|
|
||||||
`@View` is another decoration that describes how our
|
The `selector` specifies a CSS selector for a custom HTML element named `my-app`.
|
||||||
component renders on the screen. This one is dead simple,
|
Angular creates and displays an instance of our `AppComponent`
|
||||||
a single line of HTML announcing "My First Angular App".
|
wherever it encounters a `my-app` element.
|
||||||
|
|
||||||
The `bootstrap` line tells Angular to start the application with this
|
The `template` field is the component's companion template
|
||||||
|
that tells Angular how to render a view.
|
||||||
|
Our template is a single line of HTML announcing "My First Angular App".
|
||||||
|
|
||||||
|
The `bootstrap` method tells Angular to start the application with this
|
||||||
component at the application root.
|
component at the application root.
|
||||||
We'd be correct to guess that someday our application will
|
We'd be correct to guess that someday our application will
|
||||||
consist of more components arising in tree-like fashion from this root.
|
consist of more components arising in tree-like fashion from this root.
|
||||||
|
@ -350,18 +352,32 @@ include ../../../../_includes/_util-fns
|
||||||
**Change to the `src` folder and create a `tsconfig.json`** file with the following content:
|
**Change to the `src` folder and create a `tsconfig.json`** file with the following content:
|
||||||
+makeJson('gettingstarted/ts/src/tsconfig.json', null, 'tsconfig.json')
|
+makeJson('gettingstarted/ts/src/tsconfig.json', null, 'tsconfig.json')
|
||||||
|
|
||||||
|
.alert.is-helpful
|
||||||
|
:markdown
|
||||||
|
When the `noImplicitAny` flag is `true`, the compiler demands that we supply type information
|
||||||
|
unless the compiler can infer the type. It won't allow an identifier to default to the `any` type.
|
||||||
|
This setting is a preference, not a mandate.
|
||||||
|
|
||||||
|
Many of us prefer `noImplicitAny` because we want the TypeScript compiler to enforce type-safety vigorously.
|
||||||
|
That's one of the reasons we are writing our app in TypeScript.
|
||||||
|
Other people set this flag to `false` because they prefer more relaxed type checking.
|
||||||
|
Folks new to TypeScript are sometimes overwhelmed by the rigor;
|
||||||
|
they too may set the flag to `false` .. while they learn.
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
:markdown
|
:markdown
|
||||||
|
## Final structure
|
||||||
Our final project folder structure should look like this:
|
Our final project folder structure should look like this:
|
||||||
```
|
```
|
||||||
angular2-getting-started
|
angular2-getting-started
|
||||||
├── node_modules
|
├── node_modules
|
||||||
├── src
|
├── src
|
||||||
│ ├── app
|
│ ├── app
|
||||||
| │ └── app.ts
|
| │ └── app.ts
|
||||||
│ ├── typings
|
│ ├── typings
|
||||||
│ │ └──tsd.d.ts
|
│ │ └──tsd.d.ts
|
||||||
│ ├── index.html
|
│ ├── index.html
|
||||||
│ └── tsconfig.json
|
│ └── tsconfig.json
|
||||||
└── package.json
|
└── package.json
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -111,8 +111,6 @@
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'todo-list'
|
selector: 'todo-list'
|
||||||
})
|
|
||||||
@View({
|
|
||||||
template: `
|
template: `
|
||||||
<ul>
|
<ul>
|
||||||
<li *ngfor="#todo of todos">
|
<li *ngfor="#todo of todos">
|
||||||
|
|
Loading…
Reference in New Issue