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

1.1 一个简单的数据绑定 #

实时的实现输入框的值

html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angulartitle>
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 也有这样的功能：

html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angulartitle>
head>
<body>
<body>
	
	<div ng-init="data=[{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}]">
		<ul>
			
			<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初始化数据，直接对数组进行循环：

html>
<html lang="en" ng-app=''>
<head>
	<meta charset="UTF-8">
	<title>angulartitle>
head>
<body>
<body>
	<div>
		<ul>
			
			<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>
    
    <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指令定义了应用程序控制器：

html>
<html lang="en" ng-app='myApp'>
<head>
	<meta charset="UTF-8">
	<title>angulartitle>
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">点击+1button>
    <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 应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】：

html>
<html lang="en" ng-app='myApp'>
<head>
	<meta charset="UTF-8">
	<title>angulartitle>
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()">100span>
	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>