《Angular4从入门到实战》学习笔记

时间 2019-11-17

标签 Angular4从入门到实战学习笔记栏目 AngularJS 繁體版

原文原文链接

《Angular4从入门到实战》学习笔记css

腾讯课堂：米斯特吴视频讲座html

二〇一九年二月十三日星期三14时14分前端

What Is Angular?（简介）node

前端最流行的主流JavaScript框架； git

由谷歌倾情打造并维护；github

致力于构建单页面应用(SPA);web

是主流MEAN综合框架中的一部分；typescript

打破HTML静态，建立动态的WEB应用。express

不是一个服务端的框架或技术；不是JS的一个库，例如jQuery,React等；不是用于设计；不是一个平台或一门语言；不是一个插件。（很是好）npm

Why Use Angular?（优势）

能够快速开发及代码迭代；（相对于瀑布模型，就是开发过程用户可见，先开发一个雏形，再迭代开发）

全部代码都经过组件实现（模块化）

动态获取数据内容；

跨平台

ECMAScript 6（如下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。

TypeScript:

是JavaScript的超集；微软建立及维护；拥有具体的类型；面向对象；与JavaC#类似

Components(组件)：

在Angular4中都是以组件式开发；在组件中包含选择器,模板等；当前的类用户处理逻辑。

安装：AngularCLI(脚手架)或从github中拉取并使用

依赖的环境：NPM&NODE：也就是安装node

从官网安装并测试安装成功否：node -v

因为Angular CLI的一些资源被墙掉了，因此，要使用淘宝镜像下载安装，不然，慢且会主线问题。淘宝镜像：https://npm.taobao.org/。

命令行输入：npm install -g cnpm

再输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Angular Cli,命令行输入：cnpm install -g @angular/cli@latest

检验是否安装成功：ng help

Angular CLI的命令关键字为：ng

建立项目：第一步ng new Test 出现绿色字体Ctrl+C终止批处理，由于很卡或出错

第二步在项目文件夹输入 cnpm install 从淘宝镜像中安装

而后用VScode（Visual Studio Code）打开项目或别的软件打开。

官方网站指示:>npm install -g @angular/cli 换成cnpm install -g @angular/cli@latest

>ng new my-dream-app

>cd my-dream-app

>ng serve --open

持久使用：npm config set registry https://registry.npm.taobao.org

验证是否成功：npm config get registry 或npm info express

使用：npm install -g cnpm --registry=https://registry.npm.taobao.org

二〇一九年二月十三日星期三23时37分

Angular项目的目录结构：（网上摘录）

组件相关的概念：

1.组件元数据装饰器（@Component）

简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.

Component装饰器包含多个属性，这些属性的值叫作元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑

2.模板（Template）

咱们能够经过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，通常来讲，模板看起来很像html，可是咱们能够在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。

3.控制器（controller）

控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件全部的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器经过数据绑定与模板来通信，模板展示控制器的数据，控制器处理模板上发生的事件。

装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，好比：

输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性容许在组件树种传递数据。提供器（providers）：这个是用来作依赖注入的。生命周期钩子（LifeCycle Hooks）：一个组件从建立到销毁的过程当中会有多个钩子会被触发，相似于Android中的Activity的生命周期。样式表：组件能够关联一些样式表。动画（Animations）： Angular提供了一个动画包来帮助咱们方便的建立一些跟组件相关的动画效果，好比淡入淡出等。输出属性（@Outputs）：用来定义一些其余组件可能须要的事件或者用来在组件之间共享数据

下面咱们来看看模块文件

app.module.ts：这个文件表示模块

与AppComponent相似，模块也须要装饰器来装饰。

二〇一九年二月十四日星期四0时3分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第三讲《Angular4建立组件及设置属性》

运行刚刚建立的Angular项目，命令行进入到Angular\a4app项目目录，输入ng serve --open

或推送出要显示的网页，或者在浏览器地址栏输入：http://localhost:4200/

感受就是一个web网站在运行，更改index.html等相关文件内容，只要按保存都会自动触发浏览器更新。

项目执行的第一个文件就是项目目录a4app下src目录里面的index.html文件。

在index.html中是没法直接引入自定义的或其余的CSS文件的，必须把CSS文件引入到src目录中的styles.css文件中，此文件自己还能够定义样式（此文件一开始除了一行注释之外是空的）。如：@charset "UTF-8";@import "test.css";

