如何在AngularJS中配置单独的开发和生产环境

我们已经看到自己用各种服务器脚本语言编写了这种类型的代码:

 如果(env ==“发展”){ 
//做开发的东西
}
否则if(env ==“ production”){
//做生产的东西
}

如果我们想在前端执行相同类型的任务怎么办? 可能是通过dist文件夹提供生产应用程序,并从src文件夹暂存应用程序。 或者可能是从后端使用一些环境变量。 或更多其他用例,可帮助使开发更轻松,更快速,并优化生产。

通过使用Grunt在AngularJS中可以做到这一点。 Grunt是一个很棒的工具,可以帮助自动执行多个任务,如果手动执行这些任务可能会花费大量时间。

这个想法是使用grunt启动AngularJS应用程序,并创建一个grunt任务来创建角度常量。 这些角常数将定义环境是production还是development 。 这是执行此操作的分步指南:

  1. 为您的项目设置grunt。 请参阅原始的grunt入门指南。 即使是菜鸟,也能很好地解释它。
  2. 为您的项目设置ng-constant 。 这是一个强大的工具,可帮助您自动创建角度常数文件。 它的github仓库是不言自明的。
  3. 设置ng-constant ,在Gruntfile.js注册两个单独的grunt任务:一个用于开发,另一个用于生产。 如果您仍然不知道该怎么做或Gruntfile.js在哪里,那么您对grunt的了解还不够。 这些任务应如下所示:
  grunt.registerTask('dev',[ 
“ ngconstant:发展”
]);
  grunt.registerTask('prod',[ 
'ngconstant:production'
]);

4.在上面的代码中, ngconstant:developmentngconstant:production是grunt配置。 在ng-constant自述文件的帮助下创建这些配置。 他们应该看起来像这样:

  grunt.initConfig({ 
ngconstant:{
//所有目标的选项
选项:{
空间: ' ',
换行:'\'use strict \'; \ n \ n {\%= __ngModule%}',
名称:“常量”
},
//环境目标
发展:{
选项:{
目标:'./path/to/new/constants/file.js'
},
常数:{
ENV:{
名称:“ dev”
}
}
},
生产: {
选项:{
目标:'./path/to/new/constants/file.js'
},
常数:{
ENV:{
名称:'prod'
}
}
}
}
});

5.就这些。 现在,根据要在其中运行的环境,使用grunt devgrunt prod为您的角度应用程序提供服务。可以将角度常数轻松地注入到其控制器,指令,服务等中。例如,在此自定义的角度指令中:

 有角的。  模块 ('myApp') 
.directive('myDirective', function (ENV){
var templateUrl;
如果 ('dev'=== ENV.name){
templateUrl ='/path/to/view/in/dev/mode.html';
}
否则if ('prod'=== ENV.name){
templateUrl ='./path/to/view/in/prod/mode.html';
}
返回 {
限制:“ A”,
控制器:“ FormConfirmationCtrl”,
controllerAs:'fc',
模板:templateUrl
};
}]);

而已。 有许多其他方法和工具可以帮助您解决此问题,但是我发现这种方法是最好,最简单的。

欢迎更多建议。

祝您火箭速度的发展一切顺利。