angular2学习——项目构建以及基本知识介绍

1、项目构建

第一步：全局安装 Angular CLI 。

npm install -g @angular/cli

第二步：创建新项目

ng new my-app

第三步：启动开发服务器

cd my-app
ng serve --open

项目构建会遇到安装错误的一些问题，重现按照教程重新安装就行了，问题不大！

细节的知识点

1、angular2的入口界面main.js

基本上是固定的：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if(environment.production){
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err=>console.log(err));

2、关于一个模块module
在angular2中，一个基本的module模块写法示例：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

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

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、关于一个组件
在angular2中，组件一般由三个文件组成，ts文件、html文件、css文件

在ts文件中，申明一个组件，其基本写法：

import { Component, OnInit } from '@angular/core';
@Component({
    selector:'app-heros',
    templateUrl: './heros.component.html',
    styleUrls: ['./heros.component.css']
});

export class HerosComponent implements OnInit{
    heros = 'mapbar_front';
    constructor(){}
    ngOnInit(){
    }
}

在@Component中，申明了这个组件的选择器名字：selector。
申明了这个组件的局部组件css。
申明了这个组件的template项目模板。

4、关于angular2的双向绑定语法：

type='text' [(ngModel)]='hero.name' />

这个会把组件中的hero对象的name属性，进行动态的双向绑定到模板中。

5、关于angular2中的列表渲染：

<ul>
    <li *ngFor='let item of arr'>{{item}}li>
ul>

6、angular2中的条件渲染

<div *ngIf='isShow'>
    hello
div>

7、angular2中的事件绑定

//其中onSelect是定义在组件中的函数

<button (click)='onSelect()'>点击button>

8、关于服务

一个基本的服务，应该使用@Injectable装饰器进行注入。

import { Injectable } from '@angular/core';
import { Heros } from './hero';
import { HEROS } from './mock-heros';

@Injectable({
    providedIn: 'root'
})
export class HeroService{
    constructor(){}
    getHeros(): Heros[]{ 
        return HEROS;
    }
}

9、关于异步的服务写法

import { Observable, of } from 'rxjs';
@Injectable({
    provideIn: 'root'
});
export class HeroService {
    constructor() {}
    getHeros(): Observable{ 
        return of(HEROS);
    }
}

在另一个这样使用：

getHeros(){
    this.heroService.getHeros().subscribe(heroes => this.heros = heroes);
}