ng2 学习笔记（一）

ng2发布了一段时间，最近才开始着手学习一下，ng2可以说变化海是比较大的，现在写一些学习过程中要注意的点，新手可以参考，大神可以指导：

按照文档来吧：

1、快速开始：没什么可说的，直接上git 克隆官方的quick-start，

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

2、官方的第一个例子：

ngFor循环列表，ng2要定义一个局部变量，还要注意前面的*号：<li *ngFor="let list of listArr">{{list}}</li>;注意下格式就ok了；

3、用户输入：

这个例子个人觉得用到的场景不会太多；

主要是是涉及到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/>

4、表单：这个用处比较大，主要用到的是数据的双向数据绑定[(ngModel)]="args";

这里有一个坑，就是要完成表单的双向数据绑定需要加载一个angular模块FormsModule，这个模块要在app.module的主模块里引用，并且在@NgModule的imports里加入。这样才能正常工作，不然双向数据绑定不上。应该是双向数据绑定都要引入FormsModule这个模块；至于表单验证在下一次总结在写；

 

【其他的坑】：

1、定义一个组件时，要引用时都需要在app.module的主模块了进行引入；并且在@NgModule的declarations里声明；

2、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)
      }
}

 

 

以上内容欢迎各位大神批评指导！