AngularJS 是一个流行的前端框架，它有着强大的数据绑定和模板指令功能。AngularJS 2.0 版本中，官方定义了一套强大的依赖注入和服务的机制，帮助开发者更好地管理和组织代码。在这篇文章中，我将会介绍 AngularJS 2.0 的依赖注入和服务机制，以及如何通过这些机制更好地组织和管理你的 AngularJS应用。
什么是依赖注入？
依赖注入是一种设计模式，它的目标是减少组件之间的依赖关系，使系统更加灵活和可扩展。在 AngularJS 2.0 中，依赖注入是一个重要的特性，它的实现基于类的注解和类型元数据。
在 AngularJS 2.0 中，我们可以使用 @Injectable() 注解来声明一个可注入的类。例如，下面的代码演示了如何声明一个服务:
@Injectable()
export class UserService {
getUsers() {
return [{name: 'user1'}, {name: 'user2'}];
}
}在上面的代码中，我们声明了一个 UserService 类，并使用 @Injectable() 注解来声明它是一个可注入的类。接下来，我们实现了一个 getUsers() 方法，它只是简单地返回一个用户数组。这个类现在已经可以被注入到其它 AngularJS 组件中了。
如何使用依赖注入？
在 AngularJS 2.0 中，我们使用一个 Injector 实例来创建和管理所有的类实例。下面的代码演示了如何创建一个 Injector 实例，并使用它来获取 UserService 的实例：
// javascriptcn.com 代码示例
import {Injector} from '@angular/core';
import {UserService} from './user.service';
let injector = Injector.create([
{provide: UserService, useClass: UserService}
]);
let userService = injector.get(UserService);
let users = userService.getUsers();在上面的代码中，我们首先从 @angular/core 模块中导入了 Injector 类和 UserService 类。接下来，我们创建了一个包含 UserService 的配置项的 Injector 实例，然后通过调用 Injector 实例的 get() 方法来获取 UserService 的实例。最后，我们可以调用 UserService 的方法并得到用户的数组。
什么是服务？
在 AngularJS 2.0 中，服务是一些可共享的代码，通常被用于实现业务逻辑或实现某些功能。服务通常是单例模式的，由导入它们的模块创建并提供给其它模块使用。在 AngularJS 2.0 中，我们可以使用 @Injectable() 注解声明一个类为可注入的服务。
下面的代码演示了如何声明一个可注入的日志服务：
// javascriptcn.com 代码示例
import {Injectable} from '@angular/core';
@Injectable()
export class LoggerService {
log(message: string) {
console.log(message);
}
error(message: string) {
console.error(message);
}
}在上面的代码中，我们定义了一个 LoggerService 类，它可以用于向控制台输出日志和错误信息。通过使用 @Injectable() 注解，我们使 LoggerService 成为可注入的服务。
如何使用服务？
使用服务非常简单，我们只需要在需要使用服务的组件中导入服务并将其注入到构造函数中即可。例如，下面的代码演示了如何在 AppComponent 组件中使用 LoggerService：
// javascriptcn.com 代码示例
import {Component} from '@angular/core';
import {LoggerService} from './logger.service';
@Component({
selector: 'my-app',
template: `
<div>
<button (click)="onClick()">Click Me</button>
</div>
`
})
export class AppComponent {
constructor(private logger: LoggerService) {
}
onClick() {
this.logger.log('button clicked');
}
}在上面的代码中，我们首先导入了 LoggerService 类，并在构造函数中将其注入到 AppComponent 类中。注意，在构造函数的参数中加上了 private 关键字，这将创建一个类属性并将 LoggerService 的实例注入到该属性中。接下来，我们实现了一个 onClick() 方法，每次点击按钮时都会调用 LoggerService 的 log() 方法。
总结
在本文中，我们介绍了 AngularJS 2.0 中的依赖注入和服务机制，并给出了一些示例代码。依赖注入和服务机制是 AngularJS 中非常重要的特性，使用它们可以更好地组织和管理你的代码，从而使你的应用更加灵活和可扩展。如果你正在学习 AngularJS 2.0，那么依赖注入和服务一定是你必须掌握的重要概念。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653d7a237d4982a6eb74cb2f