Angular单页面开发

一、安装最新版本的 nodejs

注意：请先在终端/控制台窗口中运行命令 node -v 和 npm -v，来验证一下你正在运行

node 6.9.x 和 npm 3.x.x 以上的版本。更老的版本可能会出现错误，更新的版本则没

问题。

二、全局安装 Angular CLI 脚手架工具

1. 使用 npm 命令安装

npm install -g @angular/cli

2.使用 cnpm 命令安装

cnpm install -g @angular/cli

三、创建项目

1. 打开 cmd 找到你要创建项目的目录

2. 创建项目 ng new 项目名称创建一个项目 ng new my-app

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

cnpm install //安装依赖

ng serve --open

四、目录结构分析

1. app.module.ts、组件分析

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。目前，它只声明了 AppComponent。稍后它还会声明更多组件。

//Angular 模块类描述应用的部件是如何组合在一起的。每个应用都至少有一个 Angular 模块，也就是根模块，

// 用来引导并运行应用。你可以为它取任何名字。常规名字是 AppModule。也就是 app.module.ts 文件

/*引入组件*/

import { BrowserModule } from '@angular/platform-browser'; /*BrowserModule，浏览器解析的模块*/

import { NgModule } from '@angular/core'; /*angualrjs 核心模块*/

import { FormsModule } from '@angular/forms'; /*表单数据绑定表单验证需要的模块*/

import { AppComponent } from './app.component'; /*根组件*/ @NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用。*/

@NgModule({

declarations: [ /*引入当前项目运行的的组件*/

AppComponent

],

imports: [ /*引入当前模块运行依赖的其他模块*/

BrowserModule,

FormsModule

],

providers: [], /*定义的服务回头放在这个里面*/

bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件）通过引导根 AppModule 来启动应用，这里一般写的是根组件*/

})

export class AppModule { }

2 创建 angualr 组件

https://github.com/angular/angular-cli

创建组件：

ng g component components/header

组件内容详解：

import { Component, OnInit } from '@angular/core'; /*angular 核心*/

@Component({

selector: 'app-header', /*使用组件的名称*/

templateUrl: './header.component.html', /*html 模板*/

styleUrls: ['./header.component.css'] /*css 样式*/

})

export class HeaderComponent implements OnInit {

constructor() { /*构造函数*/

}

ngOnInit() { /*初始化加载的生命周期函数*/

}

}

五，常用的内容

1. 数据文本绑定

{{}}

<h1> {{title}} </h1>

2.绑定属性绑定 html

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

<div [innerHTML]='h'></div>

3、*ngFor 普通循环

<ul>

<li *ngFor="let item of list;let i=index">

{{i}}------- {{item}}

</li>

</ul>

4、条件判断

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

5、执行事件

<button (click)="getData()" >xxxxx</button>

getData(){

alert('xxxxxx');

}

6、双向数据绑定

<input [{ngModel}]="inputValue" />

注意引入：FormsModule

imports: [

BrowserModule,

FormsModule

]

使用：

<input type='text' [{ngModel}]="inputValue" />

{{ inputValue }}

六、创建 angualr 服务使用服务

ng g service my-new-service

创建到指定目录下面

ng g service services/storage

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

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

2. NgModule 里面的 providers 里面依赖注入服务

providers: [StorageService]

3、使用的页面引入服务，注册服务

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

constructor(private storage: StorageService) { }

4.使用

this.storage.内容

七、Angular4.x get post 以及 jsonp 请求数据

1.引入 HttpModule 、JsonpModule （普通的 HTTP 调用并不需要用到 JsonpModule）

import { HttpModule, JsonpModule } from '@angular/http';

2.HttpModule 、JsonpModule 依赖注入

imports: [

BrowserModule,

FormsModule,

HttpModule,

JsonpModule,

AppRoutingModule

],

使用 Http、Jsonp：

1、在需要请求数据的地方引入

Http import {Http,Jsonp} from "@angular/http";

2、构造函数内申明：

constructor(private http:Http,private jsonp:Jsonp) { }

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

this.http.get(url).subscribe( function(data){

console.log(data);

},function(err){

console.log('失败');

} );

this.jsonp.get("http://www.xxx.com&callback=JSONP_CALLBACK") .subscribe( function(data){

console.log(data);

},function(err){

console.log('失败');

} );

使用 Post

1. 引入 Headers 、Http 模块在用的地方

import {Http,Jsonp,Headers} from "@angular/http";

2. 实例化 Headers

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

3.post 提交数据

this.http .post('http://localhost:8008/api/test', JSON.stringify({username: 'admin'}),

{headers:this.headers}) .subscribe(function(res){

console.log(res.json());

});

使用 rxjs 请求数据

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其

目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。大部分 RxJS 操作

符都不包括在 Angular 的 Observable 基本实现中，基本实现只包括 Angular 本身所需的功

