学习要点
- 注册组件
- 管理注入
在篇博客中，我们主要讨论的是AngularJS 在幕后注册 AngularJS 组件并注入它们解决依赖的服务
一、为什么要使用供应和注入服务？
在开发过程中，并非所有的服务我们都需要使用的到，而是用于 AngularJS 的幕后
二、注册 AngularJS 组件
$provider 服务用于注册组件，比如服务，以使得他们可悲注入来满足依赖
下面是 $provider 服务定义的方法
constant(name,value) 定义常量
decorator(name,service) 定义服务修饰器
factory(name,service) 定义服务
provider(name,service) 定义服务
service(name,provider) 定义服务
value(name,value) 定义变量服务
下面我们用 $provider 服务的 decorator 修饰器来重写 $log.log() 方法
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar ajax</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<button class="btn btn-primary" ng-click="handle()">点击</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) .config(function ($provide) { // $provide.decorator 传人你想修饰的服务名称和必须声明依赖于 $delegate (授权)的修饰函数 $provide.decorator("$log",function ($delegate) { // 将 log 方法重写为 originalLog 方法，并且在新方法中添加 “日志” $delegate.originalLog = $delegate.log; $delegate.log = function (message) { $delegate.originalLog("日志: " + message); } // 必须返回解决指定服务的依赖的对象 return $delegate; }) }) .controller("defaultCtrl",function ($scope,$log) { $scope.handle = function () { $log.log("button clicked"); } }) </script>
</body>
</html>
三、管理注入
$injector 服务负责确定函数声明的依赖，并解决那些依赖
下面是 $injector 服务定义的方法
annotate(fn) 获取指定函数的参数，包括那些不是服务的 get(name) 获取指定服务名称的服务对象 has(name) 如果指定名称的服务存在，返回true invoke(fn,self,locals) 调用指定函数，使用指定的值作为该函数的this并使用指定的非服务参数值
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar ajax</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<button class="btn btn-primary" ng-click="handleClick()">点击</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) .controller("defaultCtrl",$injector) { var counter = 0; var logClick = function ($log,$exceptionHandler,message) { if (counter == 0) { $log.log(message); counter++; } else { $exceptionHandler("OK"); } } $scope.handleClick = function () { // 获取函数依赖集合 $log,message var deps = $injector.annotate(logClick); for (var i = 0; i < deps.length; i++) { // 如果指定名称的服务存在，返回true $log,$exceptionHandler if ($injector.has(deps[i])) { console.log("依赖：" + deps[i]); } } } }) </script>
</body>
</html>
2.获得服务实例—通过获得依赖的集合，并且执行依赖集合服务的函数
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar ajax</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<button class="btn btn-primary" ng-click="handleClick()">点击</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",message) { if (counter == 0) { $log.log(message); counter++; } else { $exceptionHandler("OK"); } } $scope.handleClick = function () { // 获取函数依赖集合(参数) $log,message var deps = $injector.annotate(logClick); var args = []; for (var i = 0; i < deps.length; i++) { // 如果指定名称的服务存在，返回true $log,$exceptionHandler if ($injector.has(deps[i])) { // 获取指定服务名称的服务对象 args.push($injector.get(deps[i])); } else if (deps[i] == "message") { args.push("Button Clicked"); } } logClick.apply(null,args); } }) </script>
</body>
</html>
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar ajax</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<button class="btn btn-primary" ng-click="handleClick()">点击</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",message var deps = $injector.annotate(logClick); var localVars = { message : "按钮被单击",} // 调用指定函数，使用指定的值作为该函数的this并使用指定它的非服务参数值 $injector.invoke(logClick,null,localVars); } }) </script>
</body>
</html>
4.从根元素获取 $injector 服务
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar ajax</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<button class="btn btn-primary" ng-click="handleClick()">点击</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",$rootElement) { var counter = 0; var logClick = function ($log,message) { if (counter == 0) { $log.log(message); counter++; } else { $exceptionHandler("OK"); } } $scope.handleClick = function () { var localVars = { message : "按钮被单击",} // 使用根元素获取$injector服务 $rootElement.injector().invoke(logClick,localVars); } }) </script>
</body>
</html>
