一、程序架构
模块:用来将应用中 不同的部分 组织成 一个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