开源一夏 | AngularJS 实战之依赖注入与应用实践

作者：黎燃

2022 年 8 月 13 日
内蒙古
本文字数：1566 字
阅读完需：约 5 分钟

什么是依赖注入

依赖注入（DI）是一种软件设计模式。在此模式中，一个或多个依赖项（或服务）被注入（或通过引用传递）到独立对象（或客户端），然后成为客户端状态的一部分。这种模式分离了客户端依赖行为本身的创建，这使得程序设计松散耦合，并遵循依赖反转和单一责任的原则。与服务定位器模式直接相反，它允许客户机理解客户机如何使用系统查找依赖项。

Angularjs 提供了良好的依赖注入机制。以下五个核心组件用作依赖项注入：

List item
value
factory
service
provider
constant

定义一个模块

var mainApp = angular.module("mainApp", []);

复制代码

创建 value 对象 "defaultInput" 并传递数据

mainApp.value("defaultInput", 5);

复制代码

将 "defaultInput" 注入到控制器

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {   $scope.number = defaultInput;   $scope.result = CalcService.square($scope.number);      $scope.square = function() {      $scope.result = CalcService.square($scope.number);   }});

复制代码

factory

factory 是一个返回值的函数。它是在服务和控制器需要时创建的。通常我们使用 factory 函数来计算或返回值。创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers

mainApp.factory('MathService', function() {   var factory = {};      factory.multiply = function(a, b) {      return a * b   }   return factory;});

复制代码

在 service 中注入 factory "MathService"

mainApp.service('CalcService', function(MathService){   this.square = function(a) {      return MathService.multiply(a,a);   }});

复制代码

在 angularjs 中，通过提供者（配置阶段）创建服务、工厂等。提供程序提供了一个工厂方法 get（），用于返回 value/service/factory。

mainApp.config(function($provide) {   $provide.provider('MathService', function() {      this.$get = function() {         var factory = {};                    factory.multiply = function(a, b) {            return a * b;          }         return factory;      };   });});

复制代码

使用 provider 创建 service 定义一个方法用于计算两数乘积常量（Constant）用于在配置阶段传递值。请注意，此常量在配置阶段不可用。

html 元素是 AngularJS 应用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

复制代码

<div> 是 HTML 页面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

复制代码

ng-model 指令绑定了 <textarea> 到控制器变量 message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

复制代码

两个 ng-click 事件调用了控制器函数 clear() 和 save():

<button ng-click="save()">Save</button><button ng-click="clear()">Clear</button>

复制代码

ng-bind 指令绑定控制器函数 left() 到<span> ，用于显示剩余字符:

Number of characters left: <span ng-bind="left()"></span>

mainApp.constant("configParam", "constant value");

复制代码

Angularjs 应用程序架构上面的示例是一个完整的 angularjs 单页 web 应用程序（SPA）。<html>元素包含一个 angularjs 应用程序（ng app=）。元素定义了 angularjs 控制器（ng controller=）的范围。一个应用程序中可以有多个控制器。应用程序文件（my…App.JS）定义了应用程序模型代码。一个或多个控制器文件（my…Ctrl.JS）定义了控制器代码。

<script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script>

复制代码

应用程序库文件只能在加载 angularjs 后执行：

<p><button ng-click="save()">保存</button><button ng-click="clear()">清除</button></p><script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script>

复制代码