创建通用控制器功能

Creating common controller functions

本文关键字：功能 控制器 创建      更新时间：2023-09-26
如何

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

我的主模块中有以下路由代码：

'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 中做到这一点？

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

只是为了更新以前的答案（它只定义factory是什么），有 3 种方法可以在 AngularJS 中注入依赖项（定义公共代码）：

  • 供应商
  • 工厂
  • 服务业

我不会过多谈论提供程序，因为它是一种更费力的依赖注入方法。但是，此页面很好地解释了它们的工作原理。

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

从这篇文章：

module.service( 'serviceName', function );

将serviceName声明为可注入参数时，您将 提供了函数的实例。

module.factory( 'factoryName', function );

将factoryName声明为可注入参数时，您将 提供通过调用函数返回的值 引用传递给模块工厂。

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

这是两个代码首先通过service执行完全相同的操作，然后factory：

服务语法

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

工厂语法

app.factory('MyService', function () {
  return {
    sayHello: function () {
      console.log('hello');
    }
  }
});
相关文章：