一   基础内容

1.cnpm install angular-cli -g

2.ng new my-app --skip-npm

3.ng server --open

参数 --skip-npm  跳过Npm安装

   --routing  添加路由

4.ng g c 文件名称       //创建组件并注册

5.ng g service  文件名称 -m app.module         //创建服务并注册

5.ng build --aot    //文件生成和压缩

6.ng build -prod     //生产环境

快速创建组件文件

ng generate component component-name/user

简写 ng g c component-name/user

name:string;
age:number;
address:Address;
hobbies:string[];
hello:any;//任何类型

interface 自定义数据类型

interface Address{
  street:string,
  city:string
}

数组循环

<li *ngFor='let hobby of hobbies; let i = "index"'>{{i 1}}:{{hobby}}</li>

表单、事件

<button (click)="onClick()">点我</button>

<form (submit)="addHobby(hobby.value)">
 <div>
   <label for="hobby">爱好:</label>
   <input type="text" #hobby>
 </div>
</form>

onClick(){
  this.age=22;
}
addHobby(hobby){
  this.hobbies.unshift(hobby)
  return false;
}

<!--编辑表单-->
<div *ngIf="isEdit">
  <h1>编辑用户信息</h1>
  <form action="">
    <div>
      <label for="name">姓名：</label>
      <input type="text" [(ngModel)]="name" name="name">
    </div>
    <div>
      <label for="age">年龄：</label>
      <input type="text" [(ngModel)]="age" name="age">
    </div>
    <div>
      <label for="city">市：</label>
      <input type="text" [(ngModel)]="address.city" name="city">
    </div>
    <div>
      <label for="street">区：</label>
      <input type="text" [(ngModel)]="address.street" name="street">
    </div>
  </form>
</div>

二 数据类  service

1.创建services/data.services文件夹 的data.services.ts文件

import {Injectable} from '@angular/core';

@Injectable()
export class DataService{
  users:string[];

  constructor(){
    this.users=["刘伟波","李向阳"]
  }
  getUsers(){
    return this.users;
  }
}

2.app.modules.ts文件下引入

import { DataService } from "./services/data.services";

providers: [DataService],

3.需要的组件下引用

import { DataService } from "../../services/data.services";

constructor(public dataService:DataService) {
  console.log(this.dataService.getUsers());
}

三 es7 Observable

data.services.ts

import {Observable} from 'rxjs';

data:Observable<Array<number>>;
constructor(){
  // this.users=["刘伟波","李向阳"]
}
getUsers(){
  this.data=new Observable(observer=>{
    setTimeout(()=>{
      observer.next(1);
    },1000);
    setTimeout(()=>{
      observer.next(2);
    },2000);
    setTimeout(()=>{
      observer.next(3);
    },3000);
    setTimeout(()=>{
      observer.next(4);
    },4000);
    setTimeout(()=>{
      observer.complete();
    },5000);
  });
  return this.data;
  // return this.users;
}

需要的组件

data:any[]=[];
constructor(public dataService:DataService) {
  // console.log(this.dataService.getUsers());
  // this.users=this.dataService.getUsers();

  //Observable
  this.dataService.getUsers().subscribe(data=>{
    console.log(data);
    this.data.push(data);
  })
}

四 http 使用获取网络接口

get

1.data.services.ts

import {Http} from '@angular/http';
import 'rxjs';

constructor(public http:Http){

}

getUsers(){
  return this.http.get("http://jsonplaceholder.typicode.com/users")
    .map(res=>res.json())
}

需要的组件

import { DataService } from "../../services/data.services";

http://jsonplaceholder.typicode.com/          网络接口

constructor(public dataService:DataService) {
  // console.log(this.dataService.getUsers());
  this.dataService.getUsers().subscribe(users=>{
    console.log(users);
  })


}

post

表单

<form (submit)="onSubmit()">
  <div class="form-group">
    <label>姓名</label>
    <input type="text" class="form-control" [(ngModel)]="user.name" name="name">
  </div>
  <div class="form-group">
    <label>邮箱</label>
    <input type="text" class="form-control" [(ngModel)]="user.email" name="email">
  </div>
  <div class="form-group">
    <label>电话</label>
    <input type="text" class="form-control" [(ngModel)]="user.phone" name="phone">
  </div>

  <input type="text" type="submit" class="btn btn-success" value="提交">
</form>

提交事件

onSubmit(){
  this.dataService.addUser(this.user).subscribe(user=>{
    // console.log(user);
    this.users.unshift(user);
  })
}

data.services.ts

addUser(user){
  return this.http.post("http://jsonplaceholder.typicode.com/users",user)
    .map(res=>res.json());
}

delete

<button class="btn btn-danger" (click)="onDeleteClick(user.id)">删除</button>

onDeleteClick(id){
  this.dataService.deleteUser(id).subscribe(res=>{
    for(let i=0;i<this.users.length;i  ){
      if(this.users[i].id==id){
        this.users.splice(i,1);
      }
    }
  })
}

deleteUser(id){
  return this.http.delete("http://jsonplaceholder.typicode.com/users/" id)
    .map(res=>res.json())
}

update

<button class="btn btn-danger" (click)="onEditClick(user)">编辑</button>

onEditClick(user){
  this.isEdit=true;
  this.user=user;
}

onSubmit(isEdit){
  if(isEdit){
    this.dataService.updateUser(this.user).subscribe(user=>{
      //删除当前的
      for(let i=0;i<this.users.length;i  ){
        if(this.users[i].id==this.user.id){
          this.users.splice(i,1);
        }
      }
      //添加更新的
      this.users.unshift(this.user);
    })
  }else {
    this.dataService.addUser(this.user).subscribe(user=>{
      // console.log(user);
      this.users.unshift(user);
    })
  }

}

updateUser(user){
  return this.http.put("http://jsonplaceholder.typicode.com/users/" user.id,user)
    .map(res=>res.json())
}

五 路由

app.modules.ts

import { RouterModule,Routes } from '@angular/router';

引入路由页面

const appRoutes:Routes=[
  {path:"",component:HomeComponent},
  {path:"user",component:UserComponent}
];

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(appRoutes)
],

新的组件 点击切换路由

<li><a href="#" routerLink="/">Home</a></li>
<li><a href="#" routerLink="/user">user</a></li>

路由参数

<a class="btn  btn-primary pull-right" [(routerLink)]="'/user/' user.id">详情</a>

import {Router,ActivatedRoute,Params} from '@angular/router';

import { DataService } from "../../services/data.services";

id:number;
user:any={};
constructor(
  public dataService:DataService,
  private route: ActivatedRoute,
  private router:Router
) {
  this.route.params.subscribe((params:Params)=>{
    this.id=params["id"];
  })

}

ngOnInit() {
  this.dataService.getSingleUsers(this.id).subscribe((user)=>{
    console.log(typeof user);
    this.user=user;
  })
}

getSingleUsers(id){
  return this.http.get("http://jsonplaceholder.typicode.com/users/" id)
    .map(res=>res.json())
}

详情页

<h1>用户详情</h1>
<ul class="list-group">
  <li class="list-group-item">{{user.id}}</li>
  <li class="list-group-item">{{user.name}}</li>
  <li class="list-group-item">{{user.phone}}</li>
</ul>

bug1:angular-cli不及时刷新

webstorm

把这一行勾去掉就可以了。setting -> system settings -> "safe write"