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

快速入门Angular4.0

2019-04-27  本文已影响2004人  凉雨_ce28

一、序章

关于Angular版本，Angular官方已经统一命名Angular 1.x统称为Angular JS；Angular 2.x及以上统称Angular

一、环境搭建

基础要求

开发环境配置方式

1. 通过git clone模板

2.通过Angular CLI脚手架安装

二、路由跳转

import { RouterModule } from '@angular/router';
@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

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（父子路由配置）
     // 访问/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'},
        ]
    }

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/settings/password">Change password</a>
  <a routerLink="/settings/profile">Profile Settings</a>
</nav>

当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

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 { }

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传参方式

export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/' },
  { path: 'user/:name', component: UserComponent },
];

<a [routerLink]="['/user', '凉雨啊']">我的</a>
<!--或者方式2-->
<!--<a [routerLink]="['/user']" [queryParams]="{name:'凉雨啊'}">我的</a>-->

// 获取参数值
this.name = this.routeInfo.snapshot.params['name'];
// 接收方式2传递的值
// this.name = this.routeInfo.snapshot.queryParams['name'];
console.log(this.name)

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

{ path: 'user', component: UserComponent },

// 页面带参数跳转方法
goUser() {
    this.router.navigate(['/user'], {
      queryParams: {
        name: '另一个凉雨'
      }
    });
  }

// 接收传过来的参数
this.name = this.routeInfo.snapshot.queryParams['name'];
console.log(this.name)

3.3、http接口请求

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@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 });
  }
}

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);
      }
    });
  }

四、组件

组件生命周期

代码实现：
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官网学习地址

上一篇 下一篇

猜你喜欢

热点阅读