以下是一个简单的例子,演示了如何在 AngularJS 中进行依赖注入:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 依赖注入</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>AngularJS 依赖注入</h2>
<div>{{ greeting }}</div>
<script>
// 创建一个 AngularJS 模块
var app = angular.module('myApp', []);
// 定义一个服务(Service)
app.service('myService', function () {
this.getGreeting = function () {
return 'Hello, AngularJS!';
};
});
// 在控制器中注入服务
app.controller('myCtrl', function ($scope, myService) {
// 通过依赖注入使用服务
$scope.greeting = myService.getGreeting();
});
</script>
</body>
</html>
在这个例子中,我们创建了一个名为 myApp 的 AngularJS 模块,并定义了一个名为 myService 的服务。这个服务有一个 getGreeting 方法返回问候语。
然后,在 myCtrl 控制器中,我们通过依赖注入的方式将 myService 注入,然后在控制器中使用这个服务的方法来获取问候语,并将其绑定到 $scope.greeting 上,以便在视图中显示。
AngularJS 的注入器会根据函数参数的名称,自动注入对应的依赖项。在这个例子中,$scope 是 AngularJS 内置的对象,而 myService 是我们自定义的服务。
请注意,依赖注入是 AngularJS 框架的核心概念之一,它带来了代码的模块化和可测试性的提升。在更复杂的应用中,你可能会看到更多使用依赖注入的情况,包括控制器、服务、过滤器等组件之间的交互。
转载请注明出处:http://www.zyzy.cn/article/detail/4874/Angular