Update GettingStarted for alpha-40 with @View merged into @Component

This commit is contained in:
Ward Bell 2015-10-12 18:35:39 -07:00
parent a63e6583f7
commit 53597ab601
6 changed files with 42 additions and 24 deletions

View File

@ -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": {

View File

@ -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);

View File

@ -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);

View File

@ -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',

View File

@ -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
``` ```

View File

@ -111,8 +111,6 @@
@Component({ @Component({
selector: 'todo-list' selector: 'todo-list'
})
@View({
template: ` template: `
&lt;ul&gt; &lt;ul&gt;
&lt;li *ngfor="#todo of todos"&gt; &lt;li *ngfor="#todo of todos"&gt;