AngularJS教程：服务注入控制器
需积分: 0 190 浏览量
更新于2024-08-05
收藏 272KB PDF 举报
"AngularJS开发指南29：将服务注入到控制器中"
在AngularJS中，服务扮演着核心角色，它们提供了可复用的功能模块，可以被多个组件（如控制器、指令等）共享。本篇指南主要关注如何将服务注入到控制器中以利用其功能。
在AngularJS中，依赖注入（Dependency Injection，简称DI）是一种设计模式，它允许开发者在不直接创建对象的情况下获取所需的服务。这种模式使得代码更加模块化，易于测试和维护。由于JavaScript是动态类型的，DI系统无法像静态类型语言那样通过类型信息来决定注入什么服务。因此，我们需要显式地告诉AngularJS要注入哪些服务。
将服务注入到控制器的方法通常有两种：
1. **隐式注入**：AngularJS尝试通过函数的参数名来解析依赖。例如，如果我们在控制器定义中这样写：
```javascript
function myController($location, $log) {
// ...
}
```
AngularJS会自动识别`$location`和`$log`是需要注入的服务。
2. **显式注入**：由于JavaScript引擎在压缩代码时可能会改变参数名，为了确保压缩后的代码仍能正确工作，我们可以使用`$inject`属性来指定依赖的服务。例如：
```javascript
myController.$inject = ['$location', '$log'];
function myController($loc, $log) {
// ...
}
```
在这里，即使我们使用了不同的参数名（比如`$loc`和`$log`），只要`$inject`数组中的服务名与实际服务注册的名字匹配，AngularJS就能正确注入服务。显式注入的好处是提高了代码的压缩安全性。
在HTML中，我们可以通过`ng-controller`指令将控制器关联到DOM元素，从而创建一个作用域实例。例如：
```html
<body ng-app="MyServiceModule">
<div ng-controller="myController">
<!-- ... -->
</div>
</body>
```
这里的`ng-app`定义了应用的根模块，而`ng-controller`指定了要使用的控制器。在实际项目中，还需要引用包含控制器定义的脚本文件，如`script.js`。
AngularJS的依赖注入机制简化了代码的编写，使得服务能够轻松地在不同组件间共享。通过理解如何将服务注入到控制器，开发者可以更好地利用AngularJS的特性，构建出高效且易于维护的Web应用。
2015/7/21 AngularJS开发指南29：将服务注入到控制器中|AngularJS中文社区
http://z.sdutlinux.org/scrapbook_new/data/20130407230130/index.html 1/5
AngularJS开发指南29：将服务注入到控制器中
发表:13032918:41 更新:13032918:41 访问:139次 热度:28 0条评论
AngularJS AngularJS_开发指南
将服务用作控制器的依赖和将服务用作其他服务的依赖很类似。
因为Javascript是一种动态语言，依赖注入系统无法通过静态类型来知道应该注入什么样的服务
（静态类型语言就可以）。所以，你应该$inject的属性来指定服务的名字，这个属性是一个包含这需要
注入的服务的名字字符串的数组。名字要和服务注册到系统时的名字匹配。服务的名称的顺序也很重
要：当执行工场函数时传递的参数是依照数组里的顺序的。但是工场函数中参数的名字不重要，但最好
还是和服务本身的名字一样，下面展示了这样的好处:formatDate
functionmyController($loc,$log){
this.firstMethod=function(){
//use$locationservice
$loc.setHash();
};
this.secondMethod=function(){
//use$logservice
$log.info('...');
};
}
//whichservicestoinject?
myController.$inject=['$location','$log'];
index.html:
<!doctypehtml>
<htmlng‐app="MyServiceModule">
<head>
<scriptsrc="http://code.angularjs.org/angular‐1.0.2.min.js"></script>
<scriptsrc="script.js"></script>
</head>
<body>
<divng‐controller="myController">
<p>Let'strythissimplenotifyservice,injectedintothecontroller...</p>
<inputng‐init="message='test'"ng‐model="message">
<buttonng‐click="callNotify(message);">NOTIFY</button>
</div>
</body>
</html>
AngularJS中文社区
下载后可阅读完整内容，剩余4页未读，立即下载
2022-08-03 上传
2015-12-07 上传
2021-01-31 上传
2018-07-05 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
艾苛尔
- 粉丝: 34
- 资源: 307
我的内容管理
展开
最新资源
- ES管理利器：ES Head工具详解
- Layui前端UI框架压缩包：轻量级的Web界面构建利器
- WPF 字体布局问题解决方法与应用案例
- 响应式网页布局教程：CSS实现全平台适配
- Windows平台Elasticsearch 8.10.2版发布
- ICEY开源小程序：定时显示极限值提醒
- MATLAB条形图绘制指南：从入门到进阶技巧全解析
- WPF实现任务管理器进程分组逻辑教程解析
- C#编程实现显卡硬件信息的获取方法
- 前端世界核心-HTML+CSS+JS团队服务网页模板开发
- 精选SQL面试题大汇总
- Nacos Server 1.2.1在Linux系统的安装包介绍
- 易语言MySQL支持库3.0#0版全新升级与使用指南
- 快乐足球响应式网页模板：前端开发全技能秘籍
- OpenEuler4.19内核发布：国产操作系统的里程碑
- Boyue Zheng的LeetCode Python解答集
