创建通用控制器功能答案

【问题标题】：Creating common controller functions创建通用控制器功能
【发布时间】：2012-07-04 16:03:58
【问题描述】：

如何创建可以从我的所有控制器访问的某种实用程序包？

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

'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中我应该怎么做？

【问题讨论】：

标签： javascript angularjs web angularjs-service

【解决方案1】：

在 Angular 中定义通用代码的方式是通过 Services。

你会像这样定义一个新的服务：

.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 ..了解这里发生了什么。）

【讨论】：

其他人发现它......奇怪你通过调用工厂方法定义服务？似乎一些命名改进将大大提高框架的可接近性。
@bclinkinbeard 正是我在思考 AngularJS 时的想法。 factory()、value()、constant() 和 service() 似乎只是 provide() 特定情况的快捷方式，旨在用于定义（提供）服务。我猜文档会受益于将上述句子以大写字母放在某处的拉取请求。
坦率地说，当我刚开始的时候，这让我很困惑。从上面的例子可以看出，Factory() 通常返回一个单例。 A service() - 返回一个构造函数。据我所知， value() 和 constant() 通常做同样的事情。所有这些都是对提供（）的包装（方便）......
这里的 $window 变量是否必不可少？
它将您的代码与全局 window 对象分离。所以它更容易测试（模拟！）。

【解决方案2】：

只是为了更新之前的答案（仅定义factory 是什么），AngularJS 中有 3 种方法来inject dependencies（定义通用代码）：

提供者
工厂
服务

关于provider我就不多说了，因为它是一种比较费力的依赖注入方式。但是，this page 很好地解释了它们的工作原理。

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

来自this post：

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');
    }
  }
});

【讨论】：