如何優化AngularJS配置功能

Question

我有我的app.js文件中的以下配置功能和運行功能。什麼是優化這些函數方法的最佳方法？我們可以將它們移動到單個配置功能中嗎？ 或者我們可以將這些文件移動到另一個文件中，如果是，請更新我的代碼。

.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

也許你可以簡化使用單一的.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); 
      }); 
    }); 

如果你想組織在多個文件中你的配置功能，可能是最好的選擇是使用一個包，在這種情況下，有一些可行的選擇。 例如，你可以使用Gulp到CONCAT（縮小，醜化）的文件，這樣：

---

文件

文件1：

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

文件1：

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

文件3：

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

---

gulp.file

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/")) 
}) 

同爲Grunt，browserify或者如果您正在使用ASP.Net。 個人而言，我更喜歡從單個應用程序/模塊定義開始，然後如果解決方案開始增長，則打開捆綁解決方案。

一切順利。