AngularJS复习笔记

1，AngularJS中的相关概念

1.1 模块

1.2 作用域和数据模型

1.3 具有模板和指令的视图

1.4 表达式

1.5 控制器

1.6 数据绑定

1.7 服务

1.8 依赖注入

1.9 职责分离

1.10 AngularJS的生命周期

引导阶段编译阶段运行时数据绑定阶段

2 使用AngularJS

2.1 将AngularJS与现有的JavaScript和jQuery整合

2.2 将AngularJS添加到Node.js环境

2.3 在HTML文档中引导AngularJS

2.4 使用全局API

AngularJS中的全局API：copy(src,[dst]) element(element) equals(o1,o2) extend(dst,src) forEach(obj,iterator,[context]) fromJson(json) toJson(obj) isArray(value) isDate(value) isDefined(value) isElement(value) isFunction(value) isNumber(value) isObject(value) isString(value) isUndefined(value) lowercase(string) uppercase(string)

3,创建一个基本的AngularJS应用程序

3.1 加载AngularJS库到主模块

<script src="js/angular.js"></script>
<script src="js/myapp.js"></script>

3.2 定义AngularJS应用程序根元素

<html ng-app="myApp">

3.3 将控制器添加到模板

<div ng-controller="FirstController">

3.4 实现作用域模型

<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="first">
        <input type="text" ng-model="last">
        <hr>{{first+last}}
    </div>
    <script src="js/angular.js"></script>
    <script>
         var myApp = angular.module('myApp',[]);
         myApp.controller('myController',function($scope){
			$scope.first = 'Hello'
			$scope.last = 'World'
		});
	</script>
</body>

4,模块和依赖注入

4.1 了解模块

AngularJS模块是一种容器，它让你把代码隔离并组织成简洁，整洁，可重复使用的块。

4.2 依赖注入

4.3 定义AngularJS模块

1，创建AngularJSmodule对象

angular.module(name,[requires],[configFn])

2，使用配置块

var myModule = angular.module('myModule',[]).
	config(function($provide,$filterProvider){
		$provide.value("startTime",new Date());
		$filterProvider.register('myFilter',function(){});
	});

3，使用运行块

myModule.run(function(startTime){
	startTime.setTime((new Date()).getTime());
});

4，把提供器添加到AngularJS模块

专门的AngularJS对象提供器

animation(name,animationFactory)
controller(name,controllerFactory)
filter(name,filterFactory)
directive(name,directiveFactory)

服务提供器

value(name,object)
constant(name,object)
factory(name,factoryFunction)
service(name,serviceFactory)
provider(name,providerFactory)

5，实现依赖注入

var myController = function($scope,appMsg){
	$scope.message = appMsg;
};
controller['$inject'] = ['$scope',appMsg];
myApp.myController('controllerA',controller);

或者：

myApp.controller('controllerA',['$scope','appMsg',function($scope，appMsg){
	$scope.message = appMsg;
}]);

5，作用域基础概念

5.1 根作用域与应用程序之间的关系

当一个应用程序启动时，根作用域就创建了。根作用域将数据存储在应用层，你哭使用$rootScope服务来访问它。根作用域内的数据应该在模块内的run()块中进行初始化

angular.module('myApp',[])
.run(function($rootscope){
    $rootScope.rootValue = 5;
});

5.2 作用域与控制器之间的关系

控制器旨在通过扩大作用域来提供业务逻辑的代码段。

angular.module('myApp',[]).
	value('start',0).
	controller('Counter',['$scope','start',function('$scope','start'){}]);

5.3 作用域和模板之间的关系

模板为AngularJS应用程序提供视图。

5.4 作用域和后端服务器数据之间的关系

5.5 作用域的生命周期

创建，监视器注册，模型变化，变化观察，作用域销毁

6，实现作用域层次结构

兄弟关系的作用域层次：

<div ng-controller="myControllerA"></div>
<div ng-controller="myControllerB"></div>

父子关系的作用域层次结构

