Angular 4 学习笔记

Angular 4 学习笔记

*****angular4清除之前cli重新安装
1：npm uninstall -g @angular/cli //卸载全局的cli
2：npm cache clean //强制清除
3: npm install -g @angular/cli@1.4.10(这是angular4的)

 

*****angular4 引入bootstrap和jquery

1：npm install jquery --save
npm install bootstrap --save
(PS:如果出现下列报错信息可能是因为bootstrap版本太高，可换系列@3.3.7更换版本)
npm install bootstrap@3.3.7 --save

(或者一定要用4.0.0版本时要使用beta.2针对bootstrap4.0.0下载依赖包,然后把package.json里面bootstrap的版本去掉前面的"^")
npm install bootstrap@4.0.0-beta.2 --save
"bootstrap": "4.0.0-beta.2"

npm install popper.js --save

2：系列命令告诉angular4的typescript认识javascript;
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

3: 在.angular-cli.json文件中的style和script中引入jquery和bootstrap的JS和css
"styles": [
"styles.css",//默认自带的
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]
4：在tsconfig.app.json文件中的type里配置jquery和bootstrap（用于测试时）
"types": ["jquery","bootstrap"]

5：此时就可以在组件和控制器中用bootstrap的class和jquery的$以及语法了

例如： <button class="btn btn-success">按钮11</button>
<button class="btn btn-info btn-sm qw1" (click)="test()">按钮qwqwqwq</button>

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'appzhangpeng1233';
test(){
alert($(".qw1").text());
}
}
*****创建子组件（一般在父组件app下创建子组件）
1：cd src/app

2: ng g c 组件名

*****双项数据绑定[(ngModel)]
1：需要在app.module.ts中引入import { FormsModule } from '@angular/forms';

2:在imports里面声明一下这个模块
imports: [
BrowserModule,
FormsModule
]

*****模板数据绑定
1：{{}}

***** 属性绑定
1: 用中括号---[属性]=“数据”

***** @Input 父组件向子组件传数据（需要在父组件准备数据 ，在子组件的html中使用数据）

1: 因为在父组件的html中调用了子组件标签 所以要在父组件的html中的子组件标签上添加自定义属性 [自定义属性名]=父组件里面的数据

2：在子组件引入import { Input} from '@angular/core';

3: 在子组件逻辑中用@Input() 自定义名字；（用@Input来修饰一下自定义属性名）；

4：在子组件html中使用自定义属性名来（代替了父组件的数据名）正常拿数据；

*****事件绑定（event）|| on-event
1：找到需要绑定的标签
2：添加事件例如：<button (click)="clickme()">click me</button>
3:在ts文件中实现事件方法

*****自定义事件绑定 子组件事件向父组件传递触发父组件内的方法 @Output
1: 因为在父组件的html中调用了子组件标签 所以要在父组件的html中的子组件标签上添加自定义事件 （自定义属性名）=父组件里面的事件

2：在子组件引入import { Output} from '@angular/core';

