angularjs - 如何在 Azure 网站中拥有测试和生产 AngularJS 应用程序？

Question

有人可以建议我如何设置它吗？这是场景。

我正在开发一个带有 Azure 移动服务后端的 Angular 应用。

在 Angular 中，我有指向移动服务 API 路径的资源。我有一个返回基本服务路径的配置工厂。我希望 dev/staging 槽指向 -dev api，生产槽指向生产 API 路径。

我可以创建两个配置工厂，但我不确定如何告诉它在暂存槽中使用开发工厂，在生产槽中使用生产工厂。对于带有服务器代码的 .net 应用程序，我会使用配置内容，或者可能是环境变量，但这都是客户端代码。

我以为只有两个网站，一个是从开发分支部署的，一个是从主分支部署的，并且有不同的配置...但是一旦我将开发合并到主分支，配置更改也会合并。

我不确定这是否重要，但我正在从 Visual Studio Online 进行部署作为构建的一部分。

我怎样才能做到这一点？

Answer 1

我能够解决这个同样的问题。我有开发、测试和生产环境，它们各自需要连接到不同的 API 端点。我能够使用名为 grunt-ng-constant 的 grunt 插件来完成此任务。

基本上，安装插件后，修改 Gruntfile 并在 grunt.initConfig 中添加如下内容:

ngconstant: {
  // Options for all targets
  options: {
    space: '  ',
    wrap: '"use strict";\n\n {%= __ngModule %}',
    name: 'config',
  },
  // Environment targets
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'development',
        apiEndpoint: 'http://your-development.api.endpoint:3000'
      }
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'production',
        apiEndpoint: 'http://api.livesite.com'
      }
    }
  }
},

像这样注册 Grunt 任务:

grunt.registerTask('serve', function (target) {
  if (target === 'dist') {
  return grunt.task.run(['build', 'connect:dist:keepalive']);
}

grunt.task.run([
  'clean:server',
  'ngconstant:development', // ADD THIS
  'bower-install',
  'concurrent:server',
  'autoprefixer',
  'connect:livereload',
  'watch'
]);

});

现在，每次运行 gruntserve 时，它都会生成一个 config.js 文件，其中包含您的开发常量。您可以配置不同的任务，例如 grunt 测试 或 grunt 生产 来生成测试或生产常量。

最后，将 config.js 添加到 index.html 中，如下所示:

<script src="/scripts/config.js" />

并在您的应用程序中注册配置模块:

var app = angular.module('myApp', [ 'config' ]);

在你的 Controller 中，你可以像这样获取“环境”变量:

angular.module('myApp')
  .controller('MainCtrl', function ($scope, $http, ENV) { // ENV is injected

     $scope.login = function() {

     $http.post(
        ENV.apiEndPoint, // Our environmental var :)
        $scope.yourData
     ).success(function() {
        console.log('Cows');
     });

   };

 });

通过这种方法，您可以轻松地自动化整个部署管道。您可以让 CI 服务器将您的更改推送到适当的服务器并构建正确版本的应用程序。

这是一个非常有用的资源供您阅读，我从中获取了代码示例:http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application

希望这对您有帮助!