AngularJS設定機能を最適化する方法

Question

私のapp.jsファイルに以下の設定機能と実行機能があります。これらの関数法を最適化する最良の方法は何ですか？これらを単一のconfig関数に移すことはできますか？ または、これらを別のファイルに移動して、「はい」の場合はコメント内でコードを更新してください。

.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { 
     cfpLoadingBarProvider.includeSpinner = false; 
     cfpLoadingBarProvider.includeBar = true; 

    }]) 
    .run(function($state, $rootScope, $window) { 
     $rootScope.$state = $state; 
     $rootScope.$on("$locationChangeSuccess", 
      function(event, current, previous, rejection) { 
       $window.scrollTo(0, 0); 
      }); 
    }) 
    .config(function($httpProvider) { 
     return $httpProvider.interceptors.push("AuthInterceptor"); 
    }) 
    .config(['toastyConfigProvider', function(toastyConfigProvider) { 
     toastyConfigProvider.setConfig({ 
      limit: 2, 
      sound: true, 
      position: 'top-center', 
      shake: false, 
      theme: 'material' 
     }); 
    }]) 
    .config(function($stateProvider, $urlRouterProvider, $locationProvider, helloProvider, toastrConfig) { 
     helloProvider.init({ 
      facebook: '1234567899', 
      google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com', 
      twitter: 'wgwerwrgwrgwrgwrgwrw' 
     }, { 
      redirect_uri: 'redirect.html', 
      oauth_proxy: 'https://auth-server.herokuapp.com/proxy', 
      oauth_version: '1.0a' // probably 1.0a with hello.js 

     }); 

Answer 1

たぶん、あなたは、あなたがまたuglifyプロセスを処理するために、あなたの依存関係に名前を付けることができ、単一の.config呼び出しを使用して設定機能を簡素化することができます。

.config(["cfpLoadingBarProvider", 
     "$httpProvider", 
     "toastyConfigProvider", 
     "$stateProvider", 
     "$urlRouterProvider", 
     "$locationProvider", 
     "helloProvider", 
     "toastrConfig", 
    function (cfpLoadingBarProvider, 
       $httpProvider, 
       toastyConfigProvider, 
       $stateProvider, 
       $urlRouterProvider, 
       helloProvider, 
       toastrConfig) { 
     cfpLoadingBarProvider.includeSpinner = false; 
     cfpLoadingBarProvider.includeBar = true; 
     $httpProvider.interceptors.push("AuthInterceptor"); 
     toastyConfigProvider.setConfig({ 
      limit: 2, 
      sound: true, 
      position: 'top-center', 
      shake: false, 
      theme: 'material' 
     }); 
     helloProvider.init({ 
      facebook: '1234567899', 
      google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com', 
      twitter: 'wgwerwrgwrgwrgwrgwrw' 
     }, { 
       redirect_uri: 'redirect.html', 
       oauth_proxy: 'https://auth-server.herokuapp.com/proxy', 
       oauth_version: '1.0a' // probably 1.0a with hello.js 

      }); 
    }]) 
    .run(function ($state, $rootScope, $window) { 
     $rootScope.$state = $state; 
     $rootScope.$on("$locationChangeSuccess", 
      function (event, current, previous, rejection) { 
       $window.scrollTo(0, 0); 
      }); 
    }); 

あなたはおそらく最良のオプションは、バンドルを使用している、複数のファイルにコンフィグ機能を整理したい場合は、その場合には、いくつかの実行可能なオプションがあります。 たとえば、あなたはそう、あなたのファイル（uglify、縮小化を）CONCATするGulpを使用することができます。

---

ファイル

はFile1：

angular.module('mymodule', []) 
    .config(["dependencyA", function (dependencyA) { 
     dependencyA.doSomething(); 
    }]); 

はFile1：

angular.module('mymodule', []) 
    .config(["dependencyB", function (dependencyB) { 
     dependencyB.doSomething(); 
    }]); 

FILE3：

angular.module('mymodule', ["dependecies..."]) 
    .run(["authService", (authService) => { 
     authService.fillAuthData(); 
    }]); 

---

gulp.fileあなたがASP.Netを使用しているGrunt、browserifyまたは場合

var gulp = require("gulp"); 
var concat = require("gulp-concat"); 
var sourcemaps = require("gulp-sourcemaps"); 

gulp.task("ts",() => { 
    return gulp.src("./src/js/**/*.js") 
      .pipe(sourcemaps.init()) 
      .pipe(concat("dist.js")) 
      .pipe(sourcemaps.write()) 
      .pipe(gulp.dest("./js/")) 
}) 

同じ。 個人的に私は単一のapp/module定義から始めることを好みますが、ソリューションの開始が成長する場合はバンドルソリューションをオンにします。

すべて最高です。