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

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

ng2 学习笔记(一)的更多相关文章

  1. ng2 学习笔记(三)依赖注入与服务

    前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理 ...

  2. ng2 学习笔记(二)表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. extern的原理很简单,就是告诉编译器:“你现在编译的文件中,有一个标识符虽然没有在本文件中定义,但是它是在别的文件中定义的全局变量,你要放行!”

    extern的原理很简单,就是告诉编译器:“你现在编译的文件中,有一个标识符虽然没有在本文件中定义,但是它是在别的文件中定义的全局变量,你要放行!”

  2. python的socket的学习

    一.Socket相关知识 1.socket是什么: socket是应用层与TCP/IP协议族通信的中间软件抽象层,他是一组接口.在设计模式中,Socket其实就是一个门面模式. 它把复杂的TCP/IP ...

  3. python装饰器的学习笔记

    此博文是我对装饰器的一些理解,如果有错误欢迎及时留言,我会第一时间向大家学习. 一.什么是装饰器 1.从字面意义来看: 是用来给函数装饰打扮的函数 2.理论上可以理解为: (1).不改变函数的运行方式 ...

  4. linkText()的用法

    1.linkText()常用于定位链接,以谷歌的gmail为例: WebElement gmailLink = driver.findElement(By.linkText("Gmail&q ...

  5. 5.MongoDB CRUD Operations-官方文档摘录

    总结 1. CRUD:create, read, update, and delete DOCUMENT 2.在3.2版本的插入方式 db.collection.insertOne() db.coll ...

  6. Linux使用SecureCRT上传下载

    操作远程 Linux 系统,很多时候选用 SecureCRT 软件,在 SecureCRT 环境下,使用 lrzsz 工具可以很方便的完成文件的上传下载. 这里使用的 Ubuntu Linux 安装: ...

  7. django--mysql设置

    mysql基本配置 'default': { 'ENGINE': 'django.db.backends.mysql', 'HOST': '127.0.0.1', 'PORT': 3306, 'USE ...

  8. Extracts

    @1:四层和七层负载均衡的区别:所谓四层负载均衡,也就是主要通过报文中的目标地址和端口,再加上负载均衡设备设置的服务器选择方式,决定最终选择的内部服务器.以常见的TCP为例,负载均衡设备在接收到第一个 ...

  9. js检测数组类型

    1.instanceof 当只有一个全局执行环境时适用,如果包含多个框架,就存在两个以上不同版本的Array构造函数,如果从一个框架向另一个框架传递数组,传入的数组与在第二个框架中原生创建的数组分别具 ...

  10. 2018 Multi-University Training Contest 1 - D Distinct Values (STL+双指针)

    题意:数量为N的序列,给定M个区间,要求对每个区间Li,Ri,都有al..r (l≤i<j≤r), ai≠aj.构造这个序列使其字典序最小. 分析:如果对于每个所给区间都暴力扫一遍,1e5的数据 ...