zoukankan html css js c++ java

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                  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 }

12.使用`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 }

13. 使用`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元数据。
1. 数据绑定是一种协调组件与模板之间的通信机制，通过HTML元素来描述采用哪种数据绑定形式。数据绑定包括属性绑定[hero]、事件绑定(click)、双向绑定[(ngModel)]="hero.name"
2. 指令。一个指令是由元数据和一个类组成，使用元数据注解@Directive修饰就是一个指令。指令和组件的功能类似，他们的区别是指令侧重对HTML元素功能的扩展。而组件是一个具体一的业务。指令分为结构性指令如*ngFor,*ngIf等和属性指令,如[(ngModel)]
3. 服务。模块中需要使用到的值、函数都可以是服务Service。服务通常是一个目的性非常明确的类。如日志Service,数据Service，应用程序配置信息，工资计算器等。
  
  组件是是服务的最大消费者，组件都是靠服务来处理大部分事务，组件不会直接从服务器获取数据、不验证用户输入，都是委派验服务来完成。一般我们遵循的原则是：把应用程序逻辑转化成服务，并通过依赖注入提供组件来消费服务。
4. 依赖注入。依赖注入是一种对类实例的新方法。我们可以在引导应用程序启动时实例一个服务如
```
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>`
})

2. 数据双向绑定方式

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 {
}

表单中写法：

<input [(ngModel)]="hero.name" placeholder="name">

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'}
    ];

4.使用列表`li`

<li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span>
    {{hero.name}}
