第一,安装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.打开 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)
}
双向数据绑定
注意引入: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}}
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/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) {
}
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 操作符对返回的数据
做处理。