Angular基础入门--数据绑定和指令

Angular的数据绑定在我的理解中也是双向绑定的，数据流才是单向的，本篇通过Angular内置指令系统来了解一下其双向数据绑定和单向数据流以及指令的基本使用的相关基础知识。

如果想深入详细了解Angular中的数据绑，可以看一下民工叔叔的AngularJS实例教程（一）——数据绑定与监控和Angular沉思录（一）数据绑定。

说明

Angular基础入门系列文章一共6篇，主要是为了github上“course-angular”仓库的一个说明性的小文章。

随着Vue、React的逐渐流行开来，Angular也发布了第二版，Angular1.x版使用开始减少，但是有时可能会遇到一些Angular1.x的一些问题，另外前端技术发展太快，技术一段时间不使用，就可能遗忘，这个小系列文章和github上的course-angular也是为了日后回头看看Angular相关基础之用。

Angular基础入门

常用指令

ng-bind: 绑定 HTML 元素到应用程序数据
ng-bind-html: 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-class: 指定 HTML 元素使用的 CSS 类
ng-style: 指定元素的 style 属性
ng-click: 定义元素被点击时的行为
ng-focus: 规定聚焦事件的行为
ng-blur: 规定 blur 事件的行为
ng-change: 规定在内容改变时要执行的表达式
ng-checked: 规定元素是否被选中
ng-value: 规定 input 元素的值
ng-hide: 隐藏或显示 HTML 元素
ng-show: 显示或隐藏 HTML 元素
ng-if: 如果条件为 false 移除 HTML 元素
ng-init: 定义应用的初始化值
ng-repeat: 定义集合中每项数据的模板
ng-controller: 定义应用的控制器对象

更多指令请参考Angular指令

基本使用

利用Angular自带的内置指令绑定controller中$scope对象上的属性来实现mvvm数据双向绑定。

以下每个实例的公共的util工具类
common.util.js，其主要起到将html扔到页面上，然后Angular再去解析该html。

module.exports = {
  render: function(str){
    var body = document.querySelector('body');
    body.innerHTML = str + body.innerHTML;
  }
}

ng-bind指令的使用

demo1.js

var demo1Tpl = require('../tpls/demo1.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demo1Tpl);
var users = [{
  name: 'zhangsan',
  age: 10
}, {
  name: 'lisi',
  age: 30
}];
angular.module('myApp', [])
.controller('myController', function($scope){
  //将数据绑定到对象$scope上
  $scope.users = users;
});

demo1.string

<div ng-controller="myController">
  <div ng-bind="users[1].name"></div>
  <div>{{users[0].name}}</div>
</div>
<!-- 利用ng-bind和双大括号可以取到$scope上面的属性值进行渲染 -->

ng-repeat指令

demo2.js

var demoTpl = require('../tpls/demo2.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var users = [{
  name: 'zhangsan',
  age: 10
}, {
  name: 'lisi',
  age: 30
}];
angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.users = users;
});

demo2.string

<div ng-controller="myController">
  <div ng-repeat="user in users">
    <!--$index:表示序号-->
    <div>{{$index}}、</div>
    <div>{{user.name}}</div>
    <div>{{user.age}}</div>
  </div>
</div>

ng-if/ng-show/ng-hide指令

demo3.js

var demoTpl = require('../tpls/demo3.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.isShow = false;
});

demo3.string

<div ng-controller="myController">
    <!-- show/hide通过控制display来实现显示和隐藏-->
  <div ng-show="isShow">abc</div>
  <div ng-hide="isShow">def</div>
  <!-- if是直接没有生成该DOM节点 -->
  <div ng-if="isShow">ghi</div>
</div>

ng-medel指令

demo4.js

var demoTpl = require('../tpls/demo4.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope){
  //$scope.username = 'zhangsan';
});

demo4.string

<div ng-controller="myController">
  <input type="text" ng-model="username">
  <div>{{username}}</div>
</div>

ng-click指令

demo5.js

var demoTpl = require('../tpls/demo5.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.counter = 0;
  //也可以向$scope对象添加方法
  $scope.add = function(){
    $scope.counter++;
  }
});

demo5.string

<div ng-controller="myController">
  <div>{{counter}}</div>
  <!-- 在指令内执行方法 -->
  <div><button ng-click="add()"> + </button></div>
</div>

ng-keyup指令

demo6.js

var demoTpl = require('../tpls/demo6.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.item = "";
  $scope.items = [
    "aaa"
  ];
  $scope.remove = function(i) {
    $scope.items.splice(i, 1);
  };
  $scope.add = function(event){
    if(event.code === 'Enter') {
      $scope.items.unshift($scope.item);
      $scope.item = "";
    }
  }
});

demo6.string

<div ng-controller="myController">
  <!-- 事件中的event对象通过$event的形式传参过去 -->
  <div><input type="text" ng-model="item" ng-keyup="add($event)"></div>
  <ul>
    <li ng-repeat="item in items track by $index">{{$index}}.{{item}} <button ng-click="remove($index)">X</button></li>
  </ul>
</div>

ng-include指令

demo13.js

var demoTpl = require('../tpls/demo13.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.filter('gender', function(){
  return function(g){
    switch(g) {
      case 0:
        return '男';
      case 1:
        return '女';
      default:
        return '其他';
    }
  };
});
myApp.controller('showController', function($scope) {
  var persons = [
    {
      name: 'chping',
      age: 21,
      gender: 0
    },
    {
      name: 'chengping',
      age: 20,
      gender: 0
    },
    {
      name: 'chyan',
      age: 19,
      gender: 1
    }
  ];
  var persons2 = [
    {
      name: 'lala',
      age: 21,
      gender: 0
    },
    {
      name: 'lalala',
      age: 20,
      gender: 0
    },
    {
      name: 'lalalala',
      age: 19,
      gender: 1
    }
  ];
  $scope.persons = persons;
  $scope.persons2 = persons2;
  $scope.template = 'src/scripts/tpls/person.string';
});

demo13.string

<div ng-controller="showController">
    <select ng-model="template">
      <option value="src/scripts/tpls/person.string">tpl1</option>
      <option value="src/scripts/tpls/person2.string">tpl2</option>
    </select>
    <div ng-include="template"></div>
</div>

person.string

<div>
    <ul>
      <li ng-repeat="p in persons">
        {{p.name}}/{{p.age}}/{{p.gender | gender}}
      </li>
    </ul>
</div>

person2.string

<div>
    <ul>
      <li ng-repeat="p in persons2">
        {{p.name}}/{{p.age}}/{{p.gender | gender}}
      </li>
    </ul>
</div>

通过结合几个指令系统简单的了解了一下Angular的数据双向绑定和指令的基本使用。