能。如果想要更多的 RxJS 功能，我们必须导入其所定义的库来扩展 Observable 对象，以下是这个模块所需导入的所有 RxJS 操作符：

1、引入 Http 、Jsonp、RxJs 模块

import {Http,Jsonp} from "@angular/http";

import {Observable} from "rxjs";

import "rxjs/Rx";

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

2、构造函数内申明：

constructor(private http:Http,private jsonp:Jsonp) { }

3、get 请求

this.http.get(url).map(res => res.json()) .subscribe( function(data){

console.log(data);

} );

4、Jsonp 请求

this.jsonp.get("http://www.xx.com&callback=JSONP_CALLBACK") .map(res =>

res.json()) .subscribe( function(data){

console.log(data);

} );

http.get 方法中返回一个 Observable 对象，我们之后调用 RxJS 的 map 操作符对返回的数据做处理。

八、路由

创建路由

ng new 项目名称 --routing

会有 app-routing.module.ts文件

若没有我们可以手动创建

样式：

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

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

//引入组件

import { HomeComponent } from './components/home/home.component';

import { UserComponent } from './components/user/user.component';

import { HomeconComponent } from './components/home/homecon/homecon.component';

import { UserlistComponent } from './components/user/usercon/userlist/userlist.component';

import { UseraddComponent } from './components/user/usercon/useradd/useradd.component';

import { UsereditComponent } from './components/user/usercon/useredit/useredit.component';

//配置路由

const routes: Routes = [

{

path:'home',

component:HomeComponent,

children:[

{

path:'homecon',

component:HomeconComponent

},

{ //匹配不到路由的时候加载的组件或者跳转的路由

path:'**',/*任意的路由*/

redirectTo:'/home/homecon'

}

]

},

{

path:'user',

component:UserComponent,

children:[

{

path:'userlist',

component:UserlistComponent,

},

{

path:'useradd',

component:UseraddComponent,

},

{

path:'useredit',

component:UsereditComponent,

},

{ //匹配不到路由的时候加载的组件或者跳转的路由

path:'**',/*任意的路由*/

redirectTo:'/user/userlist'

}

]

},

{ //匹配不到路由的时候加载的组件或者跳转的路由

path:'**',/*任意的路由*/

redirectTo:'home'

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {}

获取传值

1.引入

import {ActivatedRoute } from '@angular/router';

2.实例化

constructor(private route:ActivatedRoute) { }

path:'con/aid:123',

ngOnInit() {

this.route.params.subscribe(function(data){

console.log(data);//123

}) }

8.3 默认跳转路由

<a routerLink='/home'>xxxx</a>

//刚进来路由为空跳转的路由(了解)

{

path:'',

redirectTo:'home',

pathMatch:"full"

}

//匹配不到路由的时候加载的组件或者跳转的路由

{ path: '**', /*任意的路由*/

redirectTo:'home' }

8.4 routerLinkActive 设置 routerLink 默认选中路由

<a routerLink='/home' routerLinkActive="active">xxxx</a>

<a routerLink='/news' routerLinkActive="active>xxxx</a>

.active{

color:red;}

8.5 路由的 js 跳转

1. 引入

import { Router } from '@angular/router';

2.初始化

export class HomeComponent implements OnInit {

constructor(private router: Router) {

}

ngOnInit() {

}goNews(){

// this.router.navigate(['/news', hero.id]);

this.router.navigate(['/news']);

}}

3.路由跳转

this.router.navigate(['/news', hero.id]);

8.6 父子路由

1. 创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component';

import { NewslistComponent } from './components/newslist/newslist.component';

2. 配置路由

{path: 'news',component:NewsComponent,

children: [

{path:'newslist'

,component:NewslistComponent},

{path:'newsadd',

component:NewsaddComponent}

]

}

3. 父组件中定义 router-outlet

<router-outlet></router-outlet>

九、父子组件传值

1. 父组件给子组件传值

1.子组件

import { Component, OnInit ,Input } from '@angular/core';

2.父组件调用子组件

<app-header [msg]="msg"></app-header>

3.子组件中接收数据

export class HeaderComponent implements OnInit {

@Input() msg:string

constructor() { }

ngOnInit() {

}}

2. 子组件给父组件传值

1. 子组件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';

2.子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter();

/*用 EventEmitter 和 output 装饰器配合使用指定类型变量*/

3. 子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){

// alert('zhixing'

);

this.outer.emit('msg from child')}

4.父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer

<app-heade (outer)="runParent($event)"></app-header>

5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据

runParent(msg:string){

alert(msg);

}

十、获取 dom 节点操作 dom 节点

模板

<div #mydiv>box</box>

ts 文件

import { Component, OnInit,ElementRef,ViewChild} from '@angular/core';

@ViewChild('mydiv') mydiv: ElementRef;

ngOnInit() {

let el = this.mydiv.nativeElement

;console.log(el)

// 使用原生方法

el.style.color='red';

}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

Angular单页面开发

推荐阅读更多精彩内容