web-dev-qa-db-ja.com

一般的なコントローラー機能の作成

すべてのコントローラーからアクセス可能な、ある種の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でどのようにすればよいですか？

javascriptangularjswebangularjs-service
40
Shlomi Schwartz

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がそれを注入します（ここで何が起こっているかを理解するには、依存性注入について読んでください。）

63
ganaraj

前の回答（factoryとは何かを定義するだけ）を更新するために、AngularJSで 依存関係を挿入 （共通コードを定義）する3つの方法があります。

  • プロバイダー
  • 工場
  • サービス

プロバイダーは、依存関係注入のより面倒な方法であるため、プロバイダーについてはあまり説明しません。ただし、 このページ は、それらがどのように機能するかを非常によく説明しています。

技術的には、serviceおよびfactoryが同じものに使用されます。結局のところ、サービスはコンストラクター関数ですが、ファクトリーはそうではありません。

この投稿 から：

module.service( 'serviceName', function );

serviceNameを注入可能な引数として宣言すると、関数のインスタンスが提供されます。

module.factory( 'factoryName', function );

factoryNameを注入可能な引数として宣言すると、module.factoryに渡されたfunction参照の呼び出しによって返される値が提供されます。

好みのものを使用して、same resultを取得できます。

service を介してまったく同じことを行う2つのコードがあります。次に、factory：

サービス構文

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

工場の構文

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