快速入门Angular4.0

作者: 凉雨_ce28 | 来源:发表于2019-04-27 21:49 被阅读2004次

一、序章

关于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. 环境搭建
2. 路由跳转
3. 页面传参及接口请求
4. 组件
5. 其它

一、环境搭建

基础要求

安装node.js,建议node版本大于6.9.3
安装git
安装IDE，前端开发人员必备就不多说了

开发环境配置方式

1. 通过git clone模板

通过git克隆官方快速入门模板，打开终端执行命令git clone https://github.com/angular/quickstart
用IDE打开克隆下来的工程，我用的是webstorm，然后安装依赖，在当前工程目录下执行npm install
依赖下载安装完成后直接npm start运行

2.通过Angular CLI脚手架安装

可参考如下链接https://www.jianshu.com/p/327d88284abb

二、路由跳转

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官网学习地址

快速入门Angular4.0

一、序章

一、环境搭建

基础要求

开发环境配置方式

1. 通过git clone模板

2.通过Angular CLI脚手架安装

二、路由跳转

三、页面跳转传参&接口请求

3.1、通过routerLink传参方式

3.2、通过Router API中的navigate() 方法跳转路由传参

3.3、http接口请求

四、组件

组件生命周期

代码实现：

组件运行到销毁生命周期函数执行打印结果，如下图：

五、其它

TypeScript

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Angular.js专场

纵横研究院Angular技术专题社区