感受src目录下的app目录里面的这五个文件都挺重要的，尤为是这个app.component.ts,里面的title内容一变，网页上的标题当即跟着改变。

app.component.ts文件的内容：

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

@Component({

selector: 'app-root', /*表示该组件将展现在index.html中的<app-root>标签中*/

templateUrl: './app.component.html', /*声明该组件所应用的模板*/

styleUrls: ['./app.component.css'] /*声明模板所应用的渲染*/

})

export class AppComponent {

title = 'Hello 世界!';

}

只要是组件，都会在app目录下建立！

引用组件：先打开a4app中的readme.md，拷贝第11行的`ng generate component component-name`

再开起来一个终端（由于原来的终端正在运行WEB服务），目录切换到项目目录a4app下,输入刚刚拷贝的命令行：ng generate component 组件名；也能够用简写的模式ng g c 组件名。

好比新建一个存放组件的文件夹及新建组件：ng g c components/user

因而：在app文件夹下新建了一个components目录，components目录又建了一个user目录，

user目录下面新建了四个文件，分别是组件css、html、ts、spec.ts其spec.ts用于测试的，没用

咱们在根组件app的html文件中加入<app-user></app-user>

(由于user的ts文件指定的选择器就是app-user,这与index中设置标签< app-root >一模一样)

而后，就能够修改user下的html文件的内容和设置ts文件的对应的属性了。

user目录下的app.component.ts

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

@Component({

selector: 'app-user',

templateUrl: './user.component.html',

styleUrls: ['./user.component.css']

})

export class UserComponent implements OnInit {

name = "hemiah"; /*添加属性*/

constructor() { } /*自动建立了两个空的方法*/

ngOnInit() { }

}

好比添加了一个name属性。而后，咱们就能够在html中用{{name}}来调用这个name属性的值。

user目录下的app.component.ts还能够这样写：

二〇一九年二月十四日星期四2时33分53秒

腾讯课堂：米斯特吴《Angular4从入门到实战》之第四讲《Angular4操做数据(增删改查)》

user.component.html文件实例：

<h1>Hello {{name}}!</h1>

<ul>

<li>邮箱：{{email}}</li>

<li>地址：{{address.city}}{{address.state}}{{address.street}}</li>

</ul>

<ul>

{{i+1}}:{{hobby}}

</li>

</ul>

<div>

</div>

</form>

<hr>

<button (click)="toggleEdit()">是否编辑用信息</button>

<h1>编辑用户信息</h1>

<form>

<div>

<!--使用ngModel必需要在app下的app.module.ts文件中引入

import { FormsModule} from '@angular/forms';

还要在此文的imports:[]中添加上：FormsModule 注：Angular2是自动添加的-->

</div>

<div>

</div>

<div>

</div>

</form>

</div>

user.component.ts文件实例：

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

@Component({

selector: 'app-user',

templateUrl: './user.component.html',

styleUrls: ['./user.component.css']

})

export class UserComponent implements OnInit { /*最外层包括此行以上，由系统自动生成*/

/*先定义属性*/

name: string;

age: number;

email: string;

address: Address;

hobbies: string[];

hello: any;

isEdit:boolean = false;

constructor() { /*在函数中注入依赖就能够做为类的属性被使用了*/

console.log("constructor ran ...");

}

ngOnInit() { /*此方法内给属性赋值,系统生成的空函数*/

console.log("ngOnInit ran ...");

this.name = "Hemiah";

this.age = 30;

this.email = "test@test.com";

this.address = {

street: "定泗路",

city: "北京",

state: "昌平区"

};

this.hobbies = ["写代码", "看电影", "听音乐"];

}

/*再定义方法*/

onClick() {

// console.log(123);

this.name = "Mr.Wu";

this.hobbies.push("New Hobby"); /*push追加到后面*/

}

addHobby(hobby){

// console.log(hobby);

this.hobbies.unshift(hobby); /* unshift插入到前面*/

return false;

}

deleteHobby(i){

this.hobbies.splice(i,1); /*splice删除，从下标开始1个项目*/

}

toggleEdit(){

this.isEdit= !this.isEdit;

}

} /*最外层*/

interface Address{ /*外层之外自定义数据类型*/

street:string,

city:string,

state:string

}

大体捋了一下执行过程：

