共计 2502 个字符，预计需要花费 7 分钟才能阅读完成。
angular2.0 学习笔记
### 1.angular-cli 常用命令记录
详细教程 angular cli 官网 有，这里不详细说明, 感兴趣的可以自行到官网看，一下仅记录本人到学习过程常用到的命令
1. 创建项目 ng new
ng new project-name
exp:
ng new my-app
2. 启动项目 ng serve
参数名
类型
默认值
作用
exp
–port
number
4200
自定义端口
ng serve –port 4201
3. 创建 module
ng generate module module-name
// 简写：
ng g m moduleName
// 新建带对应路由的 module
ng generate module my-module-name –routing
// 简写
ng g m my-module –routing
// 检查创建时检查 module 是否存在
ng g m my-module –spec
4. 创建 component
ng generate component component-name (options)
// 简写
ng g c component-name
// options exp
// 在 src/app 目录下生成 component-name 组件
ng g c component-name –flat true
以下是 components options 说明
参数
类型
默认值
作用
–flat
boolean
false
在 src/app 目录下生成 component 文件，而不是在当前目录下
–inline-template
boolean
false
使用 inline template 而不是独立的 html template 文件
–inline-style
boolean
false
使用 inline style，而不是独立的 style 文件
–spec
boolean
false
是否生成 component 对应的 spec 单元测试 ts 文件
5. 创建指令 ng directive
ng generate directive my-directive (options)
// 简写
ng g d my-directive
// options exp
// 在 src/app 目录下生成 my-directive 指令
ng g d my-directive –flat true
ng directive 指令 options 参数 说明
参数
类型
默认值
作用
–flat
boolean
false
在 src/app 目录下生成 derective 文件，而不是在当前目录下
–spec
boolean
false
是否生成 directive 对应的 spec 单元测试 ts 文件
6. 创建 service
ng generate service service-name (options)
// 简写
ng g s service-name
ng service options 说明
参数
类型
默认值
作用
–flat
boolean
false
在 src/app 目录下生成 service 文件，而不是在当前目录下
–spec
boolean
false
是否生成 service 对应的 spec 单元测试 ts 文件
7. 构建 ng build
ng build
// 设置 输出文件位置 为 myDist 文件夹
ng build –output-path myDist
2.angular(简称 ng) 笔记 一下
此笔记不会从 0 到 1 讲解，仅做为记录本人学习 angular2.x 以上版本到学习笔记，如有问题可以提问，希望我遇到到问题可以帮助到你到学习，如有一切不理解到问题，请移步到 angular 官方文档 或 angular 中文文档 查看更详细的说明
由于本人原先是使用 vuejs 和 reactjs 为主，所以有很多时候都是以 vue 作为对比例子理解，如有说得不清楚的，欢迎提 bug。
ng 架构 主要由 4 大部分组成
ng 架构
模块
组件
服务与依赖注入
路由
2. 模块 ng 的模块，理解起来跟我以前理解的模块还真不一样。ng 模块需要通过 NgModule 去定义，而且 ng 的模块在我的理解概念上是一个相对独立的集合体，模块声明了当前模块使用到的相关组件、指令、管道、服务和一些编译配置。对比与 vue 的组件理解，ng 模块显得略为有点麻烦，但也更为清楚的表达了模块和组件的关系，组件和模块不是一个意思。vue 的模块，更多时候是 vue 工程已经帮开发者处理好了，不用自己去定义模块，只需要关注组件业务开发即可。当然，vue 的组件也是需要注册到 vue 对象里面到，可以在全局注册，也可以注册到当前使用到组件，在组件注册这里，vue 和 ng 都是一样需要手动注册。
import {NgModule} from ‘@angular/core’;
import {BrowserModule} from ‘@angular/platform-browser’;
@NgModule({
imports: [BrowserModule], // 本模块需要注入的其他模块‘
/*
* export
* 本模块导出的组件、指令、管道，如果其他模块引入了本模块，在其他模块可以直接使用本模块输出的组件、指令和管道
*/
exports: [],
// providers 本模块向全局服务中贡献的服务创建器，本人暂时也不知道是啥，后期研究明白了再单独写一篇补上吧
providers: [Logger],
// bootstrap 指定了本模块启动时，应该启动的组件
bootstrap: [],
// id 模块 ID, 用于使用 getModuleFactory 区分模块
id: ‘myApp’
})
export class AppModule {}
以上注解有部分借鉴于石头皮的 ANGULAR2_NGMODULE 模块详解
3. 组件 ng 的组件，就是但存的组件，跟 vue 的组件是类似的东西。只不过 ng 的组件需要 @Component 装饰器定义一些组件配置，包括 selector, template/templateUrl, providers, styles/styleUrls 等。然后组件保安有模版、指令、数据绑定、管道 (filter)、事件 / 属性绑定、
4. 服务与依赖注入 这个其实与 angularjs 差别不大，服务还是可以用于组件之间的数据通讯，注入让服务更灵活，需要时注入。
5. 路由 定义导航的规则，并且把导航与组件或 module 关联起来。