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 一个简单的数据绑定
实时的实现输入框的值
COPYHTML
<!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也有这样的功能:
COPYHTML
<!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
初始化数据,直接对数组进行循环:
COPYHTML
<!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:格式化字符串为大写
过滤器的简单使用:
COPYHTML
<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
指令定义了应用程序控制器:
COPYHTML
<!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。
控制器中还可以添加方法:
COPYJAVASCRIPT
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中返回的数据:
COPYHTML
<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点击事件 |
如下面的代码简单的介绍了这些指令的使用:
COPYHTML
<button ng-disabled="true">点击</button> <div ng-hide="true">要隐藏的元素</div>
现在我们来写个稍微有点复杂的程序:
{{ count }}
COPYHTML
<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应用,能记录输入框的剩余字数,能获取和删除输入框的内容【查看演示】:
COPYHTML
<!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>