javascript - AngularJS应用程序在本地主机上运行，​​但不在heroku上运行

Question

我的 angularjs 应用程序在我的机器上的本地主机上运行得很好。但是当我将其部署到 Heroku 时，该应用程序显示了，但某些功能(主要是前端到后端的通信)失败了。我怀疑这是因为我使用了 http://localhost:3000 而不是我真正的网站地址: https://mytestapp.herokuapp.com 。有人可以让我知道我应该做什么才能让这个应用程序在 Heroku 上运行吗？后端与前端通信以运行登录/注册功能。目前，当我登录或注册时，我收到一个错误，就好像什么也没发生一样。

我运行了grunt build，并从.gitignore中删除了/dist，并有一个像这样的procfile web: Node api.js 。

我的 package.json 文件如下:

  "version": "1.0.0",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "start": "nf start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

我还在我的 app.config.js 中声明了一个常量，例如:

  .constant('API_URL', 'http://localhost:3000/')

我使用 API_URL 设置我的登录/注册身份验证提供商。

在我的 gruntfile.js 中，我还有以下内容:

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },

更新

我试图在这个 Controller 中实现它，但没有成功:当我实现 Yoni 的解决方案时，我不再获得 projectlist ，它显示一个空页面。这是为什么？

'use strict';
angular.module('ModuleV11App')
  .controller('ProjectlistCtrl', function ($http, $scope, API_URL, alert) {
    return $http.get($rootScope.server.url + '/projectlist').success(function (projectlist) {
      $scope.projectlist = projectlist;
    }).error(function (err) {
      alert('warning', "Unable to get projects, please login first", err.message);
    })

  });

但是，当它像这样时，它会起作用:

return $http.get(API_URL + 'projectlist').success(function (projectlist) {

Answer 1

使用$location service .

你可以这样做:

angular.module('mainModule', [])
    .run(function($location,$rootScope) {
        $rootScope.server = {url: location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '')};
    })

然后您可以在前端代码中的任何位置进行这样的调用:

$http.get($rootScope.server.url + '/whatever');