</li>

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;
             }
     `]
 }]

6.定义变量

与Java/C++定义变量的类型写在前面不同的时，TypeScript的定义方式为

变量名:类型

selectedHero:Hero;

7.定义方法

必须定义返回类型

onSelect(hero: Hero): void {
    this.selectedHero = hero;
}

8.使用结构指令

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id:</label>{{selectedHero.id}}</div>
    <div><label>name:</label>{{selectedHero.name}}</div>
</div>

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>

10.引入类

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元数据。

providers: [HeroServie],

组件的构造方法改为：

constructor(private  heroService: HeroServie) {
    this.heroes = heroService.getHeroes();
}

12.使用`ngOnInit`生命周期回调接口

angular提供了一系统的接口监控组件的生命周期各个环节。

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

export class AppComponent implements OnInit {

  ngOnInit(): void {

    // somthing to be done

  }

}

13. 使用`Promise`解决回调的问题

服务有时候是耗时的操作，如果直接调用可能会阻塞UI，使用Promise可以解决这个问题。

@Injectable()
export class HeroServie {
    getHeroes(): Promise<Hero[]> {
        return Promise.resolve(HEROES);
    }

}

private getHeroes() : void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

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);

模板中使用

<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>

routerLink指令告知路由器点击跳转至哪个地址，<router-outlet></router-outlet>表示路由出口，即要把组件(routerLink指向的组件)加载在哪个位置.

15.使用templateUrl代替template

@Component({
    selector: 'my-dashboard',
    templateUrl: 'app/dashboard.component.html'
})

16.按下标显示数组中的指定记录

this.heroService.getHeroes().then(heroes=>this.heroes = heroes.slice(1, 5));

17.参数化路由

路由配置：id为参数

{
    path: 'detail/:id',
    component: HeroDetailComponent
}

获取参数：

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;

}

18.代码中转向

gotoDetail(hero: Hero): void {
    let link = ['/detail', hero.id];
    this.router.navigator(link);
}

19. 使用内在Web API模拟HTTP服务

内存数据模拟数据库数据。

InMemoryWebApiModule.forRoot(InMemoryDataService),

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;
    }

}

HTTP请求示例

getHeroes(): Promise<Hero[]> {
    return this.http
        .get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[]) // 转换类型
        .catch(this.handleError)
}

20.使用HTTP Promise

Angular的http.get返回的是Observable,Observables是一个强大的管理异步数据流的方式。

当我们使用toPromise方法将Observables转化为Promise后，操作就像操作普通的Promise一样。使用toPromise方法需要引入外部方法。

import 'rxjs/add/operator/toPromise';

21.HTTP请求异常处理

.catch(this.handleError);

private handleError(error: any): Promise<any> {

  console.error('An error occurred', error); // for demo purposes only

  return Promise.reject(error.message || error);

}

angular体系

angular体系主要包括：模块Module,组件Component,模板Template,元数据Metadata,数据绑定Data Banding,服务Service,指令，依赖注入

模块是ES6标准之一，每个模块目的性非常单一。在Angular中，一般模块输出的都是一个组件类，需要配合import来加载模块。

有一类模块是Angular本身定义好的，即库模块，当加载angular2/core模块时，可以调用一个核心类库。库模块入要有angular/core(核心类库),angular/http(网络请求相关),angular2/router(路由相关),angular2/common(表单、指令等)

- Angular应用由模块组成

- 模块输出可以是：类、函数、值或其他模块

组件是为了控制显示把HTML模板及样式。一般，每个组件都配有一个类，用来定义业务能力。通过类的属性和方法与视图进行交互。
模板是为了告知Angular如何去渲染组件。Angular模板有其特殊的语法。
元数据是告知Angular如何处理一个类。一个类如果没有元数据的声明，就是一个无法单独运行的普通的类。可以使用注解来定义类的元数据。如@Component,注解中可以带上一些参数：

- selector - CSS选择器

- templateUrl - 的模板地址

- directives - 指令或组件数组

- providers - 注册的Service服务数组，从而在组件类构造函数中能够正确的实例化这些服务

除了@Component外，还有Injectable,@Input,@Output,@RouterConfig元数据。

数据绑定是一种协调组件与模板之间的通信机制，通过HTML元素来描述采用哪种数据绑定形式。数据绑定包括属性绑定[hero]、事件绑定(click)、双向绑定[(ngModel)]="hero.name"
指令。一个指令是由元数据和一个类组成，使用元数据注解@Directive修饰就是一个指令。指令和组件的功能类似，他们的区别是指令侧重对HTML元素功能的扩展。而组件是一个具体一的业务。指令分为结构性指令如*ngFor,*ngIf等和属性指令,如[(ngModel)]
服务。模块中需要使用到的值、函数都可以是服务Service。服务通常是一个目的性非常明确的类。如日志Service,数据Service，应用程序配置信息，工资计算器等。

组件是是服务的最大消费者，组件都是靠服务来处理大部分事务，组件不会直接从服务器获取数据、不验证用户输入，都是委派验服务来完成。一般我们遵循的原则是：把应用程序逻辑转化成服务，并通过依赖注入提供组件来消费服务。
依赖注入。依赖注入是一种对类实例的新方法。我们可以在引导应用程序启动时实例一个服务如

bootstrap(AppComponent, [BackendService, HeroService, Logger]);

或者在组件级别里注册服务

@Component({
  providers:   [HeroService]
})
export class HeroesComponent { ... }

查看全文

相关阅读:
龌龊的新版weiphone。
【爆牙游记】黄山归来不看岳－走进新时代。
我只有两天。
聪明的苹果——iPhone 3GS。
今天，遗憾。
为了忘却的纪念——写给《博客园精华集Web标准之道》
剪我一根头发，就要做我一天女人。
产品重构。
8月9日和妈妈的对话。
钻石环。

原文地址：https://www.cnblogs.com/wangweizhang/p/9015961.html

Angular2、4入门基础知识（小的概念）

1. 使用引用符来格式化HTML代码。

2. 数据双向绑定方式。

3.使用自定义对象数组

4.使用列表li

5.为组件添加样式

6.定义变量

7.定义方法

8.使用结构指令

9.改变组件的CSS样式类

10.引入类

11.使用服务Service

12.使用ngOnInit生命周期回调接口

13. 使用Promise解决回调的问题

14.使用路由Routing

15.使用templateUrl代替template

16.按下标显示数组中的指定记录

17.参数化路由

18.代码中转向

19. 使用内在Web API模拟HTTP服务

20.使用HTTP Promise

21.HTTP请求异常处理

angular体系

Angular2入门导向笔记

1. 使用引用符来格式化HTML代码。

2. 数据双向绑定方式

3.使用自定义对象数组

4.使用列表li

5.为组件添加样式

6.定义变量

7.定义方法

8.使用结构指令

9.改变组件的CSS样式类

10.引入类

11.使用服务Service

12.使用ngOnInit生命周期回调接口

13. 使用Promise解决回调的问题

14.使用路由Routing

15.使用templateUrl代替template

16.按下标显示数组中的指定记录

17.参数化路由

18.代码中转向

19. 使用内在Web API模拟HTTP服务

20.使用HTTP Promise

21.HTTP请求异常处理

angular体系

4.使用列表`li`

12.使用`ngOnInit`生命周期回调接口

13. 使用`Promise`解决回调的问题

4.使用列表`li`

12.使用`ngOnInit`生命周期回调接口

13. 使用`Promise`解决回调的问题