一、序章
关于Angular版本，Angular官方已经统一命名Angular 1.x统称为Angular JS；Angular 2.x及以上统称Angular
- 后续练习的源码地址都会上传到github库上，源码下载地址
回顾前端框架学习历程
最早开始是对Angular JS比较熟悉，2015年那时候部门选择了比较热门的Angular JS结合ionic1.x加上codova平台进行混合式的webAPP开发，那时候用Angular JS开发过挺多项目的，到如今也还有一些基于Angular JS的老项目在迭代开发和维护，但是存在一个问题就是现在很多人不会愿意再去学习旧版本的Angular JS了，因为谷歌升级发布的Angular可以说是一个大的跨度，他们并不是版本迭代升级这么简单，你甚至可以完全把他们当做2个不同的框架进行学习，这也导致了之前的一部分Angular JS流量转向了另外2大框架vue和react，同样我们部门后续的主流技术栈也是转向了vue和react。为什么要花时间去学习Angular？
Angular还是有很多的公司在使用，这也是我打算花点时间从新入门Angular4.x版本的原因，同时Angular一直都是一个很热门的前端框架，并不是说它已经过时了（当然Angular JS是真的过时了），作为前端目前最流行的三大框架之一，还是值得花费一些时间去学习参考一下的。为什么选择Angular4.x版本作为入门学习？
在选择Angular版本的时候我思考了挺多，最后决定从Angular4.x快速入门写起。为什么会选择Angular4.x版本进行入门的学习呢？原因在于，之前一直在做vue和react的项目对Angular的学习还停留在以前的Angular JS，只是对后续Angular发布的版本保持着一定的关注，了解一些Angular相关的，知道Angular的版本迭代更新比较频繁，到目前最新的正式版本已经迭代到7.x了，8.0的beta版本也已经发布，那给我的版本入门选择也就比较多了。一开始我的打算是既然要学就学习最新的版本从7.x开始，后续我经过一些综合的考虑放弃了7.x版本选择了4.x版本作为入门，Angular4.x作为入门是比较合适的，Angular从1.x之后的版本迭代都是向下兼容，那4.x作为一个承上启下的版本选择它无疑是最合适的，可提供参考的社区资料也会更完善一些。后续我比较期待Angular8.0.0版本的发布，只因为它将正式包含Ivy Renderer ，对于Angular Ivy的了解可以参考这2篇博客进行理解 Ivy-Angular下一代渲染引擎 和 如何评价 Angular 的新Ivy Render。-
快速入门从哪些方面开始？
个人总结出来的一些经验，怎样以高效的方式入门学习一门新的前端框架，后续的快速入门我准备从以下几个模块开始：- 环境搭建
- 路由跳转
- 页面传参及接口请求
- 组件
- 其它
一、环境搭建
基础要求
开发环境配置方式
1. 通过git clone模板
- 通过git克隆官方快速入门模板，打开终端执行命令git clone https://github.com/angular/quickstart
- 用IDE打开克隆下来的工程，我用的是webstorm，然后安装依赖，在当前工程目录下执行npm install
- 依赖下载安装完成后直接npm start运行
2.通过Angular CLI脚手架安装
二、路由跳转
- app.modules.ts中需要导入路由模块
import { RouterModule } from '@angular/router';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule, RouterModule],
declarations: [AppComponent, UserComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
- 在app.modules.ts中配置路由信息
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';
export const ROUTES: Routes = [
{ path: 'user', component: UserComponent }
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES)
],
// ...
})
export class AppModule {}
- 父子路由配置children和loadChildren懒加载
// children（父子路由配置）
// 访问/tabs跳转到TabsPage，TabsPage只是一个底部导航。也相当于web网站的顶部导航或左侧导航
// 所以需要访问/tabs/demo，才会显示导航和内容
// 访问/tabs/tab1/test，显示导航和testPage，test模块使用loadChildren懒加载
{
path: 'tabs',
component: TabsPage,
children: [
{path: 'demo', component: DemoPage},
{path: 'tab1', component: Tab1Page},
{path: 'tab1/test', loadChildren: './pages/tab1/test/test.module#TestPageModule'},
]
}
- routerLink
为了让我们链接到已设置的路由，我们需要使用 routerLink 指令，具体示例如下：
<nav>
<a routerLink="/">Home</a>
<a routerLink="/settings/password">Change password</a>
<a routerLink="/settings/profile">Profile Settings</a>
</nav>
当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。
- app.component.ts主页中配置路由导航页面
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div class="app">
<h1>欢迎来到Angular的世界</h1>
<nav>
<a routerLink="/user">我的</a>
</nav>
<router-outlet></router-outlet>
</div>`,
})
export class AppComponent { }
- user.component.ts用户组件模块中代码
import { Component } from '@angular/core';
interface Address {
province: string;
city: string;
}
@Component({
selector: 'sl-user',
template: `
<h2>大家好，我是{{name}}</h2>
<p>我来自<strong>{{address.province}}</strong>省,
<strong>{{address.city}}</strong>市
</p>
<button (click)="toggleSkills()">
{{ showSkills ? "隐藏技能" : "显示技能" }}
</button>
<div *ngIf="showSkills">
<h3>我的技能</h3>
<ul>
<li *ngFor="let skill of skills">
{{skill}}
</li>
</ul>
<form (submit)="addSkill(skill.value)">
<label>添加技能</label>
<input type="text" #skill>
</form>
</div>
`
})
export class UserComponent {
name: string;
address: Address;
showSkills: boolean;
skills: string[];
constructor() {
this.name = 'liangyu';
this.address = {
province: '湖南',
city: '永州'
};
this.showSkills = true;
this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
}
toggleSkills() {
this.showSkills = !this.showSkills;
}
addSkill(skill: string) {
let skillStr = skill.trim();
if (this.skills.indexOf(skillStr) === -1) {
this.skills.push(skillStr);
}
}
}
三、页面跳转传参&接口请求
3.1、通过routerLink传参方式
- 通过动态路由进行参数传递,app.module.ts在path路径后面通过":"拼接需要传递的参数
export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/' },
{ path: 'user/:name', component: UserComponent },
];
- app.component.ts中的跳转链接
<a [routerLink]="['/user', '凉雨啊']">我的</a>
<!--或者方式2-->
<!--<a [routerLink]="['/user']" [queryParams]="{name:'凉雨啊'}">我的</a>-->
- userComponent.ts中接收，需要导入import { ActivatedRoute } from '@angular/router';
// 获取参数值
this.name = this.routeInfo.snapshot.params['name'];
// 接收方式2传递的值
// this.name = this.routeInfo.snapshot.queryParams['name'];
console.log(this.name)
3.2、通过Router API中的navigate() 方法跳转路由传参
- app.module.ts配置路由
{ path: 'user', component: UserComponent },
- 在需要跳转的导航页面中需要导入路由import { Router } from '@angular/router';
// 页面带参数跳转方法
goUser() {
this.router.navigate(['/user'], {
queryParams: {
name: '另一个凉雨'
}
});
}
- userComponent组件中接收参数
// 接收传过来的参数
this.name = this.routeInfo.snapshot.queryParams['name'];
console.log(this.name)
3.3、http接口请求
- 一个项目肯定是离不开后端交互的，那我们就需要用到http的接口请求来获取数据，考虑到http使用比较频繁我们可以把请求封装成一个服务。我们新建一个以service结尾的http.service.ts文件代表服务类文件，引入需要的库,@Injectable()，angular的注入服务，Http请求和Headers请求头的设置，引入rxjs的Observable方法处理异步，关于rxjs的Observable详细介绍可查看这篇文章，关于rxjs的Observable简单入门介绍可查看另一篇文章，写的都挺不错的。
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
- 以下是对get请求和post请求的封装，注意需要在class类方式上面加上@Injectable()表示可通过服务注入
@Injectable()
export class ServiceBaseService {
param: any;
constructor(private http: Http) { }
/**
* @param {string} url地址
* @param {any} [options]可选提交的参数
* @param {any} [header]可选设置的头信息
* @memberof ServiceBaseService
* @title: 封装一个get请求的基础类
*/
getData(url: string, options?: any, myheaders?: any): Observable<any> {
// 配置请求头
const myHeaders: Headers = new Headers();
// tslint:disable-next-line:forin
for (const key in myheaders) {
myHeaders.append(key, myheaders[key]);
};
url += (url.indexOf('?') < 0 ? '?' : '&') + this.param(options);
return this.http.get(url, { headers: myHeaders }).map(res => res.json());
}
/**
* @param url地址
* @param options提交的数据
* @param myheaders可选参数设置头
* @title:封装一个post请求数据的
*/
postData(url: string, options: any, myheaders?: any): Observable<any> {
const myHeaders: Headers = new Headers();
myHeaders.append('Content-Type', 'application/json');
// tslint:disable-next-line:forin
for (const key in myheaders) {
myHeaders.append(key, myheaders[key]);
}
return this.http.post(url, options, { headers: myHeaders });
}
}
- 我们在user.component.ts中引入上面所封装的接口请求服务，需要import进来,还需要在@Component中进行注入和constructor构造函数中声名
import { ServiceBaseService } from './http.service';
@Component({
providers: [ ServiceBaseService ],
})
constructor( private ServiceBaseService: ServiceBaseService ) {}
- 接口测试的方式调用如下
testGetData() {
this.url = 'xxxx'; //此处为调用接口的地址
this.param = {'Appid': 'workflow', 'Appsecret': 'xxx'}; //接口调用传参
this.ServiceBaseService.postData(this.url, this.param).subscribe({
next: function(value) { //成功后返回数据
console.log(value);
},
error: function(error) { //报错抛出异常
console.log('Throw Error: ' + error);
}
});
}
-
测试接口调用成功
测试结果图
四、组件
组件生命周期
- ngOnChanges：在ngOnInit之前， 当数据绑定输入属性的值发生变化时调用。 并且有一个SimpleChanges类型的参数，它其实是一个类型为SimpleChange，并且键值为属性名的数组。
- ngOnInit：在第一次ngOnChanges之后。
- ngDoCheck：每次Angular变化检测时。
- ngAfterContentInit：在组件使用 ng-content 指令的情况下，Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
- ngAfterContentChecked：在组件使用 ng-content 指令的情况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
- ngAfterViewInit：在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
- ngAfterViewChecked：在子组件视图和子视图检查之后。
- ngOnDestroy：在Angular销毁组件/指令之前。
代码实现：
import { Component, OnInit, OnChanges, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
@Component({
selector: 'sl-user',
templateUrl: 'xxx.html', // 组件对应的html页面
styleUrls: ['xxx.css'] // 组件对应的样式文件
})
export class UserComponent implements OnInit, OnChanges,
AfterContentInit, DoCheck,
AfterContentChecked, AfterViewChecked,
AfterViewInit, OnDestroy {
constructor() {
ngOnInit() {
}
ngOnChanges() {
console.log('On changes');
}
// 脏值检测器被调用后调用
ngDoCheck() {
console.log('Do check');
}
// 组件销毁之前
ngOnDestroy() {
console.log('Destroy');
}
// 组件-内容-初始化完成 PS：指的是ContentChild或者Contentchildren
ngAfterContentInit() {
console.log('After content init');
}
// 组件内容脏检查完成
ngAfterContentChecked() {
console.log('After content checked');
}
// 组件视图初始化完成 PS：指的是ViewChild或者ViewChildren
ngAfterViewInit() {
console.log('After view init');
}
// 组件视图脏检查完成之后
ngAfterViewChecked() {
console.log('After view checked');
}
}
}
组件运行到销毁生命周期函数执行打印结果，如下图：
组件生命周期执行结果图
五、其它
TypeScript
在学习探索angular4.0中，我发现TypeScript技术还是需要跟进下学习的，不然遇到一些问题都不知道怎么处理，现在TypeScript也是前端学习的一个热门和趋势，推荐TypeScript官网学习地址
