Angular JS控制器和Factory在单独的文件中

Question

Web开发和Angular对我来说是全新的.我在同一个文件(app.js)中创建了模块,工厂和控制器.下面是示例代码

//Main Module
var ipCharts = angular.module('ipCharts', []);

//Factory
ipCharts.factory('securityFactory', function ($http) {
    var securities = {};
    $http.get('api/Securities').
                                  success(function (data, status, headers, config) {
                                      securities = data;
                                  }).
                                  error(function (data, status, headers, config) {
                                      // log error
                                  });

    var factory = {};
    factory.getSecurities = function () {
        return securities;
    }
    return factory;
});

//Controller
ipCharts.controller('securityController', function ($scope,securityFactory) {
    $scope.securities = securityFactory.getSecurities();
}); 

我想知道如何将模块,工厂和控制器放在单独的文件中.

当控制器未对工厂进行任何引用时,我可以将控制器放在单独的文件中.当使用工厂和工厂的控制器在一个单独的文件中时,我无法使它工作.谢谢

Answer 1

在控制器和工厂文件上方包含您的主应用程序文件(在其中创建模块).

用于检索预先存在的模块:

var ipCharts = angular.module('ipCharts');

对于控制器文件:

var ipCharts = angular.module('ipCharts');
ipCharts.controller('securityController', function ($scope,securityFactory) {
    $scope.securities = securityFactory.getSecurities();
}); 

对于工厂文件:

var ipCharts = angular.module('ipCharts');
ipCharts.factory('securityFactory', function ($http) {
    var securities = {};
    $http.get('api/Securities').
                                  success(function (data, status, headers, config) {
                                      securities = data;
                                  }).
                                  error(function (data, status, headers, config) {
                                      // log error
                                  });

    var factory = {};
    factory.getSecurities = function () {
        return securities;
    }
    return factory;
});