angularjs – 运行concat / uglify后的角度“状态已定义”错误

您有多个文件包含配置模块的配置功能,如下所示：

angular
    .module('controlcenter.websites',[])
    .config(config);

function config() {
    // ...
}

问题是,在连接所有文件之后,最终会得到一个带有多个config声明的大文件.由于JavaScript的变量提升,所有声明都被移到顶部,只评估它们中的最后一个,这个是：

function config($stateProvider) {
  $stateProvider.state( 'websites',templateUrl: 'websites/overview/websites.tpl.html'
      }
    },data : {requiresLogin : true }
  });
}

因此,每次你.config(config)一个模块时,你都告诉Angular用你的特定配置函数配置你的模块,这意味着它会多次执行并尝试不止一次地定义状态网站.

解：

使用闭包来包装每个JavaScript文件代码.这样您就可以避免多次声明变量/函数：

(function (angular) {

    'use Strict';

    angular
      .module('controlcenter.website.details',['ui.router'])
      .config(config);

    config.$inject = ['$stateProvider'];

    function config($stateProvider) {
      $stateProvider
        .state( 'websiteDetails',{
          url: '/websiteDetails/:id',views: {
            "main": {
              controller: 'WebsiteDetailsController',templateUrl: 'websites/details/website.details.tpl.html'
            }
          },data : {requiresLogin : true }
        })

        .state( 'websiteDetails.categories',{
          url: '/categories',views: {
            "detailsContent": {
              templateUrl: 'websites/details/website.details.categories.tpl.html'
            }
          },data : {requiresLogin : true }
        })
        ;
    }
})(window.angular);

编辑：

>我强烈建议您将文件包装成闭包.但是,如果您仍然不想这样做,可以根据各自的模块命名您的功能.这样,controlcenter.website.details的配置功能将成为controlcenterWebsiteDetailsConfig.另一个选择是在构建阶段使用grunt-wrap包装代码.
> window.angular和closures：这是我喜欢在我的代码上使用的一种技术,当我要去uglify它时.通过将代码包装到闭包中并为其提供一个名为angular的参数,其实际值为window.angular,您实际上是在创建一个可以被uglified的变量.这段代码,例如：

(function (angular) {
    // You Could also declare a variable,instead of a closure parameter:
    // var angular = window.angular;

    angular.module('app',['controllers']);
    angular.module('controllers',[]);
    // ...
})(window.angular);

可以很容易地对此进行修改(注意每个对angular的引用都被a替换)：

!function(a){a.module("app",["controllers"]),a.module("controllers",[])}(window.angular);

另一方面,这是一个未打包的代码片段：

angular.module('app',['controllers']);
angular.module('controllers',[]);

会成为：

angular.module("app",angular.module("controllers",[]);

有关闭合的更多信息,请查看this post和this post.