loading...

3

angular4学习之路

angular读完大概需要15分钟

  • 发布时间:2017-11-20 11:23 星期一
  • 刘伟波
  • 224
  • 更新于2018-09-05 10:34 星期三


一   基础内容

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"


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!