3: 在子组件逻辑中用@Output() 自定义事件名；（用@Oput来修饰一下自定义事件名）；
4：@Output() 自定义事件名=new EventEmitter（）;(EventEmitter 这个方法需要在顶部的import { (EventEmitter from '@angular/core';引入)

5：在子组件实现一个标签填加上事件触发子组件中的方法 ，让子组件的方法去触发自定义事件 自定义事件再去触发父组件中的方法；
<button (click)="zizujianfangfa()"></button>
子组件的事件 ：zizujianfangfa(){
this.自定义事件名.emit（“这里传递数据”）;
}

*****路由
1：在app文件夹下新建app.router.ts;
2: 引入需要路由的组件 import { 组件名 } from '组件路径'；
3: 在app.router.ts文件中引入路由模块// import{Routes,RouterModule} from '@angular/router';
4：引入提供器模块 import{ModuleWithProviders} from '@angular/core';
5: 创建一个常量const 常量名:Routes=[{path:'',component:''},{path:'',component:''}];
6: 导出一个自定义路由提供器模块 export const 模块名:ModuleWithProviders=RouterModule.forRoot(第五步的常量名)；
7：在主组件的html中添加router-outlet,
8: 在app.nodule.ts中引入第五步的常量名，在imports中声明一下这个常量名；

9：兼容IE9就得用hash方法了；
9_1：在app.module.ts里面引入 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
9_2: 在app.module.ts里面的providers中 写入{provide: LocationStrategy, useClass: HashLocationStrategy}
9_3：浏览器路由地址就改变成了hash模式 需要写成 带顶号的形式例如localhost:4200/#/navbar

或者直接在router.ts中的export const routing:ModuleWithProviders=RouterModule.forRoot(route);中加入,{useHash:true}变成
export const routing:ModuleWithProviders=RouterModule.forRoot(route,{useHash:true});效果跟（9_1,9_2,9_3就可以省略了）一样

10：a标签添加链接来路由
10_1: 使用a标签<a [routerLink]="['/']"></a>根路径
<a [routerLink]="['path名']">主页</a>

*****路由参数
1：在路由文件例如：app.router.ts中的path路径名后添加 /:路由参数；
2：在添加路由参数的组件中引入 import {ActivatedRoute} from "@angular/router";
3：在constructor中创建一个对象constructor(private 对象名:ActivatedRoute) {
this.外部存储变量=对象名.snapshot.params["参数名"];//在参数中捕获到参数数据但是地址栏刷新时页面还保留上一次的数据
router.params.subscribe((params:Params)=>this.pop=params["person"]);//这个可以做到地址栏刷新时页面也刷新（推荐使用Params需要在import {ActivatedRoute，Params} from "@angular/router";中引入）；
}；
4：在组件中展示数据

*****指令

1：ngClass

2: ngStyle

3:*ngIf

4 *ngFor

<div *ngFor="let ww of people">
<h1 *ngIf="true" [ngClass]="{red:true}" [ngStyle]="{'background':'green或者表达式'}">
{{ww.p}}
{{ww.d}}
Welcome to {{title}}!
</h1>
</div>

5: *ngFor 与*ngIf不能同时用在同一个标签 可以嵌套一般是ngFor里面嵌套ngIf;

*****管道
内置管道
| upperase |lowercase |slice

自定义管道

1：在app文件夹下创建管道 ng g pipe 管道名
2：在管道文件中设计过滤
transform(people（这是输出的数据）: any, term（这是匹配参数）?: any): any {
if(term===undefined) return people;
return people.filter(function(p){
return p.p.toLowerCase().includes(term.toLowerCase());
});
}

*****服务
1：在app文件夹下创建一个服务文件 ng g s 服务名，在app.module.ts中引入这个服务，需要在providers里面声明一下这样在其他组件中调用服务时就不用单独写prviders去声明了;
2: 使用请求数据模块 ，类似双向数据绑定时需要引入FormModule模块一样，所以在app.module.ts中要引入HttpModule模块，并在imports中声明；
3: 字符串转化成对象，需要引入第三方库rxjs; import 'rxjs/add/operator/map'; 使用里面的方法map();
4：在服务文件里面写公共方法供外界组件使用，要请求服务器数据需要引入Http类impoort { Http } from '@angular/http';

constructor(private http:Http) { }
clic(){
return this.http.get("../assets/people.json").map((data)=>data.json());//在服务中写获取数据
}

 

5：在组件中引入服务： import { 服务类 } from '创建的服务文件';
6：在constructor中创建 服务类的对象
constructor(private https:HttpService) { }

7： 在组建中通过调用服务里的方法来用subscribe操作数据
clickM(){
this.https.clic().subscribe(
(data)=>{this.people=data;console.log(this.people)},//成功时的方法
(fail) => alert(fail)//失败时的方法
);
}

8：把获取到的数据赋值给组件中的已知变量；通过已知变量在html中展示数据

 

 

 

继续学习中 。。。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有