概念

• 组件：是angular应用的基本构建快，你可以把组件理解为一段带有业务逻辑和数据的HTML
• 模块：模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元
• 路由：

命令

• ng new appName ————生存新项目

  • 注意：生成项目同时会下载npm依赖，如果失败需要换代理《nrm》

• ng serve --open ————启动服务器并监听文件变化， --open（或 -o）打开浏览器

• npm install -g @angular/cli ————安装最新版本

• npm install -g @angular/cli@1.5.2 ————安装指定版本 1.5.2

• npm uninstall -g @angular/cli ————卸载

• ng serve --port 4202 ————以4202端口打开服务

angular-cli

• ng -v ————查看angular cli版本
• ng new xxx ————新建项目名称为XXX
• ng generate component xxx ————生成组件
• ng build ————打包项目
  • ng build --prod ————打包项目并且压缩
  • 注意：在最新版本ng6+ 的cli加上--prod参数就自动AOT了
• ng test ————单元测试

类型描述文件

• 目的：让typescript认识jQuery和bootstrap，可以在ts文件中调用
• 安装本地
  • npm install @types/jquery --save-dev
  • npm install @types/bootstrap --save-dev

组件

• 值绑定[src]、事件绑定(click)、双向绑定[()]

• 内置结构指令

  • *ngIf、 *ngFor、 ngSwitch

• 内置属性指令

  • NGClass、NgStyle、NgModel
  • ==注意：NgModel只能用在表单上，一般结合双休绑定[(Ngmodel)]使用==

• 管道 过滤作用

  • public currentTime: Date = new Date(); //将currentTime过滤成指定格式

• 安全导航

  • {{currentRace?.name}} // 如果currentRace没有name这个值则显示空,不会报错

• 组件通讯

  • 父子组件之间交互（@Input/@Output/模板变量/@ViewChild）
  • 非父子组件之间的交互（Service/localStorage）
  • 还可以利用Session、路由参数来进行通讯、请展开自己想象

模块

路由

• routers 路由配置，保存着哪个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件
• RouterOutlet 在HTML中标记路由内容呈现位置的占位符
• Router 负责在运行时执行的路由对象，可以通过调用navigate()和navigateByUrl()方法导航一个指定路由
• RouterLink 在Html中声明路由导航用的指令
• ActivatedRoute 当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等。

• 传路由参数

  • 值绑定[queryParams]='{id:1}'

• 接路由参数

  • ActivatedRoute

• 重定向路由

  • 主要用途路由后面为空的时候默认为主页
  • {path:'',redirectTo:'/home',pathMatch:'full'}

依赖注入

• providers————提供者
• Servic————服务
  • Angular 里面的 Service 与后端框架里面的 Service 设计思想是一致的：
  • Service 应该是无状态的。
  • Service 应该可以被很多组件复用，不应该和任何组件紧密相关。
  • 多个 Service 可以组合起来，实现更复杂的服务。
  • 如果你希望 Service 是全局单例的，需要把它定义到根模块里面。

使用

• 注入器
  • constructor(private productService:ProductService){...}
    • angular中只能用构造器注入服务
• 提供器
  • 要注入服务的时候一定要在providers里声明掉
  • providers:[ProductService]
  • providers:[{provide: ProductService,useClass:AnotherProductService}]