Angular2、4入门基础知识，小的概念
1. 使用引用符来格式化HTML代码。
1 @Component({
2 selector: 'app-heroes',
3 templateUrl: './heroes.component.html',
4 styleUrls: ['./heroes.component.css']
5 })2. 数据双向绑定方式。
在使用表单输入绑定数据之前，我们需要引入表单模块FormsModule包至我们的Angular模块中。引入包的方法是，直接添加需要的包至NgModel的imports数组中。
1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core';
3 import { FormsModule } from '@angular/forms';
4
5 import { AppComponent } from './app.component';
6 import { HeroesComponent } from './heroes/heroes.component';
7
8
9 @NgModule({
10 declarations: [
11 AppComponent,
12 HeroesComponent
13 ],
14 imports: [
15 BrowserModule,
16 FormsModule
17 ],
18 providers: [],
19 bootstrap: [AppComponent]
20 })
21 export class AppModule { }表单中写法：
1 <input [(ngModel)]="hero.name" placeholder="name">
3.使用自定义对象数组
1 const HEROES: Hero[] = [
2 {id: 11, name: 'Mr.Nice'},
3 {id: 12, name: 'Narco'},
4 {id: 13, name: 'Bombasto'},
5 {id: 14, name: 'Celeritas'},
6 {id: 15, name: 'Magneta'},
7 {id: 16, name: 'RubberMan'},
8 {id: 17, name: 'Dynama'},
9 {id: 18, name: 'Dr IQ'},
10 {id: 19, name: 'Magma'},
11 {id: 20, name: 'Tornado'}
12 ];4.使用列表li
1 <li *ngFor="let hero of heroes">
2 <span class="badge">{{hero.id}}</span>
3 {{hero.name}}
4 </li>5.为组件添加样式
1 @Component({
2 selector: 'my-app',
3 template: ``,
4 styles: [`
5 .selected {
6 background-color: #CFD8DC;
7 color:white;
8 }
9 .heroes {
10 margin: 0 0 2em 0;
11 list-style-type: none;
12 padding: 0;
13 width: 15em;
14 }
15 `]
16 }]6.定义变量
与Java/C++定义变量的类型写在前面不同的时，TypeScript的定义方式为
变量名:类型
1 selectedHero:Hero;
7.定义方法
必须定义返回类型
1 onSelect(hero: Hero): void {
2 this.selectedHero = hero;
3 }8.使用结构指令
直接使用某个可能为空的变量，会导致异常抛出，需要使用if结构进行判断。angular中有一种名为结构指令(structural directives)可以改变DOM的结构。这类的指令有ngIf和ngFor。用法如下：
1 <div *ngIf="selectedHero">
2 <h2>{{selectedHero.name}} details!</h2>
3 <div><label>id:</label>{{selectedHero.id}}</div>
4 <div><label>name:</label>{{selectedHero.name}}</div>
5 </div>9.改变组件的CSS样式类
[class.className]=true/false
key为样式的类名，value为true或者false.应用：已选择的项添加已选择样式。未选择的项消除已选择样式
1 <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
2 <span class="badge">{{hero.id}}</span>
3 {{hero.name}}
4 </li>10.引入类
1 import { Hero } from './hero';11.使用服务Service
使用@Injectable修饰类
import {Injectable} from '@angular/core';
import {HEROES} from "./mock-heroes";
import {Hero} from "./hero";
@Injectable()
export class HeroServie {
getHeroes(): Hero[] {
return HEROES
}
}如何在组件中使用这个服务？传统的方式会使用new关键字去实例化。但官方不建议这么做，有以下几点理由：
当服务类的构造方法改变时，我们必须要修改每一处使用到它的代码
如果需要缓存对象的状态，每次都new是做不到的。
在代码中写死new类来实例化，将无法替换其实现。比如，测试环境和生产环境的服务可能不同，当要切换不同版本是比较麻烦的。
官方推荐使用注入来使用服务。为组件添加providers元数据。
1 providers: [HeroServie],
组件的构造方法改为：
1 constructor(private heroService: HeroServie) {
2 this.heroes = heroService.getHeroes();
3 }ngOnInit生命周期回调接口
angular提供了一系统的接口监控组件的生命周期各个环节。
1 import { OnInit } from '@angular/core';
2
3 export class AppComponent implements OnInit {
4
5 ngOnInit(): void {
6
7 // somthing to be done
8
9 }
10
11 }Promise解决回调的问题
服务有时候是耗时的操作，如果直接调用可能会阻塞UI，使用Promise可以解决这个问题。
1 @Injectable()
2 export class HeroServie {
3 getHeroes(): Promise<Hero[]> {
4 return Promise.resolve(HEROES);
5 }
6
7 }1 private getHeroes() : void {
2 this.heroService.getHeroes().then(heroes => this.heroes = heroes);
3 }14.使用路由Routing
路由配置文件写法
import {Routes, RouterModule} from "@angular/router";
import {ModuleWithProviders} from "@angular/core";
import {HeroesComponent} from "./heroes.component";
const appRoutes: Routes = [{
path: 'heroes',
component: HeroesComponent
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);模板中使用
1 <a routerLink="/heroes">Heroes</a> 2 <router-outlet></router-outlet>
routerLink指令告知路由器点击跳转至哪个地址，<router-outlet></router-outlet>表示路由出口，即要把组件(routerLink指向的组件)加载在哪个位置.
15.使用templateUrl代替template
1 @Component({
2 selector: 'my-dashboard',
3 templateUrl: 'app/dashboard.component.html'
4 })16.按下标显示数组中的指定记录
1 this.heroService.getHeroes().then(heroes=>this.heroes = heroes.slice(1, 5));
17.参数化路由
路由配置：id为参数
1 {
2 path: 'detail/:id',
3 component: HeroDetailComponent
4 }获取参数：
1 export class HeroDetailComponent implements OnInit {
2 ngOnInit(): void {
3 this.route.params.forEach((params: Params)=> {
4 let id = +params['id']; //加号的作用是将字符串参数转化为数字
5 this.heroService.getHero(id).then(hero => this.hero = hero);
6 });
7 }
8
9 constructor(private heroService: HeroServie,
10 private route: ActivatedRoute) {
11
12 }
13
14 @Input()
15 hero: Hero;
16
17 }18.代码中转向
1 gotoDetail(hero: Hero): void {
2 let link = ['/detail', hero.id];
3 this.router.navigator(link);
4 }19. 使用内在Web API模拟HTTP服务
内存数据模拟数据库数据。
1 InMemoryWebApiModule.forRoot(InMemoryDataService),
service实现
1 import {InMemoryDbService} from "angular2-in-memory-web-api";
2
3 export class InMemoryDataService implements InMemoryDbService {
4 createDb(): {} {
5 let heroes = [
6 {id: 11, name: 'Mr. Nice'},
7 {id: 12, name: 'Narco'},
8 {id: 13, name: 'Bombasto'},
9 {id: 14, name: 'Celeritas'},
10 {id: 15, name: 'Magneta'},
11 {id: 16, name: 'RubberMan'},
12 {id: 17, name: 'Dynama'},
13 {id: 18, name: 'Dr IQ'},
14 {id: 19, name: 'Magma'},
15 {id: 20, name: 'Tornado'}
16 ]
17 return heroes;
18 }
19
20 }HTTP请求示例
1 getHeroes(): Promise<Hero[]> {
2 return this.http
3 .get(this.heroesUrl)
4 .toPromise()
5 .then(response => response.json().data as Hero[]) // 转换类型
6 .catch(this.handleError)
7 }20.使用HTTP Promise
Angular的http.get返回的是Observable,Observables是一个强大的管理异步数据流的方式。
当我们使用toPromise方法将Observables转化为Promise后，操作就像操作普通的Promise一样。使用toPromise方法需要引入外部方法
1 import 'rxjs/add/operator/toPromise';
21.HTTP请求异常处理
1 .catch(this.handleError);
1 private handleError(error: any): Promise<any> {
2
3 console.error('An error occurred', error); // for demo purposes only
4
5 return Promise.reject(error.message || error);
6
7 }angular体系
angular体系主要包括：模块Module,组件Component,模板Template,元数据Metadata,数据绑定Data Banding,服务Service,指令，依赖注入
模块是ES6标准之一，每个模块目的性非常单一。在Angular中，一般模块输出的都是一个组件类，需要配合
import来加载模块。有一类模块是Angular本身定义好的，即库模块，当加载
angular2/core模块时，可以调用一个核心类库。库模块入要有angular/core(核心类库),angular/http(网络请求相关),angular2/router(路由相关),angular2/common(表单、指令等)1 总结 - Angular应用由模块组成 2 3 - 模块输出可以是：类、函数、值或其他模块
组件是为了控制显示把HTML模板及样式。一般，每个组件都配有一个类，用来定义业务能力。通过类的属性和方法与视图进行交互。
模板是为了告知Angular如何去渲染组件。Angular模板有其特殊的语法。
元数据是告知Angular如何处理一个类。一个类如果没有元数据的声明，就是一个无法单独运行的普通的类。可以使用
注解来定义类的元数据。如@Component,注解中可以带上一些参数：1 - selector - CSS选择器 2 3 - templateUrl - 的模板地址 4 5 - directives - 指令或组件数组 6 7 - providers - 注册的Service服务数组，从而在组件类构造函数中能够正确的实例化这些服务
除了
@Component外，还有Injectable,@Input,@Output,@RouterConfig元数据。数据绑定是一种协调组件与模板之间的通信机制，通过HTML元素来描述采用哪种数据绑定形式。数据绑定包括属性绑定
[hero]、事件绑定(click)、双向绑定[(ngModel)]="hero.name"指令。一个指令是由元数据和一个类组成，使用元数据注解
@Directive修饰就是一个指令。指令和组件的功能类似，他们的区别是指令侧重对HTML元素功能的扩展。而组件是一个具体一的业务。指令分为结构性指令如*ngFor,*ngIf等和属性指令,如[(ngModel)]服务。模块中需要使用到的值、函数都可以是服务Service。服务通常 是一个目的性非常明确的类。如日志Service,数据Service，应用程序配置信息，工资计算器等 。
组件是是服务的最大消费者，组件都是靠服务来处理大部分事务，组件不会直接从服务器获取数据、不验证用户输入，都是委派验服务来完成。一般我们遵循的原则是：把应用程序逻辑转化成服务 ，并通过依赖注入提供组件来消费服务。
依赖注入。依赖注入是一种对类实例的新方法。我们可以在引导应用程序启动时实例一个服务如
1 bootstrap(AppComponent, [BackendService, HeroService, Logger]);
或者在组件级别里注册服务
1 @Component({ 2 providers: [HeroService] 3 }) 4 export class HeroesComponent { ... }
Angular2入门导向笔记
2016年09月13日 16:55:20
阅读数：1753
1. 使用引用符来格式化HTML代码。
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id:</label>{{hero.id}}</div>
<div><label>name:</label>{{hero.name}}</div>`
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
2. 数据双向绑定方式
在使用表单输入绑定数据之前，我们需要引入表单模块FormsModule包至我们的Angular模块中。引入包的方法是，直接添加需要的包至NgModel的imports数组中。
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
表单中写法：
<input [(ngModel)]="hero.name" placeholder="name">- 1
3.使用自定义对象数组
const HEROES: Hero[] = [
{id: 11, name: 'Mr.Nice'},
{id: 12, name: 'Narco'},
{id: 13, name: 'Bombasto'},
{id: 14, name: 'Celeritas'},
{id: 15, name: 'Magneta'},
{id: 16, name: 'RubberMan'},
{id: 17, name: 'Dynama'},
{id: 18, name: 'Dr IQ'},
{id: 19, name: 'Magma'},
{id: 20, name: 'Tornado'}
];- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4.使用列表li
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span>
{{hero.name}}
</li>- 1
- 2
- 3
- 4
5.为组件添加样式
@Component({
selector: 'my-app',
template: ``,
styles: [`
.selected {
background-color: #CFD8DC;
color:white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
`]
}]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
6.定义变量
与Java/C++定义变量的类型写在前面不同的时，TypeScript的定义方式为
变量名:类型
selectedHero:Hero;- 1
7.定义方法
必须定义返回类型
onSelect(hero: Hero): void {
this.selectedHero = hero;
}- 1
- 2
- 3
8.使用结构指令
直接使用某个可能为空的变量，会导致异常抛出，需要使用if结构进行判断。angular中有一种名为结构指令(structural directives)可以改变DOM的结构。这类的指令有ngIf和ngFor。用法如下：
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id:</label>{{selectedHero.id}}</div>
<div><label>name:</label>{{selectedHero.name}}</div>
</div>- 1
- 2
- 3
- 4
- 5
9.改变组件的CSS样式类
[class.className]=true/false
key为样式的类名，value为true或者false.应用：已选择的项添加已选择样式。未选择的项消除已选择样式。
<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span>
{{hero.name}}
</li>- 1
- 2
- 3
- 4
10.引入类
import { Hero } from './hero';- 1
11.使用服务Service
使用@Injectable修饰类
import {Injectable} from '@angular/core';
import {HEROES} from "./mock-heroes";
import {Hero} from "./hero";
@Injectable()
export class HeroServie {
getHeroes(): Hero[] {
return HEROES
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
如何在组件中使用这个服务？传统的方式会使用new关键字去实例化。但官方不建议这么做，有以下几点理由：
当服务类的构造方法改变时，我们必须要修改每一处使用到它的代码
如果需要缓存对象的状态，每次都new是做不到的。
在代码中写死new类来实例化，将无法替换其实现。比如，测试环境和生产环境的服务可能不同，当要切换不同版本是比较麻烦的。
官方推荐使用注入来使用服务。为组件添加providers元数据。
providers: [HeroServie],- 1
组件的构造方法改为：
constructor(private heroService: HeroServie) {
this.heroes = heroService.getHeroes();
}- 1
- 2
- 3
12.使用ngOnInit生命周期回调接口
angular提供了一系统的接口监控组件的生命周期各个环节。
import { OnInit } from '@angular/core';
export class AppComponent implements OnInit {
ngOnInit(): void {
// somthing to be done
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
13. 使用Promise解决回调的问题
服务有时候是耗时的操作，如果直接调用可能会阻塞UI，使用Promise可以解决这个问题。
@Injectable()
export class HeroServie {
getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES);
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
private getHeroes() : void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}- 1
- 2
- 3
14.使用路由Routing
路由配置文件写法
import {Routes, RouterModule} from "@angular/router";
import {ModuleWithProviders} from "@angular/core";
import {HeroesComponent} from "./heroes.component";
const appRoutes: Routes = [{
path: 'heroes',
component: HeroesComponent
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
模板中使用
<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>- 1
- 2
routerLink指令告知路由器点击跳转至哪个地址，<router-outlet></router-outlet>表示路由出口，即要把组件(routerLink指向的组件)加载在哪个位置.
15.使用templateUrl代替template
@Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html'
})- 1
- 2
- 3
- 4
16.按下标显示数组中的指定记录
this.heroService.getHeroes().then(heroes=>this.heroes = heroes.slice(1, 5));- 1
17.参数化路由
路由配置：id为参数
{
path: 'detail/:id',
component: HeroDetailComponent
}- 1
- 2
- 3
- 4
获取参数：
export class HeroDetailComponent implements OnInit {
ngOnInit(): void {
this.route.params.forEach((params: Params)=> {
let id = +params['id']; //加号的作用是将字符串参数转化为数字
this.heroService.getHero(id).then(hero => this.hero = hero);
});
}
constructor(private heroService: HeroServie,
private route: ActivatedRoute) {
}
@Input()
hero: Hero;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
18.代码中转向
gotoDetail(hero: Hero): void {
let link = ['/detail', hero.id];
this.router.navigator(link);
}- 1
- 2
- 3
- 4
19. 使用内在Web API模拟HTTP服务
内存数据模拟数据库数据。
InMemoryWebApiModule.forRoot(InMemoryDataService),- 1
service实现
import {InMemoryDbService} from "angular2-in-memory-web-api";
export class InMemoryDataService implements InMemoryDbService {
createDb(): {} {
let heroes = [
{id: 11, name: 'Mr. Nice'},
{id: 12, name: 'Narco'},
{id: 13, name: 'Bombasto'},
{id: 14, name: 'Celeritas'},
{id: 15, name: 'Magneta'},
{id: 16, name: 'RubberMan'},
{id: 17, name: 'Dynama'},
{id: 18, name: 'Dr IQ'},
{id: 19, name: 'Magma'},
{id: 20, name: 'Tornado'}
]
return heroes;
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
HTTP请求示例
getHeroes(): Promise<Hero[]> {
return this.http
.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[]) // 转换类型
.catch(this.handleError)
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
20.使用HTTP Promise
Angular的http.get返回的是Observable,Observables是一个强大的管理异步数据流的方式。
当我们使用toPromise方法将Observables转化为Promise后，操作就像操作普通的Promise一样。使用toPromise方法需要引入外部方法。
import 'rxjs/add/operator/toPromise';
- 1
- 2
21.HTTP请求异常处理
.catch(this.handleError);
- 1
- 2
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
angular体系
angular体系主要包括：模块Module,组件Component,模板Template,元数据Metadata,数据绑定Data Banding,服务Service,指令，依赖注入
模块是ES6标准之一，每个模块目的性非常单一。在Angular中，一般模块输出的都是一个组件类，需要配合
import来加载模块。有一类模块是Angular本身定义好的，即库模块，当加载
angular2/core模块时，可以调用一个核心类库。库模块入要有angular/core(核心类库),angular/http(网络请求相关),angular2/router(路由相关),angular2/common(表单、指令等)
- Angular应用由模块组成
- 模块输出可以是：类、函数、值或其他模块- 1
- 2
- 3
组件是为了控制显示把HTML模板及样式。一般，每个组件都配有一个类，用来定义业务能力。通过类的属性和方法与视图进行交互。
模板是为了告知Angular如何去渲染组件。Angular模板有其特殊的语法。
元数据是告知Angular如何处理一个类。一个类如果没有元数据的声明，就是一个无法单独运行的普通的类。可以使用
注解来定义类的元数据。如@Component,注解中可以带上一些参数：
- selector - CSS选择器
- templateUrl - 的模板地址
- directives - 指令或组件数组
- providers - 注册的Service服务数组，从而在组件类构造函数中能够正确的实例化这些服务- 1
- 2
- 3
- 4
- 5
- 6
- 7
除了@Component外，还有Injectable,@Input,@Output,@RouterConfig元数据。
数据绑定是一种协调组件与模板之间的通信机制，通过HTML元素来描述采用哪种数据绑定形式。数据绑定包括属性绑定
[hero]、事件绑定(click)、双向绑定[(ngModel)]="hero.name"指令。一个指令是由元数据和一个类组成，使用元数据注解
@Directive修饰就是一个指令。指令和组件的功能类似，他们的区别是指令侧重对HTML元素功能的扩展。而组件是一个具体一的业务。指令分为结构性指令如*ngFor,*ngIf等和属性指令,如[(ngModel)]服务。模块中需要使用到的值、函数都可以是服务Service。服务通常 是一个目的性非常明确的类。如日志Service,数据Service，应用程序配置信息，工资计算器等 。
组件是是服务的最大消费者，组件都是靠服务来处理大部分事务，组件不会直接从服务器获取数据、不验证用户输入，都是委派验服务来完成。一般我们遵循的原则是：把应用程序逻辑转化成服务 ，并通过依赖注入提供组件来消费服务。
依赖注入。依赖注入是一种对类实例的新方法。我们可以在引导应用程序启动时实例一个服务如
bootstrap(AppComponent, [BackendService, HeroService, Logger]);- 1
或者在组件级别里注册服务
@Component({
providers: [HeroService]
})
export class HeroesComponent { ... }- 1
- 2
- 3
- 4
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/joson793847469/article/details/52527454
- 上一篇 »TypeScript 面向对象基础知识
- 下一篇 »JavaScript语言基础知识点图示，转