40

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

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

'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的功能。AdminCtrlMainAppCtrl

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

4

2 回答 2

63

在 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 会为您注入它(阅读依赖注入 ..以了解这里发生了什么。)

于 2012-07-04T09:34:57.307 回答
9

只是为了更新以前的答案(仅定义是什么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');
    }
  }
});
于 2016-10-14T07:37:09.670 回答