import {AppComponent} from './app.component'
Angular 同样是一个模块， 他是一系列模块的集合。 所以当我们需要angular的一些功能时，同样的把Angular引入进来。
组件注解
当我们给一个类加上注解的时候， 一个类就变成了 Angular的组件。 Angular 需要通过注解来搞明白怎么去构建视图， 还有组件是怎么与应用的其他部分进行整合的。
我们用 Componet 方法来定义一个组件的注解， 这个方法需要引入 angular2/core 才可以使用。
import {Component} from 'angular2/core';
在Typescript中，我们在类上面添加注解， 注解的方式很简单，使用 @ 作为前缀进行注解。
@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' })
@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.
selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。
记住这个 my-app 元素，我们会在 index.html 中用到
template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件
初始化引导
在 app 文件夹下创建 main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
我们需要做两个东西来启动这个应用
Angular自带的 bootstrap 方法
我们刚刚写好的启动组件
把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。
附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件
现在万事俱备，只差东风啦！
添加 INDEX.HTML 文件
首先回到项目的根目录，在根目录中创建index.html
<html> <head> <title>Angular 2 QuickStart</title> <meta content="width=device-width, initial-scale=1"> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="https://www.jb51.net/node_modules/es6-shim/es6-shim.min.js"></script> <script src="https://www.jb51.net/node_modules/systemjs/dist/system-polyfills.js"></script> <script src="https://www.jb51.net/node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="https://www.jb51.net/node_modules/systemjs/dist/system.src.js"></script> <script src="https://www.jb51.net/node_modules/rxjs/bundles/Rx.js"></script> <script src="https://www.jb51.net/node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
HMTL中三个部分需要说明一下：
加载我们需要的 javascript库， 附录中会有详细的介绍
配置了 System 并让他import 引入 main 文件
添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！
我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。
SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。
当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。
编译然后运行
只需要在终端中输入
npm start
程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.
最终的结构
|_ angular2-quickstart |_ app | |_ app.component.ts | |_ main.ts |_ node_modules … |_ typings … |_ index.html |_ package.json |_ tsconfig.json |_ typings.json
您可能感兴趣的文章: