angular温习笔记

前言

n年没接触前端领域了，以前用angular2写过两个项目，一直在服务端领域发展，周末无聊回顾下前端知识点。

学习资料： angular官网.

上手

1.环境

• angular 7.x版本
• node.js 10.x版本
• npm
• ide：webstorm
• 在线代码编辑

2.安装

• 安装cli

npm install -g @angular/cli

• 初始化

ng new my-app

• 工程结构
  
  3.启动

ng serve --open
访问 http://localhost:4200/

官网英雄指南教程知识点

入口

1. 根目录下有个index.html，这是页面的入口，有个选择器<app-root></app-root>
   

模块

1. declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
2. exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
3. imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
4. providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
5. bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

备注：这么多说穿就是类似后端服务化，组件依赖了哪些服务，对外提供了哪些服务，启动入口在哪儿，哪些组件是类似spring注入的。那么多啰里啰嗦的。。。

组件

1. app.component.ts— 组件的类代码，这是用 TypeScript 写的。这个赞，ts符合java coder书写习惯。哈哈哈

import { Component, OnInit } from ‘@angular/core’;引入组件，Component, OnInit 是angular自带的，所以不需要在模块引入。
implements OnInit 实现了OnInit接口，ngOnInit()生命周期钩子，附加初始化方法
constructor() 构造函数，初始化时执行
@Component装饰器函数
selector— 组件的选择器（CSS 元素选择器）
templateUrl— 组件模板文件的位置。也可以用template直接写模板
styleUrls— 组件私有 CSS 样式表文件的位置。
selector: 'app-heroes’中css选择器app-heroes用户来在父组件的模板中匹配HTML元素的名称，以识别出该组件

3. app.component.html— 组件的模板，这是用 HTML 写的。
4. app.component.css— 组件的私有 CSS 样式。

<h1>{{title}}</h1>双花括号语法是 Angular 的插值绑定语法
[(ngModel)] 是 Angular 的双向数据绑定语法。ngModel默认不可用，需要添加模块FormsModule。把 FormsModule 添加到 @NgModule 元数据的 imports 数组中
注意：每个组件都必须声明在（且只能声明在）一个 NgModule 中。 bootstrap指定启动组件
*ngFor遍历循环
click事件绑定
*ngIf true或不为null
===判断相等

主从组件

1. 主从组件值传递
   <app-hero-detail [hero]="selectedHero"></app-hero-detail>
2. 从组件添加一个带有 @Input() 装饰器

类型@Input() hero: Hero; 注意需要引入Input组件

服务

1. @Injectable注解表示服务， providedIn: 'root’必须是root?
2. 单例
3. 调用方通过构造函数来注入，这个比不上java spring,不能直接通过注解？
4. Observable可观察对象，这不就是异步方法吗? 类似 java Callable? Observable 是 RxJS 库中的一个关键类,这是什么?，竟然不是angular的或ts的，引入了一个新的东西？？？
5. Observable.subscribe() 回调函数，这是把后端学了个十足啊，后端学习起来无任何违和感
6. html需要使用service时，构造器注入的服务范围需要是public类型的，这个可以理解，private私有，但html和component不是在一个包下吗？不能使用默认的吗？
7. 其它：数组新增删除使用 push和pop。
8. 疑问：服务使用providedIn来标记范围，不需要在模块中引入吗？也没有配置类似springboot自动扫描？

路由

1. Angular 路由（Route）有两个属性：

path：一个用于匹配浏览器地址栏中 URL 的字符串。
component：当导航到此路由时，路由器应该创建哪个组件。

2. RouterModule.forRoot() 初始化路由器，并让它开始监听浏览器中的地址变化
3. 路由出口 <router-outlet></router-outlet>
4. 路由链接<a routerLink="/heroes">Heroes</a>
5. 默认路由{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
6. 参数化路由{ path: 'detail/:id', component: HeroDetailComponent }

然后把 ActivatedRoute和 Location 服务注入到构造函数中，将它们的值保存到私有变量里
ActivatedRoute 保存着到这个 HeroDetailComponent 实例的路由信息const id = +this.route.snapshot.paramMap.get('id')
this.location.back()返回原路

7. 其它：反引号 ( ` ) 用于定义 JavaScript 的 模板字符串字面量，以便嵌入 id

HTTP

1. 引入HttpClientModule模块
2. HttpClient.get 返回响应数据
3. catchError() 操作符会拦截失败的 Observable
4. $ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组
5. *ngFor 不能直接使用 Observable。 不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe