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

당신은 아마 최선의 선택이이 경우에, 번들을 사용하고, 여러 파일에 설정 기능을 구성하려면

, 일부 실행 가능한 옵션이 있습니다. 예를 들어, 당신은 너무 (작게하다, 추하게) 파일 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 정의로 시작하는 것을 선호합니다. 그런 다음 솔루션 시작이 커지면 번들 솔루션으로 전환합니다.

모두 최고입니다.