angular 基础知识

一、程序架构



二、命令行工具
npm install -g @angular/cli
ng new name --routing
ng g component 组件名
ng g servicr 服务名
ng g pipe 管道名
angular cli命令

三、组件



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

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

// 属相绑定

// 事件绑定

// 双向绑定四、模块
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 { }五、angular应用是如何启动的
angular启动加载页面
index.html文件
会在index.html中寻找启动模块指定的主组件对应的css选择器（selector）
angular启动加载脚本
main.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 { }六、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文件

<router-outlet></router-outlet>

routerLink// 注意 /开头表示找主组件；没有/表示找子组件
// 参数是数组 方便传入参数
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
在路由时传递数据
在查询参数中传递数据



// /product?id=1
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

private productId: number;
constructor (private routeInfo: ActivatedRoute){}
toProductDetails () {
this.router.navigate(['/product']);
}
ngOnInit () {
this.productId = this.routeInfo.snapshot.queryParams['id']
}

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



// /product?id=1
<a [routerLink]="['/product',1]">商品详情</a>

{
    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'])
  // 参数快照            自己到自己也会刷数据
  this.productId = this.routeInfo.snapshot.Params['id']
}

在路由配置中传递数据


 

4、重定向路由
{path:'',redirectTo:'/home',pathMath:'full'}

5、子路由// HomeComponent组件对应的html中有
<router-outlet></router-outlet>

{
    path: '',
    component: HomeComponent,
    children:[
{
    path: '',
    component: XxxComponpath: ''
},
        {
    path: 'yyy',
    component: YyyComponpath: ''
        }
    ]
}

6、辅助路由<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

{
    path: 'home',
    component: HomeComponent,
},
{
    path: 'product',
    component: ProductComponent,
},
{
    path: 'xxx',
    component: XxxComponpath: '',
    outlet:'aux'
},
{
    path: 'yyy',
    component: YyyComponpath: '',
    outlet:'aux'
}

<a [routerLink]="['/home', {outlets:{aux: 'xxx'}}]">Xxx</a>
<a [routerLink]="['/product', {outlets:{aux: 'yyy'}}]">Yyy</a>

7、路由守卫
应用场景



路由守卫



八、依赖注入

九、表单
1、HTML表单



两种表单的不同



 2、angular的模板式表单





ngNoForm



为form自动添加ngForm  ngModel





ngModelGroup





模板表单示例





3、angular的相应式表单（数据模型通过指令连接HTML）



第一步、创建数据模型
formControl <String>
formGroup： 是多个formControl的集合 <{}>
formArray：和formGroup类似，但有length属性，代表可增长的 字段集合formControl<[]>
响应式表单类 数据模型的实例



响应式表单指令
第二列是使用属性绑定，
第三列是使用属性的名字连接数据模型和DOM的，
不能通过模板本地变量引用创建的实例
formControl只能用在formGroup外部使用



示例





示例









FormBuilder重构代码
formGroup
formControl



表单校验
angular校验器；其实就是简单的方法



如何检验模板式表单
自带校验器



自定义校验器









如何校验响应式表单
hasError()
getError()
get()
valid/invalid 有效/无效
touch/untouch 获取焦点/没有焦点
pristine/dirty  质朴/脏  ： 值从来没变过/被改变过
类似valid；all的都true，form才是true
pending  等待，未决定

angular根据不同状态，自动增加不同样式不同样式

十、组件生命周期（九个）
生命周期钩子

ngOnChanges钩子

变更检测机制，刷新不可变对象（字符串），调用ngOnChanges钩子 ；不刷新可变对象（对象属性），不调用ngOnChanges钩子

十一、绑定
差值表达式和属性绑定是一个东西
HTML属性和DOM属性