一、系统最早执行index.html,遇到其中的<app-root></app-root>标签则去执行

二、 app.component.ts文件声明的选择器selector:app-root。此文档的两个语句分别指向了两个文件

styleUrls: ['./app.component.css'];templateUrl: './app.component.html',

三、执行./app.component.html，引出文件中的<app-user></app-user>标签，而后去执行

四、 user.component.ts文件中生命的选择器：selector:app-user。此文档包含两个语句：

styleUrls: ['./user.component.css']；templateUrl: './user.component.html',

五、最后执行：./user.component.html

ts文件相似于JavaScript文件，不过，困惑的是，为何html文件中没有引用语句呢？

二〇一九年二月十四日星期四5时32分43秒

二〇一九年二月十四日星期四12时10分29秒

腾讯课堂：米斯特吴《Angular4从入门到实战》之第五讲《Angular4核心功能Service》

What Is Service?

服务主要应用于多个组件中的数据管理；

可让组件更干净；

DRY—Don't Repeat Yourself；

经过HTTP Module对数据进行增删改查。

建立服务的步骤：

建立一个新文件 /services/my-service.service.ts

import@Injectable而且建立class;

引入Service并添加到procide中；

任何组件须要使用须要引入并建立对象调用。

也使用命令建立Service:

ng g service services/my-service

会自动帮助咱们建立文件以及写入对应的class

咱们须要手动将Service添加到procider中

二〇一九年二月十四日星期四22时29分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第六讲《Angular4建立及使用Service》

Angular>a4app> ng g c components/home 建立一个新组件

ng serve --open 启动web服务

修改app.component.html 把标签换成：<app-home></app-home>指向新组件

在app目录下手动建立一个目录services，在目录中手动建立一个文件data.service.ts

手动添加初步代码以下：

import {Injectable} from '@angular/core'; /*引入Injectable*/

@Injectable() /*调用Injectable*/

export class DataService{ /*导出数据*/

users:string[];

constructor(){

this.users=["米斯特吴","Ac总有一天","吴海洋"]

}

getUsers(){

return this.users; /*准备给home.component.html返回数据*/

}

准备把data.service.ts中的数据返回给home.component.html

首先要在app.module.ts中要引入 import { DataService} from './services/data.service';

并放入此文件的提供器中：providers:[DataService], 这一行代码很重要！

接下来就可使用了，好比在home.componet.ts中，先引入这个服务：

import { DataService} from '../../services/data.service';

而后改造已有的空构造函数constructor(){}以下：

users:string[];

constructor(public dataService:DataService) {

// console.log(this.dataService.getUsers());

this.users=this.dataService.getUsers();

}

而后就能够在home.componet.html中拿到home.componet.ts中的数据了！

<h1>Hello World!</h1>

<ul>

</li>

</ul>

这就是数据引入的全过程！

好比，在user组件中引入，第一步，在user.componet.ts中引入

import { DataService} from '../../services/data.service';

第二步：在constructor也建立好：constructor(public dataService:DataService){}

而后，返回home.componet.ts定义一个数组：users：string[];

而后再回到user.componet.ts中定义一个数组以下：

users:string[];

constructor(public dataService:DataService) {

this.users=this.dataService.getUsers();

}

其实就是改造user.componet.ts文件，添加引入，定义构造函数引入，而后引入!

接下在在user.componet.html中加入home.componet.html中的相似语句的数据引用，数据就顺利的引入到了user.componet.html中来了。

最后，最后，来到app.componet.html中，经过修改标签<app-user></app-user>或是<app-home></app-home>就能够重定向选择器，来拿取不一样的数据了。这样就达到数据统一管理的目的！！！！！

接下来的例子user是不用的，这里仅仅是演示数据的管理的便利性。

在html中引入一些好看的样式：

www.bootswatch.com

点击Cosmo的DOWNLOAD

出现页面：https://bootswatch.com/4/cosmo/bootstrap.min.css，拿到CDN（内容分发网络）也就是这个网址名字。

而后，在index.html中引入：

而后修改html加上指定的class名，就起到了渲染的目的了：

home.componet.html：

<h1>Hello World!</h1>

</li>

</ul>

2/15/2019 1:03:35 AM

二〇一九年二月十五日星期五1时4分33秒

腾讯课堂：米斯特吴《Angular4从入门到实战》之第七讲《Angular4 ES7中的观察者对象Observable》

ES7不隶属于Angular但后面的知识要用到它：

首先在data.service.ts中引入Observable: import {Observable} from 'rxjs';

而后定义一个新的数据类型：data:Observable<Array<number>>;而后修改getUsers(){}

getUsers(){

// return this.users; /*准备给home.component.html返回数据*/

this.data = new Observable(observer=>{

//让咱们当前的data,等于新建立起来的Observable对象，对象里面会有对应的

//给咱们传输的数据，括号里面的是回调函数，咱们用箭头函数，在箭头函数中，

//咱们想让它每隔1秒传输对应的数据，而后在咱们的页面展现出来实时获取到的数据

//咱们传的数据就至关于咱们get请求的数据

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; /*这是很是关键的一个语句，用于返回数据 */

}

而后，在home.component.ts中引用数据：

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); /*把data push进来*/

})

}

