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)
}
}
以上内容欢迎各位大神批评指导!
ng2 学习笔记(一)的更多相关文章
- ng2 学习笔记(三)依赖注入与服务
前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理 ...
- ng2 学习笔记(二)表单及表单验证
在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- Oracle重做日志REDO
什么是重做? 重做日志包含所有数据产生的历史改变记录. 重做日志目的是保证数据的安全,如果数据因特殊原因没有写到磁盘上,可以通过重做日志来恢复. 重做日志文件通常用于 恢复(实例恢复和介质恢复) 日志 ...
- mysql insert中用case
insert into urls(company,counterType,mdUrl,tradeUrl) values('test', CASE 'test'WHEN 'CTP' THEN 1WHEN ...
- docker在团队中的实践 How To Install Docker In CentOS
" 预发布机器(centos-6.5),给每个同学都开通了ssh这个机器是大家一起共用的,稍后导些数据下来.后续 项目上线,产品测试,都是在这上面进行. 目前在一个物理机 " 3 ...
- 关于vtt 与 srt 字幕 的相互转换
我在下载的udacity中教程时,字幕和视频是分离的,对于英文还无法完全听懂的我来说,字幕还是比较重要.不想看解释的可直接跳到最后复制代码运行即可. 查看了vtt和srt的区别,使用记事本打开vtt和 ...
- Java 多线程通信之多生产者/多消费者
// 以生产和消费烤鸭为例 class Resource { private String name; private int count = 1; // 记录烤鸭的编号 private boolea ...
- 转!java产生不重复随机数
private static void testC(int sz) { long startTime = System.currentTimeMillis(); //开始测试时间 Random rd ...
- Django的模型层(2)- 多表操作(上)
一.创建模型 例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一(on ...
- javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)
Prologue 看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...
- 部署Node.js的应用
原创:作者 mashihua 最近Node.js很火,让很多的前端看到了可以直接从前端写到后端的希望.但是每次部署一个Node.js的应用却让前端苦恼不已.每次登陆服务器,用自己不熟悉的方式从版本控制 ...
- shell脚本调用传参【转载】
转自:https://www.cnblogs.com/cisum/p/8010658.html 1.直接使用$0,$1,$2,$3 $0是脚本的名字,就是按顺序来 #!/bin/bash # auth ...