AngularJS 从入门到精通(一 指令)
2015-01-09 11:37
399 查看
一、介绍
AngularJS 是google 开发者设计的一个前端开发框架,它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。AngularJS特点如下:
REST Client: RestFul 是主流的接口模式,而AngularJS实现RestFul 接口客户端只需要一行代码即可。
MVVM(Model-View-ViewModel)模式: Model 简单数据对象,View 视图(如HTML,JSP等),ViewModel是用来提供数据和方法,和View 进行交互。这种设计模式使得代码解耦合。
数据绑定: AngularJS是数据双向绑定。
依赖注入:AngularJS支持注入方式把需要的对象,方法等注入到指定的对象中。
指令: AngularJS内部自带各种常用指令,同时也支持开发者自定义指令。
HTML模板和扩展HTML: AngularJS可以定义与HTML兼容的自定义模板。
二、开始AngularJS
1. lib 引用,在HTML中引入anjularJS lib,如下:<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>可以在AngularJS官网(https://angularjs.org/)下载最新的版本 (1.3.8) 。
2. 简单例子:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="personController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> function personController($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; } </script> </body> </html>该例子将会在后续讲解到。
3.推荐学习网站
http://www.w3schools.com/angular/angular_intro.asp
http://campus.codeschool.com/courses/shaping-up-with-angular-js/
三、常用指令
1. Expression: AngularJS 使用双大括号 {{}} 取值。2. ng-app: 初始化AngularJS应用,ng-app 是用来声明使用AngularJS加载页面。
3. ng-bind: 根据HTML元素的变量名,把HTML 元素的值绑定到指定的元素上。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
4. ng-init: 初始化应用数据,使用方式如下:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span> </head> <body> <div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> <script> function personController($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; } </script> </body> </html>一般情况下,初始化参数不使用ng-init, 我们会使用model或controller代替它,关于model和controller 会在下面介绍到。
5. ng-model: ng-model 会绑定HTML controller 的值到应用数据,使用方式如下:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span> </head> <body> <div ng-app="" ng-controller="personController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> function personController($scope) { $scope.firstName="John", $scope.lastName="Doe" } </script> </body> </html>ng-model 还具有以下功能:
a.为应用数据提供类型验证(number,require,emai, 将在第七节介绍);
b.为应用数据显示状态(invalid, dirty, touched, error, 将在第七节介绍);
c. 为HTML 元素提供css 样式;
d. 绑定元素到表单中。
6. ng-controller
AngularJS 应用时被controller控制的。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span> </head> <body> <div ng-app="" ng-controller="personController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script> function personController($scope) { $scope.firstName = "John", $scope.lastName = "Doe", $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } } </script> </body> </html>
ng-controller="personController" 是指定controller 对象的名称,在controller 对象中,可以定义属性($scope.firstName), 方法($scope.fullName=function(){...})等。
在上面例子中,在personController 对象中创建了两个属性(变量), 一个函数(function)。
7. ng-repeat, 是通过遍历集合,循环clone HTML 元素, 类似 for each 功能。
<!DOCTYPE html> <html> <head> <pre name="code" class="html"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>
</ul>
</div>
</body>
</html>
8. ng-disabled: 禁用元素(text,button, checkbox等),其值为ture 或false 或者一个返回boolean 的表达式等。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="personController"> <input type="button" ng-click="toggle()" value="Toggle1"><br> <input type="button" ng-disabled="disabledFlag" value="Toggle2"><br> <br> </div> <script> function personController($scope) { $scope.disabledFlag = false, $scope.toggle = function() { $scope.disabledFlag = !$scope.disabledFlag; return $scope.disabledFlag; } } </script> </body> </html>
9. ng-show: 显示HTML 元素,值为true时显示,否则不显示。
10. ng-hide: 隐藏HTML元素,和ng-show相反。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="personController"> <button ng-click="toggle()">Toggle</button> <p ng-show="myVar"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </p> </div> <script> function personController($scope) { $scope.firstName = "John", $scope.lastName = "Doe" $scope.myVar = true; $scope.toggle = function() { $scope.myVar = !$scope.myVar; }; } </script> </body> </html>
11. ng-click: 类似于click方法,定义AngularJS click 事件。
12. ng-include: 包含指定一个内容(html, jsp, tag等)。
<div ng-include="'myUsers_List.htm'"></div>
相关文章推荐
- AngularJS入门-(5)指令
- AngularJS快速入门指南04:指令
- AngularJS入门教程之AngularJS指令
- AngularJS 从入门到精通(一 过滤器 Filter)
- AngularJS 基础入门(指令篇)
- 【TRIO-Basic从入门到精通教程五】直线、圆弧插补的指令使用
- AngularJS 基础入门(指令篇)
- AngularJS入门教程之AngularJS指令
- angularjs入门学习【指令篇】
- AngularJS入门教程之ng-checked 指令详解
- AngularJS入门教程之ng-class 指令用法
- AngularJS入门心得3——HTML的左右手指令
- 鸟瞰大数据Linux零基础从入门带精通指令操作
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
- AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令
- AngularJS快速入门4--内置指令
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
- AngularJS 从入门到精通(过滤器(Filter) )
- AngularJS入门 AngularJS控制器 AngularJS常见内置指令
- angularjs入门学习【指令篇】