angularJS5笔记

  @Component({
     selector: 'app-heroes', //组件的选择器(css元素选择器),用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。
     templateUrl: './heroes.component.html', //组价模板文件的位置
     styleUrls: ['./heroes.component.css'] //组件私有css样式表文件位置
    })


 管道 是格式化字符串、金额、日期和其它显示数据的好办法。
  绑定表达式中的 `[uppercase](https:\\www.angular.cn/api/common/UpperCasePipe)` 位于管道操作符（ | ）的右边，用来调用内置管道 `UppercasePipe`
  1.<h2>{{hero.name | uppercase}} Details</h2>   ==   WINDSTORM

 双向绑定
  1.[(ngModel)]是Angular的双向数据绑定语法。

AppModule
  1.Angular需要知道如何把应用程序的各个部分组合到一起, 以及该应用需要哪些其他文件和库. 这些信息被称为元数据（Metadata）
  2.有一些元数据位于@Component装饰器中，可以把它加到组件类上。另一些关键性元数据位于@NgModule装饰器中。
  3.@NgModule装饰器位于顶级类AppModule上。
  4.Angular CLI在创建项目的时候在src/app/aoo.module.ts中生成了一个AppModule类。在这里导入FormsModule类。（就跟Java导包一样）

声明 HeroesComponent
  1.每个组件都必须声明在（且只能声明在）一个NgModele中。

在app下创建组件命令：ng generate component  a***-***
  1.这个会创建目录src/app/a***-***
  2.在目录中生成四个文件 
      a：作为组件样式的css文件；
      b：作为组件模板的html文件；
      c：存放组件类 a***-*** 的typeScript文件
      d：a***-***  类的测试文件

主从组件
  1.添加 @input()装饰器的输入属性，外部的组件会帮到到它。 hero 属性
  2.使用属性绑定语法可以让父组件控制子组件。

服务
  1.聚焦于展示数据，使用angular的依赖注入机制把它注入到项目中，不需要使用new来创建服务。
  2. 使用angular CLI创建服务， ng generate service XXX
  3. 会在src/app/xxx.service.ts生成该XXXService类的骨架；
  4. @Injectable() 服务导入了angualr的Injectable符号，并且给这个服务类添加了@Injectable()装饰器。它会把这个类标记为依赖注入系统的参与者之一。


提供（（provide） HeroService）
  1.在要求service注入到component之前，必须先将这个服务提供给依赖注入系统。
  2.默认的情况下，cli命令generate service会通过@Injectable装饰器添加元数据形式，使用根注入器将你的服务注册成提供商。
     //service前面的@Injectable()语句定义，providedIn元数据的值是“root”
      @Injectable({
           providedIn: 'root',
      })
  3.当angular创建XXcomponent的时候，依赖注入系统就会吧xxService参数设置为XXService的单例对象。
  4.在构造函数中注入service
      constructor(private heroService: HeroService) { }
      这个参数做了两件事：
        1：声明了一个私有的service属性；
        2：把它标记为一个service的注入点；
     当 Angular 创建 `xxxComponent` 时，依赖注入系统就会把这个 `xxxxService` 参数设置为 `xxxxService` 的单例对象。
  4.Angular 只会绑定到组件的公共属性。

*[ngIf]只有在有消息时才会显示消息区。
*[ngFor] 用来在一系列 `<div>` 元素中展示消息列表。

  5.在组件的 ngOnInit 生命周期钩子中调用 xxxxService 方法，而不是构造函数中；
  6.用 RxJS 的 of() 方法返回了一个模拟英雄数据的可观察对象Observable<Hero[]>)
  
路由
  1.最好在一个独立的顶级模块中加载和配置路由器，专注于路由功能，有根模块APPModule导入；
  2.CLI:  ng generate module app-routing --flat --module=app
  3.典型的angular路由有两个属性
           1.path：一个用于匹配浏览器地址栏中URL的字符串
           2.component：当导航到此路由时，路由器应该创建哪个组件。
  4.forRoot()，是要在应用的顶级配置这个路由器。会提供路由所需要的服务提供商和指令，也会基于浏览器的当前URL执行首次导航。
  5.routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。是routerModule中的另一个公共指令。


错误处理：要捕获错误就要用RxJS中的catchError()操作符来简历对Observble结果的处理管道(pipe)


添加仪表盘视图     
  1.CLI：ng generate component dashbord
  2.这个类跟HeroesComponent很像
        1：它定义了一个 heroes 数组属性；
        2：它的构造函数希望 Angular 把 HeroService 注入到私有的 heroService 属性中。
        3：在 ngOnInit() 生命周期钩子中调用 getHeroes


添加默认路由     
  1.如果让应用自动导航到某个仪表盘，需要把路由添加到AppRoutingModule.Routes数组中，这个路由会把一个空路径的URL重定向到redirectTo：“”；
        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  2.把一个参数化的路由添加到AppRoutingModule.Routes中，path 中的冒号（:）表示 :id 是一个占位符，它表示某个特定英雄的 id。
        { path: 'detail/:id', component: HeroDetailComponent },

支持路由的component    
  1.在component中import{ ActivatedRoute/Location/HeroService}
  2.ActivatedRoute保存着这个component的实例的路由信息，这个组件会提取UEL中的路由参数，id就是要显示的id信息。
  3.HeroService从远端服务器获取英雄数据，本组件将使用它来获取显示的数据。
  4.location是一个angular的服务，用来与浏览器打交道。
  5.route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。
  6.paramMap 是一个从 URL 中提取的路由参数值的字典。
  7.注意，反引号 ( ` ) 用于定义 JavaScript 的 模板字符串字面量以便嵌入 `id`




  HTTP
  1.在appModule中引入HttpClientModule；
  2.把它加入 @[NgModule.imports 数组；

  模拟数据服务器
  1.CLI命令：npm install angular-in-memory-web-api --save
  2.模拟出远程数据的服务器通讯，可以通过httpclient来发起请求和接收响应，不用在乎实际上是这个内存web api在拦截这些请求，操作个内存数据库，给出仿真响应。
  3.重要：这个内存web api模块与angular中http模块无关。

  Http 方法返回单个值
  1.所有的 HttpClient 方法都会返回某个值的 RxJS `Observable`。
  2.HTTP 是一个请求/响应式协议。你发起请求，它返回单个的响应。
  3.通常，Observable可以在一段时间内返回多个值。 但来自 HttpClient的 Observable总是发出一个值，然后结束，再也不会发出其它值。


  错误处理
  1.catchError() 操作符会拦截失败的 Observable。 它把错误对象传给错误处理器，错误处理器会处理这个错误。
  2.handleError()方法会报告这个错误，并返回一个无害的结果（安全值）
  3.HttpClient.put()方法接受三个参数
      1：URL 地址
      2：要修改的数据（这里就是修改后的英雄）
      3：选项


  AsyncPipe
  1.$ 是一个命名惯例用来表明 heroes$ 是一个 Observable，而不是数组。
  2.ngFor不能直接使用 `Observable`。它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的AsyncPipe并且会自动订阅到 Observable。



  RxJS Subject 类型的 searchTerms
  1.Subject 既是可观察对象的数据源，本身也是 Observable。 你可以像订阅任何 Observable 一样订阅 Subject。
  2.
  3.
  4.
  5.




  1.
  2.
  3.
  4.
  5.






  1.
  2.
  3.
  4.
  5.