Angular 数据绑定与常用指令

数据绑定

Angular 数据绑定使用了大量的括号。可以根据数据流动方式分为三种数据绑定，分别是：
1、单向：从数据到视图方向（属性绑定，模板插值）。

1
2
3
4
// 模板插值用 {{}}
<p>{{studentId}}</p> 
//属性绑定用 []
<div [title]="name"></div>

2、单向：从视图到数据方向（事件绑定)。

1
2
// 事件绑定用()
<div (click)="getId()"></div>>

3、双向绑定。

1
2
 // 双向绑定用[()]
<div [(title)]="name"></div>

常用指令

1、NgClass
通过NgClass可以同时添加或移出多个类，NgClass的第一个参数为css类名称，第二个参数为布尔类型的数据值value。当value为true时则添加对应的类名到模板元素中，反之则移除。

1
2
3
4
//基本用法
<div [ngClass]="{'text-success':true}"></<div> 
//判断
<div [ngClass]="{'text-success':username == 'anne'}"></div>

2、NgStyle
可以给模板元素设置单一元素。

1
2
3
4
//基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>  
//判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

3、NgIf
NgIf指令绑定一个布尔类型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之将其移除。

1
<div *ngIf="count===0"></<div>

4、NgSwitch
NgSwitch指令需要结合NgSwitchCase和NgSwitchDefault指令来使用。

1
2
3
4
5
6
<div [ngSwitch]="state">
    <template *ngSwitchCase="'state1'">State1</template>
    <template *ngSwitchCase="'state2'">State2</template>
    <template *ngSwitchCase="'state3'">State3</template>
    <template *ngSwitchDefault>default</template>
</div>

5、NgFor

1
2
3
<ul>
  <li *ngFor="let listItem of lists">{{listItem.name}}</li>
</ul>

展开全文 >>

Angular2 概要

一、Angular2.0的诞生

AngularJs1.X的困境：
1、性能问题，采用脏检查实现数据更新，当页面的数据越来越多，脏检查的效率就会越来越低。
2、落后于当前的web发展理念。
3、对手机端支持不够友好，Angular1.x没有针对移动 应用特别优化，并且缺少一些关键的特性，需要依赖IONIC移动app开发框架。
more >>

展开全文 >>

Angular Cli 构建 Angular 项目

一、环境搭建

基础工具安装

NodeJS 5.0以上版本,NPM 3.0以上版本；Typescript。
目前我用的是（node.js 6.10.3, npm 3.10.10）

安装Angular Cli
有两种方式安装：
强烈建议使用npm安装@angular/cli，不推荐使用淘宝镜像cnpm来安装。

  1. 第一种安装方式，通过淘宝镜像。

    1
    2
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org   //先安装cpm
    $ cnpm install -g @angular/cli   //用cnpm安装 Angular Cli

  2. 第二种安装方式

    1
    $ npm install -g @angular/cli@latest
more >>

展开全文 >>

双向绑定的优缺点

单向数据绑定：
指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。缺点：单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。
优点：单向数据流　数据流动方向可以跟踪，流动单一，追查问题的时候可以跟快捷。

双向数据绑定：
数据模型（Module）和视图（View）之间的双向绑定。
缺点：各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，不利于管理数据源。
优点:双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

展开全文 >>

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

尽情期待