Coin163

首页 > AngularJS - 简介 - Nero

AngularJS - 简介 - Nero

相关标签: angularjs,

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,另外一种更加强大的定义方式允许你声明所依赖的模块。javascriptvar 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的定义javascriptvar 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)进行注册javascriptvar 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构造函数javascriptservices.service('demoService2', function() {

this.func = function() {

};});3、 注册一个工厂函数用于创建service实例,这种方式可以在创建服务实例之前做些处理javascriptservices.factory('demoService1', function(msg) {

// some processing code

return {

func: function() {

}

};});4、 使用provider,使用这种方式,复杂一点,但是好处是可以对service进行配置。javascriptservices.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中提到。

原文地址:http://nero-zou.com/angularjs-intro/

AngularJS是什么?AngularJS是一个前端JavaScript框架,背后有Google支持。这个框架最早是09年发布的,随后发展迅速,尤其是最近,流行度很高。和其他框架不同,AngularJS有很多独特的特性,...

------分隔线----------------------------