标签：
该文档为Angular2的入门文档，可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序，通过该文档可以初步了解Angular2的相关知识以及开发流程，同时搭建一套可用的开发环境。
环境：
node v6.2.2
typescript v1.8.2
angular2 rc4
visual studio code
如果机器上还木有node环境，请安装最新的node环境。
创建一个文件夹 名称为 ng2-helloworld
往项目目录下添加下列包定义与配置文件：
|
{ "name": "ng2-helloworld", "version": "1.0.0", "description": "hello world", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.1",
"systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12",
"bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.10" } } |
|
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } } |
|
/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function (global) { // map tells the System loader where to look for things var map = { ‘app‘: ‘app‘, // ‘dist‘, ‘@angular‘: ‘node_modules/@angular‘, ‘rxjs‘: ‘node_modules/rxjs‘ }; // packages tells the System loader how to load when no filename and/or no extension var packages = { ‘app‘: { main: ‘main.js‘, defaultExtension: ‘js‘ }, ‘rxjs‘: { defaultExtension: ‘js‘ } }; var ngPackageNames = [ ‘common‘, ‘compiler‘, ‘core‘, ‘forms‘, ‘http‘, ‘platform-browser‘, ‘platform-browser-dynamic‘, ‘router‘ ]; // Individual files (~300 requests): function packIndex(pkgName) { packages[‘@angular/‘ + pkgName] = { main: ‘index.js‘, defaultExtension: ‘js‘ }; } // Bundled (~40 requests): function packUmd(pkgName) { packages[‘@angular/‘ + pkgName] = { main: ‘/bundles/‘ + pkgName + ‘.umd.js‘, defaultExtension: ‘js‘ }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this); |
npm install 来安装对应的依赖包
安装完成以后就可以开始写代码了
在ng2-helloworld 创建一个文件夹 app，在app文件夹下创建文件app.ts如下所示：
|
import { Component } from ‘@angular/core‘;
@Component({ selector: ‘app‘, template:‘<h1>hello world</h1>‘ }) export class AppComponent {
} |
AppComponent 是应用的根组件，每个 Angular 应用都至少有一个根组件 ，它是放用户界面的容器。 组件是 Angular 应用程序中最基本的模块，组件通过它所关联的模板，控制视图。
一个组件包括三个基本部分：
l 一个或多个 import 语句来引入所需的文件。
l 一个 @Component 装饰器 来告诉 Angular ，使用哪个模板，以及怎样创建这个组件。
l 一个 组件类 来通过它的模板控制一个视图的外观和行为。
(1). 导入
Angular 应用都是模块化的，它们由很多职责明确的文件组成。 Angular 本身也是模块化的。它包括一系列的库模块，这些模块包括了一系列相关的特性，以便拿来构建应用程序。
当需要一个模块中的某些东西时，引入 (import) 它。 在这里，我们导入了 Angular 2 核心库，以便组件代码访问 @Component 装饰器。
(2). @Component
Component 是一个 装饰器函数 ，它接受一个 元数据对象 作为参数。 通过给这个函数加上 @ 前缀，并使用 metadata 对象调用它，能够把 元数据 关联到组件类上。这些元数据会告诉 Angular 如何创建和使用组件类。
这里的这个元数据对象有两个字段：一个 selector ，一个 template 。
selector：指定了一个简单的 CSS 选择器，用于指出放置此组件的 HTML 元素。在此
template：指定了此组件的模板。 它用一种增强的 HTML 形式写成，用来告诉 Angular 如何渲染此组件的视图。模板中只有一行 HTML ：“ My First Angular App ”。模板还可以包含更加复杂的语法，准确来说，一个Angular应用就是一个组件树。
(3). Component 类
文件的最底下，是一个空的，什么也不做的类，叫做 AppComponent 。
打算构建一个真实的应用时，通过添加属性和应用逻辑来扩展这个类。导出 AppComponent，以便在应用的其它地方 导入。
在app 文件夹创建一个文件 main.ts ，用来启动Angular程序
|
import { bootstrap } from ‘@angular/platform-browser-dynamic‘; import { AppComponent } from ‘./app’;
bootstrap(AppComponent) .then(success => console.log(`Bootstrap success`)) .catch(error => console.log(error)); |
我们引入了两样东西来启动本应用：
然后，调用 bootstrap 函数，并且把 AppComponent 传进去。启动函数与应用程序是两个相互分离的关注点。
在ng2-helloworld 创建一个文件 index.html 作为Angular程序的宿主页面。
|
<html> <head> <title>hello world</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import(‘app‘).catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <app>Loading...</app> </body> </html> |
这段儿 HTML 值得注意的有：
l 引入JavaScript 库，首先引入 es6-shim ，它会给全局对象 window 打上补丁，使其支持 ES2015(ES6) 的必备特性。然后是 Angular 中使用的zone.js 和 reflect-metadata ，最后是用于模块加载的 SystemJS 库。
l 配置 SystemJS ，以便引入和运行刚才写的 main 文件。
l <body> 中的 <app> 标签是引入根应用程序组件。
打开终端窗口，并输入如下命令：
npm start
这个命令运行两个并行的 node 进程
TypeScript 编译器，运行在监视 (watch) 模式
一个名叫 lite-server 的静态服务器，它把 index.html 加载到浏览器中
标签：
原文地址：http://www.cnblogs.com/SLchuck/p/5672192.html
