Update GettingStarted for alpha-40 with @View merged into @Component
This commit is contained in:
parent
a63e6583f7
commit
53597ab601
|
@ -14,7 +14,7 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.39",
|
||||
"angular2": "2.0.0-alpha.40",
|
||||
"systemjs": "0.19.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
// #docregion
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {Component, View, bootstrap} from 'angular2/core';
|
||||
|
||||
@Component({selector: 'my-app'})
|
||||
@View({template: '<h1>My First Angular 2 App</h1>'})
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent { }
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
// #docregion
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {Component, View, bootstrap} from 'angular2/core';
|
||||
|
||||
@Component({selector: 'my-app'})
|
||||
@View({template: '<h1>My First Angular 2 App</h1>'})
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent { }
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<title>Getting Started</title>
|
||||
<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/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>
|
||||
System.config({
|
||||
transpiler: 'typescript',
|
||||
|
|
|
@ -59,16 +59,18 @@ include ../../../../_includes/_util-fns
|
|||
in the transpiled JavaScript and responds appropriately.
|
||||
:markdown
|
||||
`@Component` tells Angular that this class *is an Angular component*.
|
||||
The configuration object passed to the `@Component` method
|
||||
specifies a CSS selector for an HTML element named `my-app`.
|
||||
When Angular sees `my-app`, it will know to
|
||||
create and display an instance of our component.
|
||||
The configuration object passed to the `@Component` method has two
|
||||
field, a `selector` and a `template`.
|
||||
|
||||
`@View` is another decoration that describes how our
|
||||
component renders on the screen. This one is dead simple,
|
||||
a single line of HTML announcing "My First Angular App".
|
||||
The `selector` specifies a CSS selector for a custom HTML element named `my-app`.
|
||||
Angular creates and displays an instance of our `AppComponent`
|
||||
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.
|
||||
We'd be correct to guess that someday our application will
|
||||
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:
|
||||
+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
|
||||
## Final structure
|
||||
Our final project folder structure should look like this:
|
||||
```
|
||||
angular2-getting-started
|
||||
├── node_modules
|
||||
├── src
|
||||
│ ├── app
|
||||
| │ └── app.ts
|
||||
│ ├── typings
|
||||
│ │ └──tsd.d.ts
|
||||
│ ├── index.html
|
||||
│ └── tsconfig.json
|
||||
│ ├── app
|
||||
| │ └── app.ts
|
||||
│ ├── typings
|
||||
│ │ └──tsd.d.ts
|
||||
│ ├── index.html
|
||||
│ └── tsconfig.json
|
||||
└── package.json
|
||||
```
|
||||
|
||||
|
|
|
@ -111,8 +111,6 @@
|
|||
|
||||
@Component({
|
||||
selector: 'todo-list'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<ul>
|
||||
<li *ngfor="#todo of todos">
|
||||
|
|
Loading…
Reference in New Issue