angular基础知识

一、程序架构

模块：用来将应用中 不同的部分 组织成 一个Angular框架可以理解的单元。

组件：是anguler应用的基本构建块，带有业务逻辑和数据的Html。

服务：用来封装可重用的业务逻辑

指令：允许你向Html元素增加自定义行为

自定义指令

二、命令行工具

npm install -g @angular/cli

ng new name --routing

ng g component 组件名

ng g servicr 服务名

ng g pipe 管道名

angular cli命令

三、模块

app.module.ts文件

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;
import { HeaderComponent } from ‘./header/header.component’;
import { FooterComponent } from ‘./footer/footer.component’;
import { IndexComponent } from ‘./index/index.component’;
import { AboutComponent } from ‘./about/about.component’;
import { CartComponent } from ‘./cart/cart.component’;
import { ListComponent } from ‘./list/list.component’;
import { NavSimpleComponent } from ‘./nav-simple/nav-simple.component’;
import { NavComponent } from ‘./nav/nav.component’;
import { ResultComponent } from ‘./result/result.component’;
import { UserCenterComponent } from ‘./user-center/user-center.component’;
import { UserLoginComponent } from ‘./user-login/user-login.component’;
import { UserRegisterComponent } from ‘./user-register/user-register.component’;
import { UserPassResetComponent } from ‘./user-pass-reset/user-pass-reset.component’;
import {RouterModule, Routes} from ‘@angular/router’;
import { ContentComponent } from ‘./content/content.component’;

const routeConfig: Routes = [
{path: ‘’, component: IndexComponent},
{path: ‘user-login’, component: UserLoginComponent},
{path: ‘user-register’, component: UserRegisterComponent}
];

// 模块装饰器
@NgModule({
// 只能放组件、指令、管道
declarations: [ //声明
AppComponent,
HeaderComponent,
FooterComponent,
IndexComponent,
AboutComponent,
CartComponent,
ListComponent,
NavSimpleComponent,
NavComponent,
ResultComponent,
UserCenterComponent,
UserLoginComponent,
UserRegisterComponent,
UserPassResetComponent,
ContentComponent,
],
// typeScript类 模块要正常运行依赖的其他模块
// 引入模块后，在自定义的组件中引入他定义的组件、指令、服务
imports: [
BrowserModule, // 浏览器模块
RouterModule.forRoot(routeConfig) // 处理表单模块
// HTTP模块
],
// 服务
providers: [],
// 模块主组件
bootstrap: [AppComponent]
})

// typeScript类 模块
export class AppModule { }
四、组件

app.components.ts文件

// 组件
import { Component } from ‘@angular/core’;
// 组件元数据装饰器
@Component({
// 装饰器属性是元数据
// 通过 调用
selector: ‘app-root’,
// 组件内容。html文件作为组件模板；用户看到的内容
templateUrl: ‘./app.component.html’,
// 组件模板用到的样式
styleUrls: [’./app.component.css’]
})
// 控制器；与模板相关的所有属性和方法；与页面相关的逻辑
export class AppComponent {
title = ‘wds’;
}

// 数据绑定:模板和控制器联系起来
// {{}}

// 属相绑定

// 事件绑定

// 双向绑定
五、angular应用是如何启动的

angular启动加载页面

index.html文件

会在index.html中寻找启动模块指定的主组件对应的css选择器（selector）

angular启动加载脚本

main.ts文件

import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
六、angular应用中如何引用第三方类库

第三方类库安装到本地
引入项目，修改angular.json中"scripts"和"styles"
库的类型定义文件也要安装 npm install @types/库名 --save-dev
七、路由

1、路由基础知识

2、应用位置

3、app-routing.module.ts文件

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { HomeComponent } from ‘./…’;
import { ProductComponent } from ‘./…’;

