创建通用控制器功能

IT技术 javascript angularjs web angularjs-service
2021-03-16 07:44:13

如何创建某种可从我的所有控制器访问的 utils 包?

我的主module中有这个路由代码:

'use strict';

angular.module('lpConnect', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home', {template: 'views/home.html', controller: HomeCtrl}).
        when('/admin', {template: 'views/admin.html', controller: AdminCtrl}).
        when('/connect', {template: 'views/fb_connect.html', controller: MainAppCtrl}).
        otherwise({redirectTo: '/connect'});
}]);

我想要一个可以对HomeCtrl,AdminCtrl通用的函数MainAppCtrl

我应该如何在 AngularJS 中做到这一点?

2个回答

在 angular 中定义公共代码的方法是通过服务。

您可以像这样定义一个新服务:

.factory('CommonCode', function ($window) {
        var root = {};
        root.show = function(msg){
            $window.alert(msg);
        };
        return root;
    });

在您的控制器中,您将注入此服务..像这样

function MainAppCtrl($scope,CommonCode)
{
     $scope.alerter = CommonCode;
     $scope.alerter.show("Hello World");
}

只需将 CommonCode 作为参数包含在您的控制器函数中。Angular 将负责为您注入它(阅读依赖注入 ..以了解这里发生的事情。)

它将您的代码与全局window对象分离。所以它更容易测试(模拟!)。
2021-04-18 07:44:13
坦率地说,当我第一次开始时,这让我感到困惑。从上面的例子可以看出,Factory() 通常返回一个单例。A service() - 返回一个构造函数。据我所知, value() 和 constant() 通常做同样的事情。所有这些都是包装(方便)而不是提供()......
2021-04-21 07:44:13
$window 变量在这里必不可少吗?
2021-04-21 07:44:13
其他任何人都觉得……奇怪的是,您通过调用工厂方法来定义服务?似乎一些命名改进对提高框架的易用性大有帮助。
2021-04-22 07:44:13
@bclinkinbeard 正是我的想法,因为我正在围绕 AngularJS。factory(), value(), constant(), 和service()似乎只不过是 特定情况的快捷方式provide(),旨在用于定义(提供)服务。我想文档会受益于将上述句子用大写字母放在某处的拉取请求。
2021-04-29 07:44:13

只是为了更新先前的答案(仅定义是什么factory),有 3 种方法可以在 AngularJS 中注入依赖项(定义公共代码):

  • 供应商
  • 工厂
  • 服务

我不会过多谈论 provider,因为它是一种更费力的依赖注入方法。然而,这个页面很好地解释了它们是如何工作的。


从技术上讲,服务工厂用于同一件事。事实证明,服务是构造函数,而工厂则不是。

这篇文章

module.service( 'serviceName', function );

当声明serviceName为可注入参数时,您将获得函数的一个实例

module.factory( 'factoryName', function );

当声明factoryName为可注入参数时,您将获得通过调用 传递给 module.factory的函数引用返回的值


您可以使用您喜欢的方法并获得相同的结果

这里有两个代码service首先通过完全相同的方式做同样的事情,然后factory

服务语法

app.service('MyService', function () {
  this.sayHello = function () {
    console.log('hello');
  };
});

工厂语法

app.factory('MyService', function () {
  return {
    sayHello: function () {
      console.log('hello');
    }
  }
});