AngularJS 供应与注入服务

发布时间：2020-12-17 10:06:22 所属栏目：安全来源：网络整理

导读：学习要点注册组件管理注入在篇博客中，我们主要讨论的是AngularJS 在幕后注册 AngularJS 组件并注入它们解决依赖的服务一、为什么要使用供应和注入服务？在开发过程中，并非所有的服务我们都需要使用的到，而是用于 AngularJS 的幕后二、注册 AngularJ

学习要点

注册组件
管理注入

在篇博客中，我们主要讨论的是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并使用指定的非服务参数值

1.确定函数依赖—获取函数依赖的集合

<!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>

3.简化调用过程—使用invoke方法

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!