创建通用控制器功能

Question

如何创建某种可以从我的所有控制器访问的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,AdminCtrl和MainAppCtrl.

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

Answer 1

以角度定义公共代码的方法是通过服务.

您将定义一个新服务,如下所示:

.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将负责为您注入它(请阅读Dependancy Injection ..以了解此处发生的情况.)

Answer 2

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

• 供应商
• 工厂
• 服务

我不会谈论提供者,因为它是依赖注入的一种更费力的方法.但是,这个页面很好地解释了它们的工作原理.

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

从这篇文章:

module.service( 'serviceName', function );

当声明serviceName为注入参数时,将为您提供该函数的实例.

module.factory( 'factoryName', function );

当声明factoryName为injectable参数时,将通过调用 传递给module.factory 的函数引用来提供返回的值.

您可以使用您喜欢的那个并获得相同的结果.

这是两个代码通过service第一个完成相同的事情,然后factory:

服务语法

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

工厂语法

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