Javascript 生产中缺少角度工厂-导轨/角度应用程序

我是一名开发人员训练营学校的学生，创建了一个metrics应用程序，它从一个独立的API中提取数据。为了了解前端框架，我用Angular创建了仪表板。我创建了一个工厂，通过检查主机名并为API URL分配一个变量来确定应用程序上是否正在开发或生产中运行

我遇到的问题是，这家工厂在开发中工作，但不在生产中。事实上，当通过开发工具在生产中检查application.js时，工厂并不存在。下面是开发和生产中的开发工具中提供的代码

发展：

angular.module('blocmetrics').factory('apiFactory', function(){
  var api = "";

  if (location.hostname == "localhost") {
    api = "http://localhost:3001";
    return api;
  } else {
    api = "https://ryanhaase-api-blocmetrics.herokuapp.com";
    return api;
  }
  return api;
});

angular.module('blocmetrics').controller('mainCtrl', function($scope, apiFactory, $http){

  $http.defaults.headers.common['Authorization'] = 'Token ' + document.cookie;

  $scope.goToDomain = function(domainId) {
    document.location = '#domains/' + domainId;
  };
  debugger;
  // API call for users apps
  var domain = $http.get(apiFactory +'/apps').
  success(function(data, status, headers, config) {
    $scope.domains = data;
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});

生产（工厂缺失）：

如前所述，我是Angular和JS的新手，因此非常感谢您的帮助

-R

Application.js：

var blocmetrics = angular.module('blocmetrics', ['ngResource', 'ngRoute', 'templates']);

blocmetrics.config(function($routeProvider, $locationProvider) {
  // $locationProvider.html5Mode(true);
  $routeProvider
  .when('/domains/:domain_id', {
    templateUrl: 'assets/templates/domain.html',
    controller: 'domainCtrl'
  })
  .when('/setup', {
    templateUrl: 'assets/templates/setup.html',
    controller: 'setupCtrl'
  })
  .otherwise({
    redirectTo: '/setup'
  });
});

angular.module('blocmetrics').factory('apiFactory', function(){
  var api = "";

  if (location.hostname == "localhost") {
    api = "http://localhost:3001";
    return api;
  } else {
    api = "https://ryanhaase-api-blocmetrics.herokuapp.com";
    return api;
  }
  return api;
});

angular.module('blocmetrics').controller('mainCtrl', function($scope, apiFactory, $http){

  $http.defaults.headers.common['Authorization'] = 'Token ' + document.cookie;

  $scope.goToDomain = function(domainId) {
    document.location = '#domains/' + domainId;
  };
  // API call for users apps
  var domain = $http.get(apiFactory +'/apps').
  success(function(data, status, headers, config) {
    $scope.domains = data;
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});

angular.module('blocmetrics').controller('setupCtrl', function($scope, apiFactory, $http){

  $scope.cookie = document.cookie;

  $scope.domain = {};

  $scope.update = function(domain) {
    $http.post(apiFactory +'/apps', {
      'app': { domain }
    }).
    success(function(data, status, headers, config) {
      console.log('Success');
      $scope.reset();
    }).
    error(function(data, status, headers, config) {
      console.log('Error');
    });
  };
  $scope.reset = function() {
    $scope.domain = angular.copy($scope.master);
  };
  $scope.reset();
});

angular.module('blocmetrics').controller('domainCtrl', function($scope, $routeParams, apiFactory, $http) {
  // API call for an apps events
  var response = $http.get(apiFactory + '/apps/' + $routeParams.domain_id).
  success(function(data, status, headers, config) {
    $scope.events = data;
    $scope.app = data.data[Object.keys(data.data)[Object.keys(data.data).length - 1]];
    new Chartkick.ColumnChart("analytics", data.data.slice(0, -1));
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});

---

如果要缩小生产代码，可能需要使用严格的依赖项注入语法

angular.module（'blocmetrics'）.controller（'mainCtrl'，['$scope'，'apifacture'，'$http'，
函数（$scope，apiFactory，$http）{
$http.defaults.headers.common['Authorization']='Token'+document.cookie；
$scope.goToDomain=函数（域ID）{
document.location='#domains/'+domainId；
};
调试器；
//用户应用程序的API调用
var domain=$http.get（apiFactory+'/apps'）。
成功（函数（数据、状态、标题、配置）{
$scope.domains=数据；
}).
错误（函数（数据、状态、标题、配置）{
console.log（'Error'）；
});
}
]);

查看实际的

application.js

文件可能会有所帮助。您是将控制器和工厂的代码放在

application.js

中还是放在单独的文件中？如果没有，这与angular无关……听起来像是一个构建过程。您是否缩小了代码？控制器和工厂都放在application.js中（上面添加）。我不确定代码是否缩小了，但我确实设置了：config.assets.js_compressor=Uglifier.new（mangle:false）嘿，贾斯汀，这在开发中有效，但在生产中无效。工厂仍然缺失，依赖项也不存在。这几乎就像基于Heroku的生产代码没有更新一样。我运行了

rake assets:precompile

，它在生产中更新了我的资产。关于工厂，看起来一切都正常运转。现在我只是觉得heroku找不到我的角度模板。控制台错误是：

GEThttps://ryanhaase-blocmetrics.herokuapp.com/assets/templates/setup.html 404（未找到）

var blocmetrics = angular.module('blocmetrics', ['ngResource', 'ngRoute', 'templates']);

blocmetrics.config(function($routeProvider, $locationProvider) {
  // $locationProvider.html5Mode(true);
  $routeProvider
  .when('/domains/:domain_id', {
    templateUrl: 'assets/templates/domain.html',
    controller: 'domainCtrl'
  })
  .when('/setup', {
    templateUrl: 'assets/templates/setup.html',
    controller: 'setupCtrl'
  })
  .otherwise({
    redirectTo: '/setup'
  });
});

angular.module('blocmetrics').factory('apiFactory', function(){
  var api = "";

  if (location.hostname == "localhost") {
    api = "http://localhost:3001";
    return api;
  } else {
    api = "https://ryanhaase-api-blocmetrics.herokuapp.com";
    return api;
  }
  return api;
});

angular.module('blocmetrics').controller('mainCtrl', function($scope, apiFactory, $http){

  $http.defaults.headers.common['Authorization'] = 'Token ' + document.cookie;

  $scope.goToDomain = function(domainId) {
    document.location = '#domains/' + domainId;
  };
  // API call for users apps
  var domain = $http.get(apiFactory +'/apps').
  success(function(data, status, headers, config) {
    $scope.domains = data;
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});

angular.module('blocmetrics').controller('setupCtrl', function($scope, apiFactory, $http){

  $scope.cookie = document.cookie;

  $scope.domain = {};

  $scope.update = function(domain) {
    $http.post(apiFactory +'/apps', {
      'app': { domain }
    }).
    success(function(data, status, headers, config) {
      console.log('Success');
      $scope.reset();
    }).
    error(function(data, status, headers, config) {
      console.log('Error');
    });
  };
  $scope.reset = function() {
    $scope.domain = angular.copy($scope.master);
  };
  $scope.reset();
});

angular.module('blocmetrics').controller('domainCtrl', function($scope, $routeParams, apiFactory, $http) {
  // API call for an apps events
  var response = $http.get(apiFactory + '/apps/' + $routeParams.domain_id).
  success(function(data, status, headers, config) {
    $scope.events = data;
    $scope.app = data.data[Object.keys(data.data)[Object.keys(data.data).length - 1]];
    new Chartkick.ColumnChart("analytics", data.data.slice(0, -1));
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});