<div ng-controller="myControllerA">
	<div ng-controller="myControllerB"></div>
</div>

作用域之间的数据访问关系不再赘述

7，在作用域发出和广播活动

向父作用域传递事件

scope.$emit(name,[args,...])

向子作用域传递事件

scope.$broadcast(name,[args,...])

接收要监听的事件

scope.$on(name,listener)

event对象具有的属性

targetScope：$emit()或$broadcast()被调用时所在的作用域
currentScope：当前正在处理事件的作用域
name：事件的名称
stopPropagation()：停止在作用域层次结构中向上或向下传播事件的函数
preventDefault()：防止在浏览器的事件中的默认行为
defaultPrevented：一个布尔值，判断preventDefault()是否被调用

8，使用AngularJS模板来创建视图

8.1 了解模板

表达式过滤器指令

8.2 使用表达式

8.3 使用过滤器

9，在AngularJS视图中实现指令

9.1 使用内置指令

9.1.1 支持AngularJS功能的指令

ngApp ngCloak ngController ngHref ngInclude ngList ngNonBindable ngOpen ngPluralize ngReadonly ngRequired ngSelected ngSrc ngSrcset ngTransclude ngView script

9.1.2 扩展表单元素的指令

9.1.3 把模型绑定到页面元素的指令

AngularJS模板使你可以把在该作用域内的数据直接绑定到所显示的HTML元素。你可以用几种不同的方式吧数据绑定到视图，如：值，HTML 属性可见性存在性

下面是一些吧作用域内的数据绑定到HTML元素的值，表达式，可见性以及存在性的指令

ngBind，ngBindHtml，ngBindTemplate，ngClass, ngClassEven, ngClassOdd, ngDisabled ngHide ngShow ngIf ngModel mgRepeat ngInit ngStyle ngSwitch ngValue

9.1.4 把页面事件绑定到控制器的指令

下面是一些把网页/设备事件绑定到AngularJS模型功能的指令

ngBlur ngChange ngChecked ngClick ngCopy ngCut ngDblclick ngFocus ngKeydown ngKeypress ngKeyup ngMousedown ngMouseenter ngMouseleave ngMouseover ngMouseup ngMouseup ngPaste ngSubmit ngSwipeLeft ngSwiteRight

9.2 创建自己的内置指令

使用directive

angular.module('myApp',[]).
    directive('myDirective',function(){
        return{
            template:'name:{{name}} Score:{{score}}'
               }
    });

当模板在上面的代码返回时，你可以把以下的属性列表应用于该指令定义返回的对象。

template：允许你定义插入指令的元素的AngularJS模板文本
templateUrl：同template(除了你在服务器上指定一个URL，且局部模板被下载并被插入指令的元素中)
restrict：允许你指定该指令是应用于一个HTML元素，还是一个属性，或两者兼有之
replace：告诉编译器，用指令的模板来取代定义该指令的元素
transclude：允许你指定指令是否可以访问内部作用域以外的作用域
scope：允许你为指令指定内部作用域
link：允许你指定可以访问该作用域，DOM元素和其他能操作DOM属性的链接函数
controller：允许你在指令中定义一个控制器来管理该指令作用域和视图
require：允许你指定要实现这个指令的其他指令。这些指令的提供器对于要创建的这个指令的实例必须是可用的

9.2.1 定义指令视图模板

directive('myDirective',function(){
	return{
		template:'Name':{{name}} Score:{{score}}'
		}
	});

directive('myDirective',function(){
	return{
		transclude:true,
		template:'<div ng-transclude></div>'
		};
	});

directive('myDirective',function(){
	return{
		templateUrl:'/myDirective.html'
		};
	});

9.2.2 限制指令行为

你可以将指令应用为一个HTML元素，一个属性，或两者兼而有之。restrict属性允许你限制你的自定义指令可以被如何应用。restrict属性可以被设置为下面这样。

A：应用为一个属性名
E：应用为一个元素名
C：应用为一个类名
AEC：应用为一个属性名，一个元素名，或者一个类名。你也可以使用其他组合，如AE或AC。

