如何优化 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 调用来简化配置函数，然后您还可以命名您的依赖项来处理 uglify 过程。

.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 来合并（缩小、丑化）您的文件，因此：

---

文件

文件 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 时也是如此。 我更喜欢从单个应用程序/模块定义开始，然后如果解决方案开始增长，我会打开捆绑解决方案。

一切顺利。