第一，安装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.org3. 使用 cnpm 命令安装
cnpm install -g @angular/cli

第五，创建项目

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

ng new my-app

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

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

第六，目录结构分析

第七，自定义组件

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

ng g component components/header

第八，angualr4.0 绑定数据

数据文本绑定
{{}}

 {{title}}

.绑定 html

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

数据循环 *ngFor

*ngFor 普通循环

<ul><li *ngFor="let item of list">{{item}}</li></ul>

循环的时候设置 key

<ul><li *ngFor="let item of list;let i = index;">{{item}} --{{i}}</li>
</ul>

template 循环数据

<ul><li template="ngFor let item of list">{{item}}</li></ul>

条件判断 *ngIf

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

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

<button class="button" (click)="getData()">点击按钮触发事件</button><button class="button" (click)="setData()">点击按钮设置数据</button>

绑定属性

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

表单处理

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

双向数据绑定

注意引入：FormsModuleimport { 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}}

Todolist 功能

html 代码

<input type="text" [(ngModel)]='username'>
<button (click)='addData()'>增加</button><ul><li *ngFor="let item of list">{{item}}</li>
</ul>

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

自定义服务

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

ng g service my-new-service
创建到指定目录下面
ng g service services/storageapp.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) {}

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

通过 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('失败');});

使用 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());});

通过 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 操作符对返回的数据
做处理。