最后经过home.componet.html达到最终引用到页面之目的：（ts只能引用到控制台层面）

<h1>Hello World!</h1>

</li>

</ul>

这就是ES7中的Observable之后要用到的。 2/15/2019 2:45:13 AM

二〇一九年二月十五日星期五2时46分18秒

腾讯课堂：米斯特吴《Angular4从入门到实战》之第八讲《Angular4使用Http中Get获取网络接口数据》

第一步：

在app.module.ts引入一个get请求：

Angular 4.3 版本后，推荐使用 HttpClient，能够参考 Angular HTTP Client 快速入门

因此，把import { HttpModule} from '@angular/http';

改成：import { HttpClientModule} from '@angular/common/http';

而后，在imports:[]中再引入一下：HttpClientModule

第二步：

在services中使用HTTP,打开：data.service.ts:先把把有关Observable的有关内容清除

而后引入HTTP：(视频中的老版本在我这新版本上还真的出问题，干脆百度一下，一次解决)

引入的命令为：import { HttpClient} from '@angular/common/http';

（视频中的为：import { Http} from '@angular/http';）

而后用constructor建立对象http(名字任意起)，之后用这个对象来调用get,pot,post,delet等:

constructor(public http:Http){ }

而后：咱们把请求的数据在getUsers(){}中return回去,get中就能够放请求数据的接口：

（模拟数据接口：打开网站http://jsonplaceholder.typicode.com/请求Resources的users）

return this.http.get("http://jsonplaceholder.typicode.com/users ")

返回数据时，实际上是返回的观察者对象Observable要用到map方法，因为不能直接调用，因此，必须在文件头引入：import 'rxjs/add/operator/map'; 这一句总是报错！！！！！！取消就不会报错！

而后再getUsers(){}中加入.map(res=>res.json()); 这句也报错！！！只好也取消！

好像这两行取消了，后台依然可以抓取到网页的数据，是否是Angular新版本已经用HttpClient把这两个功能实现了呀？

接下来：在home.component.ts

constructor(public dataService:DataService) {

this.dataService.getUsers().subscribe(users=>{ /*观察者对象下的订阅者模式*/

console.log(users); 观察控制台的数据输出否？

})

}

若是数据输出正确，则注释掉控制台输出，添加以下代码：

constructor(以前)：users:any[];

constructor中添加：this.users = users; 把订阅者模式抓取到的数据users赋给了本组件声明的数组users[]里面来了。users数组因而就有了数据，html就可使用他们了。

最后，在home.component.html中添加：

<h1>Hello World!</h1>

<li class="list-group-item">邮箱：{{user.email}}</li>

<li class="list-group-item">电话：{{user.phone}}</li>

</ul>

</div>

这节课学得最费劲，由于搭建的版本与视频例题不一致，不知因此云，百度和思考花费了一些时间。

2/15/2019 6:08:21 AM

继续上面的app.module.ts出错处理：

好像还不行，改为这样就经过了，但就是pipe()这么写，我本身都不知道是啥意思！

import { map} from 'rxjs/operators';

.pipe(map(res => res));

下面这篇文章感受挺权威了：

《从Angular 4开始，Angular的http请求改用HttpClient。》

添加HttpClientModule

首先须要引入HttpClientModule，它须要放在BrowserModule后：

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

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

imports: [

BrowserModule,

HttpClientModule,

declarations: [

AppComponent,

bootstrap: [ AppComponent ]

})

