Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。无需进行手工DOM操作,兼容主流浏览器,与 jQuery 配合良好。
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定使得代码更少,你可以专注于你的应用。
并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
一、Hello World!
AngularJS使用双大括号{{}}语法进行数据绑定;
<html ng-app>
<head>
<!-- <script src="https://code.angularjs.org/1.4.8/angular.js"></script> -->
<script src="https://code.angularjs.org/1.2.8/angular.js"></script>
<script >
function FirstCtrl($scope){
$scope.data = {message: "World"};
}
</script>
</head>
<body>
<p ng-controller="FirstCtrl">Hello {{data.message}}!</p>
</body>
</html>
现在让我们仔细看看代码,当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用,然后加载了angular.js,然后声明了一个全局的控制器FirstCtrl(js函数),可以看到在p标签中声明了这个控制器,紧接着使用{{}}表达式绑定数据。
注意:当我们引用AngularJS的1.4.8版本,也就是上面注释的一行,我们的代码会报下面的异常
Argument ‘FirstCtrl’ is not a function, got undefined;
到这里郁闷了一下,心中猜想应该是版本的原因,然后网上搜了一圈,果不其然:
因为从Angular-1.3.0 beta15开始,Angular不再支持全局的Controller!那么如何新版本如何解决这个问题呢,继续往下看。
二、AngularJS Scope(作用域)
AngularJS 应用组成如下:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
上面的示例中,只有一个作用域 scope,处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。
根作用域:所有的应用都有一个 rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
三、AngularJS指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。除了 AngularJS 内置的指令外,我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, myselfDirective, 但在使用它时需要以 - 分割, myself-directive:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-app="myApp">
<myself-directive></myself-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
return {
template : "<p>自定义指令!</p>"
};
});
</script>
</body>
</html>
你可以通过元素名、属性、类名、注释来调用自定义指令。也可以限制你的指令只能通过特定的方式来调用。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<myself-directive></myself-directive>
<div myself-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意:</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>
</body>
</html>
restrict 值可以是以下几种:
- E 只限元素名使用
- A 只限属性使用
- C 只限类名使用
- M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
四、AngularJS事件
下面的例子演示了angularjs配合checkbox,button的一些动作。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<!-- <script src="https://code.angularjs.org/1.2.8/angular.js"></script> -->
<script >
//module第一个String参数是该模块的名字,第二个参数是所依赖的模块(这里暂时用不着),返回了myApp这个模块.
angular.module('myApp', []).controller('CostCtrl',CostCtrl).controller("FirstCtrl", FirstCtrl);
function FirstCtrl($scope){
$scope.data = {message: "World"};
}
function CostCtrl($scope)
{
$scope.cost = 1000;
$scope.tax = true;
$scope.$watch("cost", function(){
$scope.bill_tax = $scope.cost*0.15;
});
$scope.$watch("tax", function(){
$scope.bill_display = $scope.tax?"block":"none";
});
$scope.add = function()
{
alert('hello');
}
}
</script>
</head>
<body >
<p ng-controller="FirstCtrl">Hello {{data.message}}!</p>
<div ng-controller="CostCtrl"><input type="checkbox" ng-model="tax"/><span>tax</span>
<input placeHolder="cost" ng-model="cost">
<p>the money is {{cost|currency:"¥"}}</p><!-- angular过滤器 -->
<div style="display:{{bill_display}}"><p>tax is {{bill_tax}}</p><button ng-click="add()">add</button</div>
</div>
</body>
</html>
ng-click指定button的点击事件。