Angular2 学习笔记

发表于

Angular2

核心概念

组件

ng2核心三个概念

1.组件
2.路由
3.

采用单向数据流，抛弃了 $diget
祖建树引入不可变数据类型，组件树生成器

3.NgModule

原因：优化，文化体积和请求数量需要考虑平衡

  • 打包
  • 动态加载
  • declarations：
    imports：导入文件
    providers
    bootstrap

3.路由

独立模块，独立演进。

静态路由，
Component

动态路由
loadChildren

DI 依赖注入

  • 每一个HTML标签上面都有一个注射器实力
  • 通过constructor

  • @Injectable 是 @Compoment

  • 工作原理

DataBingd

资料

UI库

NiceFish

构建部署

1
npm build --prod

组件模块

组件通讯： @input,@output,service[单例，同一个实例],路由

组件的生命周期钩子

  1. OnInit
    2.AfterContentInit
    3.AfterViewInit
    4.OnChanges
    5.DoCheck
    6.AfterContentChecked
    7.AfterViewChecked
    8.OnDestroy

脑图

工具 Angular-CLI 安装

1
2
3
cnpm install angular-cli -g
ng help

新建项目

1
2
3
4
5
6
ng new hello-world
cnpm install
ng serve // default port 4200 启动服务 包比较大
ng serve --prod --aot // 最小化编译 z最新版本自动添加 --aot[预编译器]

问题笔记

环境变量 win7.x64 nodejs:6.3.9

1
2
3
4
5
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined

解决办法：重新安装 ，angular-cli目前还不稳定处于beta版本[2017/02/18]

1
2
cnpm install angular-cli
cnpm install

  1. @NgModule declarations 需要引用router中引用的模块
1
Component ForgetPwdComponent is not part of any NgModule or the module has not been imported into your module. ; Zone: <root> ; Task: Promise.then ; Value
  1. mock-data 文件无法编译获取
1
2
3
4
5
6
7
8
// angular-cli.json assets
{
  "assets": [
          "assets",
          "favicon.ico",
          "mock-data"
  ]  
}

angular-cli assets

资料