export class AppModule {}

请求JSON数据

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

import { HttpClient } from '@angular/common/http';

@Injectable()

export class ConfigService {

constructor(private http: HttpClient) { }

getData() {

return this.http.get(this.dataUrl);

}

HttpClient其中一个特性是默认返回的数据为json数据。，使用它返回的数据以下：

http.get(url).subscribe(...)

对于angular 4以前，则须要作json转换：

http.get(url).map(res => res.json()).subscribe(...)

请求非JSON数据

若是须要返回非JSON数据，则须要在请求时设置responseType头信息为text：

getTextFile(filename: string) {

return this.http.get(filename, {responseType: 'text'})

.pipe(

tap(

data => this.log(filename, data),

error => this.logError(filename, error)

)

);

}

http.get()返回的是一个Observable<String>

2/15/2019 6:42:47 AM

结论是：在data.service.ts中的这两句没有必要添加了，由于HttpClient其中一个特性是默认返回的数据为json数据，从Angular4.X之后的版本，就不在须要以下设置啦：

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

.map(res=>res.json());

二〇一九年二月十五日星期五15时20分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第九讲《Angular4使用Http中的Post传递数据》

先注释掉user中ts和html中的Observable，其实已经注释掉了，只是标注Observable注释标记而已

接下来开始操做home.component.html文件了......

<h1>Hello World!</h1>

</div>

</div>

</div>

</form>

<hr>

<li class="list-group-item">邮箱：{{user.email}}</li>

<li class="list-group-item">电话：{{user.phone}}</li>

</ul>

</div>

</div>而后在home.component.ts中设计user对象并实现html中定义的onSubmit方法并自定义addUser（）方法：

export class HomeComponent implements OnInit {

users:any[];

user = {

name:"",

email:"",

phone:""

}

constructor(public dataService:DataService) {

this.dataService.getUsers().subscribe(users=>{ /*观察者对象下的订阅者模式*/

// console.log(users); /*观察控制台数据是否正确输出*/

this.users = users;

})

}

onSubmit(){

this.dataService.addUser(this.user).subscribe(user=>{

// console.log(user); /*查看控制台输出*/

this.users.unshift(user); /*直接显示在html页面中*/

})

}

而后在data.service.ts中实现addUser这个方法：再也不.map(res=>res.json())

addUser(user){

return this.http.post("http://jsonplaceholder.typicode.com/users",user)

}

2/15/2019 4:29:31 PM16:29:08

二〇一九年二月十五日星期五16时30分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第十讲《Angular4使用Http中的Delete删除数据》

在home.component.html中的ul标签后添加删除按钮

而后在ts里面home.component.ts来实现onDeleteClick()方法：

onDeleteClick(id){

// console.log(id);

this.dataService.deleteUser(id).subscribe(res=>{

})

}

自定义一个方法deleteUser(id)。

而后，再在data.service.ts中实现这个deleteUser(id)方法：

deleteUser(id){

return this.http.delete("http://jsonplaceholder.typicode.com/users/"+id)

}

而后在ts里面home.component.ts来进一步实现onDeleteClick()方法的删除动做：

而后在ts里面home.component.ts来实现onDeleteClick()方法：

onDeleteClick(id){

// console.log(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);

}

})

}

这样就测试成功了。删除就能够操做了。不过，刷新页面，删除的数据又回来来了，是由于网站提供的数据是测试数据，不能被真正的删除。

2/15/2019 5:50:48 PM

二〇一九年二月十五日星期五19时48分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第11讲《Angular4使用Http中的put更新数据》

先在hpme.component.html添加编辑按钮：

第二步：在home.component.ts定义onEditClick()这个按钮：

因为编辑要与输入共用一个框，因此，要先定义：

isEdit:boolean=false;

而后：

onEditClick(user){

this.isEdit=true;

this.user=user; /*先把值传到输入框（编辑框）内*/

}

把onSubmit()赋参数：onSubmit(isEdit) 以接收其值，定义了一个新的方法updataUser(this.user)。

