javascript - 生产中缺少 Angular 工厂 - Rails/Angular App

Question

我是开发训练营学校的一名学生，创建了一个指标应用程序，该应用程序从独立的 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.module('blocmetrics').controller('mainCtrl', function($scope, $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('http://localhost:3001/apps').
  success(function(data, status, headers, config) {
    $scope.domains = data;
  }).
  error(function(data, status, headers, config) {
    console.log('Error');
  });
});

如前所述，我对 Angular 和 JS 总体来说是新手，因此我们将不胜感激!

-R

应用程序.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');
  });
});

Answer 1

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

angular.module('blocmetrics').controller('mainCtrl', ['$scope', 'apiFactory', '$http',
  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');
    });
  }
]);