Angular
相比于vue
来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等)。Angular引入了依赖注入、单元测试、类等后端概念,结合TS开发,加入类型管理机制,使前端代码也能严谨化,结构化。比起vue,angular更加适用于大型项目的开发与维护。
1、项目构建
// 属于全局安装,如果之前装过了,就不用多次执行该命令了~
npm install -g @angular/cli
// 新建项目(routiong表示加入路由)
ng new my-app --routing
// 进入项目
cd my-app
// 安装插件
npm install (这里之前使用cnpm install 会卡在95%的地方)
// 启动项目
ng serve
// 设置不同的端口(默认端口4200)
ng serve --port 5001
2、绑定
属性绑定
- DOM属性:当前值
[property]="value"
,可变,优先使用;可以使用插值表达式双花括号替换
<!-- 模板代码 -->
<h4>插值表达式</h4>
<img src="{{imgUrl}}" alt="">
<h4>DOM属性绑定</h4>
<img [src]="imgUrl" alt="">
// ts代码
export class BindComponent implements OnInit {
imgUrl: string = "http://via.placeholder.com/300x100"
}
-
HTML绑定:初始值
[attr.Attribute]="value"
,不可变,有的HTML属性没有对应的DOM属性,比如colspan,当没有DON属性的时候可使用; -
CSS类绑定:全替换
[class]="classValue"
,部分替换[class.className]="classValue"
<h4>class属性全绑定</h4>
<div [class]="allClass">黑玛鱼</div>
<h4>class属性部分绑定</h4>
<div class="aa" [class.bb]="bbValue">黑玛鱼</div>
.aa {color: red;}
.bb {font-weight: bold;}
.cc {font-size: 50px;}
// 字符串类型
allClass: string = 'aa bb cc';
// 布尔类型
bbValue: boolean = true;
指令绑定
- ngFor:循环指令
<h4>ngFor</h4>
<ul>
<li *ngFor="let item of list;let i = index">
第{{i+1}}条:{{item}}
</li>
</ul>
// 数组类型
list: string[] = ['我的前半生','精彩绝伦','我的后半生','依然绚烂']
- ngIf:是否渲染dom元素
<h4>ngIf</h4>
<div>
<span *ngIf="show">我是显式的</span>
<span *ngIf="!show">我是隐式的</span>
</div>
// 布尔类型
show:boolean = true;
- ngClass:多类名显示
<h4>ngClass</h4>
<div class="aa" [ngClass]="{bb: bbValue}">Angular指令</div>
- 事件绑定
<h4>事件绑定</h4>
<button (click)="todoClick()">点我</button>
// 事件
todoClick(){
alert('点我干嘛?')
}
双向绑定
- [(ngModel)]:常用于表单组件
<h4>双向绑定</h4>
<input type="text" [(ngModel)]="name">
<span>{{name}}</span>
这里注意,需要在
app.module.ts
引入表单模块FormsModule
管道
管道(过滤):负责将原始值转成显示值
名称 | 效果 |
---|---|
date | 日期的转换:date:'yyyy-MM-dd HH:mm:ss' |
number | 数字的转换:number:'2.1-4' ,保留2位整数,最少1个,最多4个 |
async | 异步流 |
自定义 | ng g pipe ... |
<h4>管道</h4>
<span>今天是:{{today | date:"yyyy-MM-dd"}}</span>
today: object = new Date()
投影
相当于vue的插槽,在ng中使用ng-content
指令
- 单个投影
<!-- 父组件模板 -->
<app-child>
<span>
两个人在一起 进步快的那个人总是会甩掉原地踏步的那个人 因为人的本能都是希望更多地探求生命生活的外延和内涵
</span>
</app-child>
<!-- app-child组件模板 -->
<h4>单个投影</h4>
<ng-content></ng-content>
- 多个投影
使用类class
命名,使用select
定位
<!-- 父组件模板 -->
<app-child>
<div class="ask">“下次见到她,你会怎么做?”</div>
<div class="answer">“打个招呼,或者,带她看大海”</div>
</app-child>
<!-- app-solt组件模板 -->
<h4>多个投影</h4>
朋友问:<ng-content select=".ask"></ng-content>
他说:<ng-content select=".answer"></ng-content>
3、生命周期
方法 | 作用 |
---|---|
ngOnChanges | 父组件在初始化或者在修改子组件的输入属性时被调用。引用类型改变,不触发,初始化输入属性 |
ngDoCheck | 数变更检测(zone.js ) 发生的时候被调用,很频繁的被调用,只要视图有变化都会触发 |
ngAfterViewInit | 模板初始化时调用(一次) |
ngAfterViewChecked | 模板变化检测 |
ngAfterContentInit | 插槽值初始化时调用(一次) |
ngAfterContentChecked | 对插槽内容的初始化和变更检测,在视图初始化之前调用。此时可以更改值 |
ngDestory | 路由切换的时候,前一个组件销毁,后一个组件创建 |
4、父子组件通讯
组件创建:ng直接使用 ng g component
的命令创建组件,会自动生成组件所需的文件,方便快捷。
// 父组件
ng g component parent
// 子组件
ng g component parent/child
父->子(@Input())
使用 @Input()
让子组件知道哪个是输入的属性,对应vue中的props。
<h4>我是父组件</h4>
<input type="text" [(ngModel)]="tellchild">
<app-child [message]="tellchild"></app-child>
<h4>我是子组件</h4>
<div>父组件传来的数据是:{{message}}</div>
// 子组件ts,告诉组件,message是父组件传进来的
@Input() public message: string;
子->父 (@Output())
依赖EventEmitter
事件发射器,将信息发射emit
给子组件
<h4>我是子组件</h4>
<div>父组件传来的数据是:{{message}}</div>
<input type="text" [formControl]="childmessage">
// 使用FormControl对象,响应式表单需要引入ReactiveFormsModule模块
childmessage: FormControl = new FormControl();
// 输出属性,需要定义成事件
@Output() childtellEvent: EventEmitter<any> = new EventEmitter();
ngOnInit() {
this.childmessage.valueChanges.subscribe(msg => {
// 通过emit将信息发射出去
this.childtellEvent.emit(msg);
})
}
<h4>我是父组件</h4>
<input type="text" [(ngModel)]="tellchild">
<div>子组件传来的数据是:{{childmessage}}</div>
<!-- 事件绑定获取数据 -->
<app-child [message]="tellchild" (childtellEvent)="tellResult($event)"></app-child>
5、响应式编程
- 可观察对象
Angular集成了 参考:Rxjs,它使用Observable
对象来创建流,主要是用于监听一组值或者事件的集合
// 创建流
// 值的创建
Observable.of([1,2,3,4]);
// 事件的创建
var button = document.querySelector('button');
Observable.fromEvent(button,'click')
- 观察者
不是对象,而是一个回调函数集合,它知道如何监听被 Observable 发送的值。通过订阅subscribe
的方式观察可观察对象,取消订阅unsubscribe()
// 订阅流
Observable.from([1,2,3,4]).map(item =>{
item * item
}).subscribe(
// next检测
res => console.log(res),
// error检测
err => console.log(err),
// complete检测
() => console.log('it`s over')
)