Angular2 QUICKSTART 学习笔记

官网地址：https://angular.io/docs/ts/latest/quickstart.html

环境

1. package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.0",
    "@angular/compiler":  "2.0.0-rc.0",
    "@angular/core":  "2.0.0-rc.0",
    "@angular/http":  "2.0.0-rc.0",
    "@angular/platform-browser":  "2.0.0-rc.0",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
    "@angular/router-deprecated":  "2.0.0-rc.0",
    "@angular/upgrade":  "2.0.0-rc.0",

    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.5",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

npm：Node Packaged Modules的简称
package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

2. tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

这个文件用来指导Typescript进行编译。
angular2使用Typescript进行开发，虽然也有Javascript的开发方式（官网有指导说明），但是要复杂得多。

3. typings.json

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}

有很多Javascript的库，继承了一些 Javascript的环境变量以及语法， Typescript编译器并不能原生的支持这些。所以我们使用 Typescript 类型定义文件 - d.ts文件（即 typings.json）来解决这些兼容性问题

将以上三个文件，放置到项目文件夹的根目录下，终端定位到项目文件夹，输入npm install，环境就配好啦。

文件

1. app.component.ts

在app目录下新建组件文件app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: 'My First Angular 2 App'
})
export class AppComponent { }

（1）Angular应用是模块化的。他们包含很多文件，每一个文件专注于完成一项功能。大多数程序文件会export出一个组件。我们的 app.component.ts 文件 exports出了 AppComponent这个组件。

（2）exports使一个文件转变成一个模块。文件名（不包含扩展名）通常就是这个模块的名称。所以， app.component 就是我们的第一个模块的名称。

export class AppComponent { }

（3）组件之间相互调用，如果一个组件依赖于其他组件，则用import导入

import {AppComponent} from './app.component'

import {Component} from 'angular2/core';

Angular同样是一个模块，他是一系列模块的集合。使用Component组件中的函数定义需要导入Angular的核心包。

（4）

@Component({ 
    selector: 'my-app', 
    template: 'My First Angular 2 App'
})

@Component表示该类是一个组件类。传递给@Component的是两个字段，一个selector，一个template。
selector是一个 css 选择器，这里表示选择 html 标签为 my-app的元素。Angular 将会在这个元素里面展示AppComponent 组件。
的实例。
template控制这个组件的视图，告诉Angular怎么去渲染这个视图。

2. main.ts

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

bootstrap是Angular自带的方法，我们导入它，并且将AppComponent传给它，用来启动AppComponent组件。

3. index.html


  
    Angular 2 QuickStart
    
    
    

    
     
    

    
    
    

    
    
    
  

  
  
    Loading...

（1）前面添加了许多js的依赖库
（2）配置了 System 并让他import 引入 main 文件
（3）添加 my-app 这个HTML元素

所以运行过程为：
当Angular调用main.ts文件中的 bootstrap方法，它读取 AppComponent，找到 my-app 这个HTML元素，并将template 渲染进去。
启动：在项目文件目录下，运行npm start.
程序将会将Typescript编译成 Javascript ，同时启动一个 lite-server，加载我们编写的index.html。显示 My First Angular 2 App.