AngularJS是什么?
AngularJS是一个前端JavaScript框架,背后有Google支持。这个框架最早是09年发布的,随后发展迅速,尤其是最近,流行度很高。
和其他框架不同,AngularJS有很多独特的特性,使得其非常与众不同。对于我来说,最吸引我的两个特性是双向绑定以及依赖注入。前者免去了数据变化时去操作DOM,能让开发者更专注在逻辑上,而后者则使得测试以及集成变得非常方便。
Hello,World
先来看一个经典的Hello World。
html
<html> <head> <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js"></script> <script> function HelloController($scope) { $scope.person = { name: "World" } $scope.sayHelloWorld = function () { alert($scope.person.name); } } </script> </head> <body ng-app> <div ng-controller="HelloController"> <input type="text" ng-model="person.name"/> <button ng-click="sayHelloWorld()"></button> </div> </body> </html>
Controller
在Angular中,Controller主要负责初始化scope,包括数据以及所需要的函数。上面的HelloController就是个典型的Controller,另外一种更加强大的定义方式允许你声明所依赖的模块。
javascript
var controllers = angular.module('demo.controllers'); controllers.controller("demoController", ['$scope', '$http', function($scope, $http) { $scope.test_data = { value: 'test data' }; $scope.test_function = function() { alert("test function"); }; }]);
Directive
在前端开发中,经常需要操作DOM,而且有时候需要使用一大堆HTML来构建一个常用的组件,例如Google+信息流中的一条信息,在Angular中这都属于Directive的作用,这也就意味着在Controller中操作DOM是个错误的做法。
通常情况下,Directive定义时采用CamelCase规则进行命名,而在使用时则使用横线进行分隔。
Directive的定义
javascript
var directives = angular.module('demo.directives', []); directives.directive('customDirective', function() { return { restrict: 'ECMA', template: '<nav></nav>', templateUrl: 'directive.html', replace: false, priority: 0, transclude: false, scope: false, terminal: false, require: false, controller: function(scope, element, attrs, transclude, otherInjectables {}, compile: function(element, attrs, transclude) { return { pre: function preLink(scope, element, attrs, controller) {}, post: function postLink(scope, element, attrs, controller) {} }; }, link: function(scope, element, attrs) { } }; });
restrict: 指定了directive的使用形式,共有四种:
- Element(restrict定义时的E)
- Attribute(restrict定义时的A)
- Class(restrict定义时的C)
- Comment(restrict定义时的M)
compile:在directive中如果需要对DOM元素进行处理,基本都是在这个函数中进行。
仔细看这个函数,compile并不能访问scope。
link:此函数的主要作用就是对DOM和scope做数据绑定。和compile不同,在这个函数中,已经可以访问scope了。
template和templateUrl:用于指定directive对应的模板,前者直接使用字符串定义模板,而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope,当然也有例外,具体请看关于scope的解释。
replace:指定是否使用模板替换directive作用的DOM元素。
priority:指定优先级,angular在处理directive时,会将页面出现的所有directive按优先级排序,一般这个数值都是不指定的。
controller:directive对应的controller,通常用于directive之间的通信。在这个函数中,所有绑定到this上的变量,其他的directive都能通过使用require来进行访问。
require:通过指定某个directive的名字,来访问其对应的controller。其中以?作为前缀时,如果找不到此directive将报错,而以^为前缀,将会在父元素进行递归查找,可以使用数组来引入多个directive,如[‘directive1′,’directive2′,’directive3’]
scope:用于指定当前directive所对应的scope,不同的取值之间的影响非常大。
- false:此时directive与父元素共享scope
- true:此时directive有自己的scope,该scope继承父元素所对应的scope
- isolate:directive有自己的scope,该scope不会继承自父元素对应的scope,但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法,因为这样就对父元素进行了限制,影响了directive的使用范围。
如果想在父子元素之间共享数据,可以明确指定那些元素需要父子之间共享。方法共有三种:
使用@将父级scope中的属性绑定到本地scope中,单向绑定,这个值总是字符串,在template中需要使用{{}}
使用=同上,只不过这里是双向绑定,在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式。
transclude:用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下。
Service
在Angular中,Service是一些提供常见功能的单例对象。诸如上面出现$http等,其使用也是比较简单的,只要在使用时声明这个依赖就可以了,例如上面的demoController。
其定义方式主要有一下几种:
1、 service只是简单的数值可以使用constant(name,value)进行注册,如果时已经存在的对象,可以使用value(name,value)进行注册
javascript
var services = angular.moudle('demo.services', []); services.constant('number', 42); services.constant('string', 'string'); var existingService = { notify: function(msg) { alert(msg); } }; services.value('notify', existingService);
2、 注册一个service构造函数
javascript
services.service('demoService2', function() { this.func = function() { }; });
3、 注册一个工厂函数用于创建service实例,这种方式可以在创建服务实例之前做些处理
javascript
services.factory('demoService1', function(msg) { // some processing code return { func: function() { } }; });
4、 使用provider,使用这种方式,复杂一点,但是好处是可以对service进行配置。
javascript
services.provider('demoService3', function() { this.value = "string"; this.$get = function() { var value = this.value; return { print: function() { console.log(value); } } } this.setValue = function(value) { this.value = value; } });
还有路由、模板、指令这些会在 使用ionic创建 Hybrid Mobile App中提到。