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.

{{hero.name | uppercase}} Details

== 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] 用来在一系列 `
` 元素中展示消息列表。 5.在组件的 ngOnInit 生命周期钩子中调用 xxxxService 方法,而不是构造函数中; 6.用 RxJS 的 of() 方法返回了一个模拟英雄数据的可观察对象Observable) 路由 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.

你可能感兴趣的:(angularJS5笔记)