1. ng-cli
    安装ng-cli
    npm install -g angular-cli
    创建angular项目
    ng new [projectName]
  2. 组件
    组件创建：
    ng g component [componentName]
  3. 路由routes:
    所有的路由信息都定义在app-routing.module.ts文件中
    路由插槽：
    所有路由页面的信息都渲染到这个标签上

    路由跳转：
    标签：
    主页// html中用标签跳转路由方法 无参数
    商品详情 // html中用标签跳转路由方法 有参数
    方法：
    import {Router} from ‘@angular/router’; // 引入
    constructor(private route: Router) {} // 依赖注入

    toProductDetails() {
    this.router.navigate([‘/product’, 2]); // 跳转带参数
    this.route.navigateByUrl(‘/news/details’); // 直接跳转地址
    }
    路由返回：
    import { Location } from ‘@angular/common’; // 引入import
    constructor(
    private location: Location
    ) { } // 依赖注入
    goBack(): void {
    this.location.back(); // 返回上一级页面
    }
    路由传参：
    const routes: Routes = [
    {path: ‘product/:id’, component: ProductComponent}, //路由传参
    ];
    路由未匹配404：
    const routes: Routes = [
    {path: ‘**’, component: Code404Component}, //路由传参，一定要放最后面
    ];
    路由快照：
    引入import
    import {ActivatedRoute} from ‘@angular/router’;
    先定义好routeInfo
    constructor(private routeInfo: ActivatedRoute) {}
    在页面获取路由参数id
    this.productId = this.routeInfo.snapshot.params.id;
    路由订阅：
    同一个组件下，如果不重新渲染组件，则用下列方法获取参数
    this.routeInfo.params.subscribe((params: Params) => this.productId = params.id);
    重定向路由：
    在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
    例：www.aaa.com => www.aaa.com/products
    www.aaa.com/x => www.aaa.com/y
    const routes: Routes = [
    {path: ‘’, redirectTo: ‘/home’, pathMatch: ‘full’}, // 重定向路由
    {path: ‘home’, component: HomeComponent},
    ];
    子路由：
    html:
    商品描述 // 注意这里是”./“（同级路由） 而不是 “/“（跟路由）
    销售员信息
    ts:
    {
    path: ‘product/:id’, // 父路由
    component: ProductComponent, // 父组件
    children: [ // 子组件
    {path: ‘’, component: ProductDescComponent}, // 子路由和子组件1
    {path: ‘seller/:id’, component: SellerInfoComponent} // 子路由和子组件2
    ]
    }
    辅助路由：
    html:
    // 主路由
    // 辅助路由
    1. // 点击开始聊天时显示:"/home"主路由和aux = chat辅助路由XXXComponent内容
    2.   <a [routerLink]="[{outlets: {primary:'home', aux: 'chat'}}]">开始聊天</a>>XXX</a> 
    3.   <a [routerLink]="[{outlets: {aux: null}}]">结束聊天</a> // 点击结束聊天时结束aux = null辅助路显示内容
    4. ts：
    5.   {path: 'chat', component: ChatComponent, outlet: 'aux'}, // 辅助路由


路由守卫：
CanActivate: 处理导航到某路由的情况。
创建login.guard.ts
canActivate: [LoginGuard],
import {CanActivate} from ‘@angular/router’;

  1. export class LoginGuard implements CanActivate {
  2.              canActivate() {  
  3.              // 逻辑编写，路由前的判断等等。。。
  4.              const loggedIn: boolean = Math.random() < 0.2;
  6.              if (!loggedIn) {
  7.                  console.log('用户未登陆');
  8.              }
  9.              return loggedIn;
  10.              }
  11.          }
  12.  CanDeactivate: 处理从当前路由离开的情况
  13.      创建unsave.guard.ts
  14.          canDeactivate: [UnsavedGuard]
  15.          import {CanDeactivate} from '@angular/router';
  16.          import {ProductComponent} from '../product/product.component';
  17.          // 要写出来你要从哪个组件离开：ProductComponent
  18.          export class UnsavedGuard implements CanDeactivate<ProductComponent> {
  19.              canDeactivate(component: ProductComponent) {
  20.              return window.confirm('你还没有保存，确定离开吗？');
  21.              }
  22.          }
  24.  Resolve: 在路由激活之前获取路由数据
  25.      在进入页面之前向服务器请求数据，保证页面体验良好
  26.          路由路径配置：
  27.          resolve: {
  28.              product: ProductResolve
  29.          }
  1. 依赖注入
    什么是依赖注入：
    Dependency Injection 简称DI
    例：
    var product = new Product();
    createShipment(product)
    把product对象注入给createShipment方法
    控制反转：
    Inversion of Control 简称IOC
    Angular实现控制反转的手段是依赖注入
    依赖注入优点：
    低耦合和高可重用性
    可测试性
    注入器：
    constructor(private productService: ProductService){…}
    提供器：
    providers: [ProductService]
    =providers: [{provide: ProductService, useClass: ProductService}]
    providers: [{provide: ProductService, useFactory: () => {…}] // 工厂方法
  2. 数据绑定、响应式编程和管道
    数据绑定：
    angular数据绑定是单向的

    {{product.title}}


    Angular学习 - 图1 或者 Angular学习 - 图2
  3. 少量HTML属性和DOM属性之间有着1:1的映射，入id
  4. 有些HTML属性没有对应的DOM属性，如colspan
  5. 有些DOM属性没有对应的HTML属性，如textContent
  6. 就算名字相同，HTML属性和DOM属性也不是同一样的东西
  7. HTML属性的值指定初始值，DOM属性值便是当前值，DOM属性值可以改变，HTML属性的值不能改变
  8. angular绑定是通过DOM属性和事件来工作的，而不是HTML属性。
    双向数据绑定：
  9. ngModel
    用于form中的输入标签中，例如input textarea
    例：