颠覆你的想象-----angualr4.0_topromise和subscribe

第一，安装node.js

第二，安装vscode编辑器

第三，在vscode编辑器安装angularJs插件

第四，全局安装 Angular CLI 脚手架工具(只需要安装一次）

1. 使用 npm 命令安装
npm install -g @angular/cli

建议：
2. 安装 cnpm
npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 使用 cnpm 命令安装
cnpm install -g @angular/cli
1
2
3
4
5
6
7
8
9
10
11

第五，创建项目

1.打开 cmd 找到你要创建项目的目录
2.创建项目
ng new 项目名称 创建一个项目

ng new my-app
1

3.进入刚才创建的项目里面启动服务

cd my-app
cnpm install //安装依赖
ng serve --open
1
2
3

第六，目录结构分析

第七，自定义组件

在命令行进去项目主路径G:\AngularDemo\myapp> ，components/header这是自己定义的，路径和文件夹，如果没有文件夹自动创建。并生成一套组件。

ng g component components/header
1

第八，angualr4.0 绑定数据

数据文本绑定
{{}}

 {{title}}
1

.绑定 html

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

<div [innerHTML]="h"></div>
1
2
3

数据循环 *ngFor

*ngFor 普通循环

<ul>
 <li *ngFor="let item of list">
 {{item}}
 </li>
 </ul>
1
2
3
4
5

循环的时候设置 key

<ul>
 <li *ngFor="let item of list;let i = index;">
 {{item}} --{{i}}
 </li>
</ul>
1
2
3
4
5

template 循环数据

<ul>
 <li template="ngFor let item of list">
 {{item}}
 </li>
 </ul>
1
2
3
4
5

条件判断 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
1
2

执行事件 (click)=”getData()”

<button class="button" (click)="getData()">
 点击按钮触发事件
 </button>

 <button class="button" (click)="setData()">
 点击按钮设置数据
 </button>
1
2
3
4
5
6
7

绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>
1

表单处理

<input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){
 console.log(e)
 }
1
2
3
4

双向数据绑定

注意引入：FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({
 declarations: [
 AppComponent,
 HeaderComponent,
 FooterComponent,
 NewsComponent
 ],
 imports: [
 BrowserModule,
 FormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }




使用：

 <input type="text" [(ngModel)]="inputValue"/>
 {{inputValue}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Todolist 功能

html 代码

<input type="text" [(ngModel)]='username'>
<button (click)='addData()'>增加</button>

<ul>
 <li *ngFor="let item of list">
     {{item}}
 </li>
</ul>
1
2
3
4
5
6
7
8

Js 代码

export class TodolistComponent implements OnInit {
 list:any[];
 username:any;
 constructor() {

 }
 ngOnInit() {
 this.list=[];
 this.username='';
 }
 addData(){
 alert(this.username);
 this.list.push(this.username);
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自定义服务

回到根目录执行创建服务命令

ng g service my-new-service
创建到指定目录下面
ng g service services/storage

app.module.ts 里面引入创建的服务

import { StorageService } from './services/storage.service';

NgModule 里面的 providers 里面依赖注入服务
@NgModule({
 declarations: [
 AppComponent,
 HeaderComponent,
 FooterComponent,
 NewsComponent,
 TodolistComponent
 ],
 imports: [
 BrowserModule,
 FormsModule
 ],
 providers: [StorageService],
 bootstrap: [AppComponent]
})
export class AppModule { }



使用的页面引入服务，注册服务
import { StorageService } from '../../services/storage.service';
构造函数依赖注入服务，官方推荐这样使用，其实服务就是一个类。
constructor(private storage: StorageService) {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

app.module.ts 注册 HTTP JSONP 服务

引入 HttpModule 、JsonpModule
import { HttpModule, JsonpModule } from '@angular/http';
HttpModule 、JsonpModule 依赖注入
@NgModule({
 declarations: [
 AppComponent,
 HomeComponent,
 NewsComponent,
 NewscontentComponent
 ],
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 JsonpModule,
 AppRoutingModule
 ],
 providers: [StorageService,NewsService],
 bootstrap: [AppComponent]
})
export class AppModule { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

通过 Http、Jsonp 请求数据、不用 RxJs

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；不管如何解释 RxJS 其目标就是异步编程，
Angular 引入 RxJS 为了就是让异步可控、更简单

在需要请求数据的地方引入 Http
import {Http,Jsonp} from "@angular/http";

构造函数内申明：
constructor(private http:Http,private jsonp:Jsonp) { }

对应的方法内使用 http 请求数据

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&ca
tid=20&page=1")
 .subscribe(
 function(data){
 console.log(data);
 },function(err){
 console.log('失败');
 }
 );

this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&c
atid=20&page=1&callback=JSONP_CALLBACK")
 .subscribe(
 function(data){
 console.log(data);
 },function(err){
 console.log('失败');
 }
 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

使用 Post

引入 Headers 、Http 模块
import {Http,Jsonp,Headers} from "@angular/http";

实例化 Headers
private headers = new Headers({'Content-Type': 'application/json'});

.post 提交数据
this.http
 .post('http://localhost:8008/api/test', 
 JSON.stringify({username: 'admin'}), {headers:this.headers})
 // .toPromise()
 .subscribe(function(res){
 console.log(res.json());
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过 Http、Jsonp 请求数据、使用 RxJs。

需要用到请求数据的地方引入 Http 模块 Jsonp 模块，以及 rxjs
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其
目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单

大部分 RxJS 操作符都不包括在 Angular 的 Observable 基本实现中，基本实现只包括
Angular 本身所需的功能。
如果想要更多的 RxJS 功能，我们必须导入其所定义的库来扩展 Observable 对象， 以下
是这个模块所需导入的所有 RxJS 操作符：




引入 Http 、Jsonp、RxJs 模块
import {Http,Jsonp} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";

你可能并不熟悉这种 import 'rxjs/Rx'语法，它缺少了花括号中的导入列表：{...}。
这是因为我们并不需要操作符本身，这种情况下，我们所做的其实是导入这个库，加载并运行其中的脚本，
它会把操作符添加到 Observable 类中。

构造函数内申明：
constructor(private http:Http,private jsonp:Jsonp) { }

get 请求

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&p
age=1")
 .map(res => res.json()) .subscribe(
 function(data){
 console.log(data);
 }
 );


Jsonp 请求
this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page
=1&callback=JSONP_CALLBACK")
 .map(res => res.json()) .subscribe(
 function(data){
 console.log(data);
 }
 );


http.get 方法中返回一个 Observable 对象，我们之后调用 RxJS 的 map 操作符对返回的数据
做处理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47