Angular 2（一）： 概览

新特性

1. 全新的命令行工具 angular-cli

2. 服务端渲染

  • 缩短页面从启动到完整展现的时间
  • 解决seo问题

3. 提供了标准的UI库（Material Design），使桌面和移动程序兼容

4. 核心：组件、服务、指令 =>功能, 模块=>打包

工程目录关键文件介绍

1. .angular-cli.json

angular 命令行工具配置文件，Angular应用程序启动的入口，引入第三方库需要在此处配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"apps": [
    {
      "root": "src",
      //配置外部css文件
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      //配置外部js文件
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",    //配置JQ,注意路径问题，以root为基地址
        "../node_modules/bootstrap/dist/js/bootstrap.js"   
      ],
    }
  ],

工程模块介绍

1. @Component， 装饰器

  • 用来告知框架如何处理一个ts类
  • Component中所有属性的值称为元数据
  • Angular根据元数据渲染组件，并实现控制器的逻辑

2. Template，模板，可以简单地理解为可使用Angular数据绑定机制的html片段

3.Controller，控制器

  • 被@Component装饰器用来装饰
  • 通过数据绑定和模板通信

模块（NgModel）相关介绍

1. declarations，我们定义的组件、指令、管道需要放在此处声明

1
2
3
4
declarations: [
    AppComponent,
    ProductComponent,
],

2. imports，声明应用正常运转需要的模块，也即：AppModule所依赖的模块

1
2
3
4
5
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
],

3. provides，相关服务放在此种声明

1
2
3
providers: [
    HttpService，    //服务类名称
],

4. bootstrap，声明启动组件

1
2
3
bootstrap: [
    AppComponent，
]