在 AngularJS 中,依赖注入是一种设计模式,用于将组件之间的依赖关系解耦。这种模式使得代码更加模块化、可测试性更强,并且更容易进行单元测试。AngularJS 的依赖注入是通过一个注入器(injector)来实现的。

以下是一个简单的例子,演示了如何在 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.pingtaimeng.com/article/detail/4874/Angular