9.2.3 更换模板元素

directive('myDirective',function(){
	return{
		replace:true,
		templateUrl:'<div>directive</div>'
	};
});

该指令可以将下面的模板代码改写成如下所示

<div>
    <span my-directive></span>
</div>

<div> 
    <div>directive</div>
</div>

9.2.4 转置外部作用域

angular.module('myApp',[]).
	directive('myDirective'.function(){
		return{
			transclude:true,
			scope:{},
			template:'<div ng-transclude>{{title}}</div>'
		};
	}).
	controller('myController',function($scope){
		$scope.title="myApplication";
	});

9.2.5 配置指令的作用域

directive('myDirective',function(){
    return{
	scope:{},
	templateUrl:'/myDirective.html'
	};
});

9.2.6 操纵DOM的链接功能

directive('myDirective',function(){
	return{
		scope:{title:'='},
		require:'^otherDirective',
		link:function(scope,elem,attr,otherController){
			scope.title = "new";
			elem.append("Linked");
			elem.on('$destroy',function(){
				//.清理代码
			});
			scope.$watch('title',function(newVal){
				//监视代码
			});
		}
	}
});

9.2.7 添加一个控制器到指令

directive('myDirective',function(){
	return{
		scope:{title:'='},
		controller:function($scope){
			$scope.title = "new";
			$scope.myFunction = function(){
			});
		}
	};
});

9.2.8 创建自定义指令

10，在web应用程序中实现AngularJS服务

10.1 了解AngularJS服务

AngularJS服务是单例对象，

10.2 使用内置的服务

下面是一些AngularJS内置的常用服务

$animate $cacheFactory $compile $cookies $document $http $interval $locale $location $resource $rootElement $rootScope $route $sce $templateCache $timeout $window

10.2.1 使用$http服务发送HTTP的GET和POST请求

HTTP请求中的相关方法如下：

delete(url,[config])
get(url,[config])
head(url,[config])
jsonp(url,[config])
post(url,data,[config])
put(url,data,[config])

可在$http服务请求的config参数中定义的属性

method url params data headers xsrfHeaderName xsrfCookieName transformRequest transformRequest cache timeout withCredentials responseType

当利用$http对象调用请求的方法时，你会取回一个带有promise方法success()和error()的对象，你可以向这些方法传递回调函数。回调函数可以接收以下参数。 data status header config

10.2.2 使用$cacheFactory服务

var app = angular.module('myApp',[]);
app.factory('MyCache',function($cacheFactory){
	return $cacheFactory('myCache',{capacity:5});
});
app.controller('myController',['$scope','MyCache',function($scope,cache){
	cache.put('myValue',55);
}]);
app.controller('myController',['$scope','MyCache',function($scope,cache){
	$scope.value = cache.get('myValue');
}]);

10.2.3 使用$window服务实现浏览器警报

var app = angular.module('myApp',[]);
app.controller('myController',['$scope','$window',function($scope,window){
	window.alert("Your screen is: "+ window.screen.availWidth + "X" + window.screen.availHeight);
	}]);

10.2.4 使用$cookieStore服务与浏览器交互

$cookieStore 的常用方法 get put remove

var app = angular.module('myApp',['ngCookies']);
app.controller('myController',['$scope','$cookieStore',function($scope,cookieStore){
	$scope.favCookie = '';
	$scope.myFavCookie = '';
	$scope.setCookie = function(){
		if($scope.favCookie === 'None'){
			cookieStore.remove('myAppCookie');
		}else{
			cookieStore.put('myAppCookie',{flavor:$scope.favCookie});
		}
		$scope.myFavCookie = cookieStore.get('myAppCookie');
	};
}]);

10.2.5 使用$interval 和 $timeout 服务实现定时器

$interval(callback,delay,[count],[invokeApply]);
$timeout(callback,delay,[invokeApply]);

10.2.6 使用$animate服务

猜你喜欢