const routes: Routes = [
// 需要注意 path中没有 /
{
path: ‘’,
component: HomeComponent
},
{
path: ‘product’,
component: ProductComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.componen.html文件

routerLink

// 注意 /开头表示找主组件；没有/表示找子组件
// 参数是数组 方便传入参数
<a [routerLink]="[’/’]">主页
<a [routerLink]="[’/product’]">商品详情
router

在路由时传递数据

在查询参数中传递数据(queryParams)

// /product?id=1
<a [routerLink]="[’/product’]" [queryParams]="{id:1}">商品详情
private productId: number;
constructor (private routeInfo: ActivatedRoute){}
toProductDetails () {
this.router.navigate([’/product’]);
}
ngOnInit () {
this.productId = this.routeInfo.snapshot.queryParams[‘id’]
}

在路由路径中传递数据（path）

// /product?id=1
<a [routerLink]="[’/product’,1]">商品详情
{
path: ‘product/:id’,
component: ProductComponent
}
private productId: number;
constructor (private routeInfo: ActivatedRoute){}

toProductDetails () {
this.router.navigate([’/product’]);
}
ngOnInit () {
// 参数订阅 RXJS语法 自己到自己也会刷数据
this.routeInfo.params.subscribe((params:Params) => this.productId = params[‘id’])
// 参数快照 自己到自己不会刷数据 原因组件没有再次被创建，ngOnInit方法没有再次被调用
this.productId = this.routeInfo.snapshot.Params[‘id’]
}
在路由配置中传递数据

4、重定向路由

{path:’’,redirectTo:’/home’,pathMath:‘full’}

5、子路由

// HomeComponent组件对应的html中有

{
path: ‘’,
component: HomeComponent,
children:[
{
path: ‘’,
component: XxxComponpath: ‘’
},
{
path: ‘yyy’,
component: YyyComponpath: ‘’
}
]
}
6、辅助路由

{
path: ‘home’,
component: HomeComponent,
},
{
path: ‘product’,
component: ProductComponent,
},
{
path: ‘xxx’,
component: “XxxComponent”,
outlet:‘aux’
},
{
path: ‘yyy’,
component: “YyyComponent”,
outlet:‘aux’
}
<a [routerLink]="[’/home’, {outlets:{aux: ‘xxx’}}]">Xxx
<a [routerLink]="[’/product’, {outlets:{aux: ‘yyy’}}]">Yyy

7、路由守卫

应用场景

路由守卫

CanActivate

CanDeactivate

resolve

进入路由前，读取商品信息。带着信息进入商品组件，直接渲染数据

八、依赖注入

1、依赖注入模式化解决问题

控制反转是将代码的依赖控制权从代码的内部转到代码的外部，

实现控制反转的手段是依赖注入。

控制反转侧重描述目的。

2、依赖注入模式的好处

松耦合方式编写代码，可测性，可重用性更高。

如何实现依赖注入的，注入器，提供器

提供器

提供器作用域规则

1、声明在模块中，模块中所有组件可见。

2、声明在组件中，当前组件和子组件可见，其他组件不可见。

3、当具有相同的token时，声明在组件中的注入器会覆盖声明在模块中的注入器。

4、优先声明在模块中。

@Injectable()别的服务注入到这个服务中。

useFactory

注入器的层级关系

提供器注册到注入器上

九、组件间通信

父子组件间通信

1、输入属性

在子组件中

单向数据绑定，子组件数据改变不会影响父组件

输出属性

在子组件中

中间人模式

兄弟组件，利用父组件中间人

没有共同父子件，利用可注入的服务作为中间人。

组件生命周期

红色调用一次（一定被调用），绿色调用多次（也可能不被调用）

constructor

一定被调用，只调用一次

ngOnChanges

前置知识：首先理解可变对象和不可变对象

    可变对象：字符串

    不可变对象：对象

父组件初始化或者修改子组件不可变对象的输入属性的时候被调用；如果没有输入属性（@input）ngOnChanges()方法永远不会被调用

ngOnInit

组件用到输入属性，逻辑一定写到 ngOnInit()中，因为输入属性在ngOnChanges后才有值

ngDoCheck

属性改变、事件（包括点击），整个组件树的的ngDoCheck()都会被调用，default 。还有onPush


变更检测策略

            有变化，就会调用组件树所有的ngDoCheck（）方法

ngAfterViewInit ngAfterViewchecked

模板本地变量@ViewChild()

分别是在控制器中调用子组件方法，和在模板中调用子组件方法

ngAfterViewInit()组件视图初始化完毕被调用一次

    有变化，ngAfterViewCHecked()组件的视图变更检测完毕被调用，整个组件树的ngAfterViewCHecked()方法都会被调用

    注意，组件视图被更新完毕后在改变属性，会触发异常，解决方法setTimeout（）

ngAfterContentInit ngAfterContentchecked

在子组件中，父组件内容投影到子组件

九、数据绑定、响应式编程、管道

数据绑定（默认数据绑定是单向的）

事件绑定

注意：事件可以是浏览器默认事件，也可以是自定义事件

DOM属性绑定

前置知识

插值表达式===DOM属性绑定

HTML属性和DOM属性的差别

优先使用DOM属性绑定

第一行DOM属性（变，指定当前值），第二行HTML属性（不变，指定初始值，初始化DOM属性）

特殊属性

总结

注意：浏览器会保持DOM和UI同步；DOM属性改变自动触发UI

HTML属性绑定

九、表单

1、HTML表单

两种表单的不同

2、angular的模板式表单

ngNoForm

为form自动添加ngForm ngModel