angular初探-蚊子-前端博客

AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

跟着教程学习了几天，给我的感觉就是：不用自己再显式的用 js 给 DOM 元素绑定事件，只需添加一个 angular 特有的字段即可；像是使用后端语言那样对 DOM 进行操作，比如循环输出数组中的元素；自己写一个控制器，就能对页面进行操作。

AngularJS 使用了不同的方法，它尝试去补足 HTML 本身在构建应用方面的缺陷。AngularJS 通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号语法进行数据绑定；
使用 DOM 控制结构来实现迭代或者隐藏 DOM 片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的 DOM 元素上；
能将 HTML 分组成可重用的组件。

1. AngularJS 简介 #

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令标记了 AngularJS 脚本的作用域，在<html>中添加 ng-app 属性即说明整个都是 AngularJS 脚本作用域。开发者也可以在局部使用 ng-app 指令，如<div ng-app></div>，则 AngularJS 脚本仅在该 div 中运行。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

1.1 一个简单的数据绑定 #

实时的实现输入框的值

<!DOCTYPE html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angular</title>
</head>
<body>
<body>
	<input type="text" ng-model="username" >
	<p ng-bind="username"></p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</html>

在上面的程序中，实现了在输入框中输入一个值，能马上在 p 标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量 username，ng-bind指令把应用程序变量 username 绑定到某个段落（上面的 p 标签）的 innerHTML 上。

如果去掉 html 标签上的ng-app，则功能失效

1.2 一个简单的循环输出 #

在我们使用后端语言模板的时候，通常会使用循环输出一些类似的数据。angular 也有这样的功能：

<!DOCTYPE html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angular</title>
</head>
<body>
<body>
	<!-- 初始化数据 -->
	<div ng-init="data=[{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}]">
		<ul>
			<!-- 对data进行循环输出 -->
			<li ng-repeat="item in data">
				<p>name:{{ item.name }}</p>
				<p>age:{{ item.age }}</p>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</html>

首先我们使用ng-init初始化一组数据 data，然后使用ng-repeat对 data 进行循环输出。ng-repeat放在哪个标签上，就是对这个标签进行循环，这里循环的是 li 标签；其中的每一项就是item，然后可以通过item.name，item.age输出 name 和 age 的值。

当然，还可以不使用ng-init初始化数据，直接对数组进行循环：

<!DOCTYPE html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angular</title>
</head>
<body>
<body>
	<div>
		<ul>
			<!-- 对data进行循环输出 -->
			<li ng-repeat="item in [{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}]">
				<p>name:{{ item.name }}</p>
				<p>age:{{ item.age }}</p>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</html>

1.3 AngularJS 过滤器 #

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

currency：格式化数字为货币格式；
filter：从数组项中选择一个子集；
lowercase：格式化字符串为小写；
orderBy：根据某个表达式排列数组；
uppercase：格式化字符串为大写

过滤器的简单使用：

<div ng-app="">
  <p>大写：{{ 'wenzi'|uppercase }}</p>
  <p>小写：{{ 'Country'|lowercase }}</p>
  <ul>
    <!-- 按照age排序输出data -->
    <li
      ng-repeat="item in [{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}] | orderBy:'age'"
    >
      <p>name:{{ item.name }}</p>
      <p>age:{{ item.age }}</p>
    </li>
  </ul>
</div>

1.4 控制器 #

AngularJS 控制器控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器：

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
	<meta charset="UTF-8">
	<title>angular</title>
</head>
<body>
<body>
	<!-- 控制器 -->
	<div ng-controller="Person">
		<p>{{ name }}</p>
		<p>{{ age }}</p>
		<p>{{ male }}</p>
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);

// 定义Person控制器
app.controller('Person', function($scope){
	$scope.name = 'wenzi';
	$scope.age = 24;
	$scope.male = 'male';
})
</script>
</html>

angular 使用$scope对象来调用控制器，控制器的$scope 用来保存 angularJS model（模型）的对象。控制在作用域中创建了三个属性：name, age, male。

控制器中还可以添加方法：

app.controller("Person", function ($scope) {
  $scope.name = "wenzi";
  $scope.age = 24;
  $scope.male = "male";
  // 获取当前时间
  $scope.getTime = function () {
    return new Date().getTime();
  };
});

1.5 HTTP #

angular 中的$http是一个用于读取 web 服务器上数据的服务。$http.get(url)获取链接 url 中返回的数据：

<div ng-controller="getJson">
  <ul>
    <li ng-repeat="item in result">
      <p>name:{{item.name}}</p>
      <p>age:{{item.age}}</p>
      <p>sex:{{item.sex}}</p>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  // $http的用法跟$.ajax用法很相似
  app.controller("getJson", function ($scope, $http) {
    $http.get("./interface.php").success(function (data) {
      $scope.result = data;
    });
  });
</script>

2. 为 DOM 添加属性 #

angular 能通过ng-*为 DOM 添加属性，如：

指令	值	说明
ng-disabled	boolean	添加disabled属性
ng-show	boolean	显示HTML元素
ng-hide	boolean	隐藏HTML元素
ng-click		定义angular点击事件

如下面的代码简单的介绍了这些指令的使用：

<button ng-disabled="true">点击</button>
<div ng-hide="true">要隐藏的元素</div>

现在我们来写个稍微有点复杂的程序：

<div ng-init="count=1;" ng-controller="toggleController">
  <p>
    <button ng-click="count=count+1">点击+1</button>
    <button ng-click="toggle()">隐藏|显示</button>
  </p>
  <p ng-hide="myVar">{{ count }}</p>
</div>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("toggleController", function ($scope) {
    $scope.myVar = false;
    $scope.toggle = function () {
      $scope.myVar = !$scope.myVar;
    };
  });
</script>

3. 一个 angular 应用 #

学了一些东西，让我们来写一个小的 web 应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】：

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
	<meta charset="UTF-8">
	<title>angular</title>
</head>
<body>
<body>
<div ng-init="" ng-controller="textController">
	<p>
		我的笔记
	</p>
	<p>
		<textarea ng-model="message" cols="30" rows="10"></textarea>
	</p>
	<p>
		<button ng-click="save()">保存</button> <button ng-click="reset()">清除</button>
	</p>
	<p>
		剩余字数：<span ng-bind="left()">100</span>
	</p>
	<p></p>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('textController', function($scope){
	$scope.message = '';
	$scope.save = function(){
		alert( $scope.message );
	}
	$scope.left = function(){
		return 100 - $scope.message.length;
	}
	$scope.reset = function(){
		$scope.message = '';
	}
})
</script>
</html>