ng2 學習筆記（一）

ng2發佈了一段時間，最近纔開始着手學習一下，ng2能夠說變化海是比較大的，如今寫一些學習過程當中要注意的點，新手能夠參考，大神能夠指導：

按照文檔來吧：

一、快速開始：沒什麼可說的，直接上git 克隆官方的quick-start，

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start

二、官方的第一個例子：

ngFor循環列表，ng2要定義一個局部變量，還要注意前面的*號：<li *ngFor="let list of listArr">{{list}}</li>;注意下格式就ok了；

三、用戶輸入：

這個例子我的以爲用到的場景不會太多；

主要是是涉及到input框的的事件綁定以及value的獲取方式：

　　1）、直接綁定事件：(keyup)="keyUpEvent($event)";這裏傳入了一個$event事件，因爲$event是一整個DOM元素事件及屬性，因此效率比較低；

　　2）、angularjs的模版引用變量直接訪問input的值；<input (keyup)="uinput2(box2.value)" #box2/>；效率比較高推薦使用；

　　3）、當input要綁定處理事件的時候，能夠1）、2）方法合用。<input type="text" (keyup.enter)="addList(list.value)" #list/>

四、表單：這個用處比較大，主要用到的是數據的雙向數據綁定[(ngModel)]="args";

這裏有一個坑，就是要完成表單的雙向數據綁定須要加載一個angular模塊FormsModule，這個模塊要在app.module的主模塊裏引用，而且在@NgModule的imports里加入。這樣才能正常工做，否則雙向數據綁定不上。應該是雙向數據綁定都要引入FormsModule這個模塊；至於表單驗證在下一次總結在寫；

 

【其餘的坑】：

一、定義一個組件時，要引用時都須要在app.module的主模塊了進行引入；而且在@NgModule的declarations裏聲明；

二、ngnice.cn這個angular中文網上的文檔，比較坑，基礎的綁定等操做在後面，實例在前面，這樣容易對新手形成困惑；

 

下面貼一下代碼：

app.module.ts文件：

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

import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { ClickMeComponent } from './click-me.component';
import { UserForm } from './form.component';

@NgModule({
  imports:      [ BrowserModule ,FormsModule],
  declarations: [ AppComponent , ClickMeComponent,UserForm,],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

 

用戶輸入組件的代碼：

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

@Component({
    selector:'user-input',
    template:`
        <h2>用戶輸入:</h2><hr />
        <h4>綁定keyUp事件獲取用戶輸入事件</h4>
        <input (keyup)="uinput($event)" />
        <p>您輸入的信息是：{{msg}}</p>
        <br />
        <h4>使用 Angular 的模板引用變量</h4>
        <input (keyup)="0" #box/><b>（已輸入{{box.value.length}}個字，還能夠輸入：{{10-box.value.length}}個字）</b>
        <p>您輸入的信息是：{{box.value}}</p>
        <br />
        <h4>組合使用效率更高</h4>
        <input (keyup)="uinput2(box2.value)" #box2/>
        <b *ngIf="box2.value.length<=10">（已輸入{{box2.value.length}}個字，還能夠輸入：{{10-box2.value.length}}個字）</b>
        <b *ngIf="box2.value.length>10">（超過輸入：{{box2.value.length-10}}個字）</b>
        <p>您輸入的信息是：{{msg2}}</p>
        <br />
        <h3>實例:</h3>
        <div>
            <input type="text" (keyup.enter)="addList(list.value)" #list/>
            <button (click)="addList(list.value)">添加到列表</button>
            <ul>
                <li *ngFor="let list of likeList">{{list.call}}</li>
            </ul>
        </div>
    `
})

export class ClickMeComponent {
    msg = '未輸入';
    uinput(evt){
        // 傳遞整個dom以及事件，性能差
        console.log(evt);
        this.msg = evt.target.value ? evt.target.value : '未輸入';
    }

    msg2 = '未輸入';
    uinput2(val:string){
        if(val.length>10){
            this.msg2 = val.substring(0,10) ? val.substring(0,10) : '2未輸入';
        }else{
            this.msg2 = val ? val : '2未輸入';
        }
    }

    likeList = [
        {"id":1000,"call":"讀書"}
    ];
    addList(val){
        var id = +new Date();
        this.likeList.push({"id":id,"call":val});
    }
}

 

FORM表單的數據綁定：

import { Component } from '@angular/core';
import { Hero } from './hero';

@Component({
    selector:'hero-form',
    template:`
        <h2>FORM 表單</h2>
        <hr />
        <div class="container">
            <h4>Hero Form</h4>
            <form>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" name="name" [(ngModel)]="model.name" id="name" required>
                </div>
                <div class="form-group">
                    <label for="power">Hero Power</label>
                    <select class="form-control" id="power" [(ngModel)]="model.power" required name="power">
                        <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="alterEgo">Alter Ego</label>
                    <input type="text" class="form-control" [(ngModel)]="model.alterEgo" name="alterEgo" id="alterEgo">
                </div>
                <button type="button" (click)="submit()" class="btn btn-default">Submit</button>
            </form>
        </div>
    `
})

export class UserForm {
    powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];
      model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
      submitted = false;
      //onSubmit() { this.submitted = true; }
      submit(){
          console.log(this.model)
      }
}

 

 

以上內容歡迎各位大神批評指導！