onSubmit(isEdit){

if (isEdit){ /*若是isEdit=true则执行put方法进行编辑编辑*/

this.dataService.updataUser(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 { /*若是isEdit=fales则执行post方法*/

this.dataService.addUser(this.user).subscribe(user=>{

// console.log(user); /*查看控制台输出*/

this.users.unshift(user); /*直接显示在html页面中*/

})

}

把html中的form作相应修改：<form (submit)="onSubmit(isEdit)">

若是isEdit传过来的是false,则执行post；若是是true则执行put（编辑）！

为了让home.component.ts中心的方法updataUser(this.user)起做用，要在data.service.ts中进行设定：

updataUser(user){

return this.http.put("http://jsonplaceholder.typicode.com/users/"+user.id,user)

}

2/15/2019 9:07:15 PM

二〇一九年二月十五日星期五21时11分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第12讲《Angular4核心模块Router》

路由就是解决从一个视图到另外一个视图的导航，也就是不通过网络请求，刷新页面的状况下跳转到另外一个页面。速度很是快。

路由的基本步骤：

<base href>在index.html

引入路由模块

建立路由

设置路由出口

添加路由连接

首先在index.html中设置根路径：<base href="/">

导入路由模块：import { RouterModule,Routes } from '@angular/router';

添加路由模块：imports:[

BrowserModule,

RouterModule.forRoot(appRoutes)

建立路由：

const appRoutes:Routes = [

{ path: '',component:HomeComponent },

{ path: 'about',component:AboutComponent },

{ path: '**',component:pageNotFoundComponent }

];

建立路由连接：<a class="nav-link" href="#" routerLink="/">Home</a>

添加组件出口：<router-outlet></router-outlet>

第一步：先检视一下index.html中是否已经有了<base href="/">

第二步：到app.module.ts中添加路由模块：

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

并把路由模块用一下：

imports:[

BrowserModule,

RouterModule.forRoot(appRoutes) 用forRoot来执行一下下面建立的路由appRoutes

并设置一个路由：

const appRoutes:Routes = [

{ path: '',component:HomeComponent },

{ path: 'user',component:UsertComponent }

];

第三步：在app.component.html中把<app-home></app-home>注释掉，而后添加一个出口：

<router-outlet></router-outlet>

这是，在地址栏输入：http://localhost:4200

http://localhost:4200/user

将显示不一样的网页。

不过，这个路由还不够智能，须要继续下面的步骤：

建立一个导航的组件：

在控制台，切换到D:\Angular\a4app>执行：ng g c components/navbar

PS D:\Angular\a4app> ng g c components/navbar

CREATE src/app/components/navbar/navbar.component.html (25 bytes)

CREATE src/app/components/navbar/navbar.component.spec.ts (628 bytes)

CREATE src/app/components/navbar/navbar.component.ts (269 bytes)

CREATE src/app/components/navbar/navbar.component.css (0 bytes)

UPDATE src/app/app.module.ts (985 bytes)

PS D:\Angular\a4app>

新建的navbar自动更新到了app.module.ts中去了，也就是，多了一条语句：

import { NavbarComponent } from './components/navbar/navbar.component';

@NgModule中的declarationts:[]也引入了一行：NavbarComponent

而后在navbar.component.html添加导航，为了便捷，到bootstrap网站抓一个导航过来：

百度bootstrap中文网www.bootcss.com àBootstrap3中文文档(v3.3.7)

à下载Bootstrapà点击右侧导航“实例精选”à点击Bootstrap框架的基本用法下面左侧窗口

à出现Bootstrap starter template页面后à右键查看源码，或Ctrl-U查看源码，或省去前面的全部步骤，直接在地址栏输入：view-source:https://v3.bootcss.com/examples/starter-template/ 查看源码，把导航的这部分拷贝到navbar.component.html中：

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Project name</a>

</div>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</div>

</div>

</nav>

改形成：

<a class="navbar-brand" href="#">Angular4</a>

</ul>

</div>

</nav>

而后，咱们在app.component.html中调用这个导航：

<app-navbar></app-navbar>

2/15/2019 11:56:14 PM（ul li的显示样式始终没搞明白！）

二〇一九年二月十六日星期六0时8分

腾讯课堂：米斯特吴《Angular4从入门到实战》之第13讲《公益广告》

腾讯课堂：米斯特吴《Angular4从入门到实战》之第14讲《Angular4核心模块Router参数》

路由参数就是在访问的网址上加上不一样的参数而跳转到不一样的页面。

第一步：再到a4app建立一个新组件：ng g c components/userDetail

第二步：在app.module.ts里除了自动更新的引入新组件，还要写路由参数：

const appRoutes:Routes = [

{ path: '',component:HomeComponent},

{ path: 'user',component:UserComponent},

{ path: 'user/:id',component:UserDetailComponent},

];

第三步：到user-detail.component.ts中获取路由参数：

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

并在contructor(){}作相关的定义：

constructor(

private route:ActivatedRoute,

private router:Router

) {

this.route.params.subscribe((params:Params)=>{

console.log(params.id);

})

}

到浏览器地址栏输入：http://localhost:4200/user/1，就可跳转到user-detail work!中，说明链接成功

接下来继续设置：

打开home.component.html设置a标签

接下来根据咱们的ID，请求其所对应的数据：在user-detail.component.ts

id:number;

this.route.params.subscribe((params:Params)=>{

// console.log(params.id);

this.id=params.id;

})

}

再把服务引进来：

import {DataService} from '../../services/data.service';

因而咱们就能够在data.service.ts中的添加方法：

getSingleUser(id){

return this.http.get("http://jsonplaceholder.typicode.com/users/"+id)

}

接下来，在user-detail.component.ts调用这个方法：

public dataServicde:DataService，

ngOnInit() {

this.dataServicde.getSingleUser(this.id).subscribe((user)=>{

console.log(user);

})

}

再添加：user:object={};

最后，咱们就能够在user-detail.component.html中实现这个代码：

<li class="list-group-item">{{user.email}}</li>

<li class="list-group-item">{{user.phone}}</li>

<li class="list-group-item">{{user.website}}</li>

</ul>

顺利经过！

user-detail.component.ts完整代码：

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

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

import {DataService} from '../../services/data.service';

@Component({

selector: 'app-user-detail',

templateUrl: './user-detail.component.html',

styleUrls: ['./user-detail.component.css']

})

export class UserDetailComponent implements OnInit {

id:number;

user:object={};

constructor(

public dataServicde:DataService,

private route:ActivatedRoute,

private router:Router

) {

this.route.params.subscribe((params:Params)=>{

// console.log(params.id);

this.id=params.id;

})

}

ngOnInit() {

this.dataServicde.getSingleUser(this.id).subscribe((user)=>{

// console.log(user);

this.user=user;

})

}

data.service.ts完整代码：

import {Injectable} from '@angular/core'; /*引入Injectable*/

import { HttpClient} from '@angular/common/http';

// import 'rxjs/add/operator/map'; HttpClient返回的就是json数据了，因此这个引入废弃了

@Injectable() /*调用Injectable*/

export class DataService{

constructor(public http:HttpClient){ /*建立对象http以此调用get、post等*/

}

getSingleUser(id){

return this.http.get("http://jsonplaceholder.typicode.com/users/"+id)

}

getUsers(){

return this.http.get("http://jsonplaceholder.typicode.com/users")

// .map(res => res.json()); HttpClient返回的就是json数据了，因此再也不须要转换了

}

addUser(user){

return this.http.post("http://jsonplaceholder.typicode.com/users",user)

}

deleteUser(id){

return this.http.delete("http://jsonplaceholder.typicode.com/users/"+id)

}

updataUser(user){

return this.http.put("http://jsonplaceholder.typicode.com/users/"+user.id,user)

}

app.module.ts完整代码：

import { BrowserModule } from '@angular/platform-browser';

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

import { FormsModule} from '@angular/forms';

import { HttpClientModule} from '@angular/common/http';

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

import { AppComponent } from './app.component';

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

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

import { DataService} from './services/data.service';

import { NavbarComponent } from './components/navbar/navbar.component';

import { UserDetailComponent } from './components/user-detail/user-detail.component';

const appRoutes:Routes = [

{ path: '',component:HomeComponent},

{ path: 'user',component:UserComponent},

{ path: 'user/:id',component:UserDetailComponent},

];

@NgModule({

declarations: [

AppComponent,

UserComponent,

HomeComponent,

NavbarComponent,

UserDetailComponent

imports: [

BrowserModule,

FormsModule,

HttpClientModule,

RouterModule.forRoot(appRoutes)

providers: [DataService],

bootstrap: [AppComponent]

})

export class AppModule { }

本视频课程基本完结了，后面还有一个具体的代码

2/16/2019 1:24:23 AM

二〇一九年二月十六日星期六1时25分27秒总用时两天半要熟练还得具体项目磨炼