Angular + RequireJs + Ui.Router

Question

我刚开始使用Angular和RequireJs，到目前为止我已经创建了一个如下所示的结构：

• app.js
• app.core.js
• app.controllers.js
• app.services.js

核心模块是我依赖关系并引入服务和控制器模块的地方，例如：

(function () {
var dependancies = ['angular'];
define(dependancies, function (angular) {
    return angular.module('app.services', [])
        .factory('VehicleService', ['$injector', function ($injector) {
            var stub = {};
            require(['../Angular/Services/VehicleService'], function (VehicleService) {
                angular.extend(stub, $injector.invoke(VehicleService));
            });
            return stub;
        }]);
 });
})();

每个服务都在自己的文件中创建，如下所示：

(function () {

define(function () {
    return ['$http', function ($http) {
        return {
            getAllMakes: function () {
                return $http.get('/Api/RegisteredVehicle/GetAllMakes')
                .success(function (response) {
                    return {
                        vehicleName: response
                    }
                });
            }
        };
    }];
});
})();

我现在如何使用$stateprovider.state.resolve并正确地实例化我的服务？

 .state('quote', {
                     url: '/quote',
                     templateUrl: '/Sales/Dashboard/CreateQuoteVehicle',
                     controller: 'QuoteProposalCtrl as vm',
                     resolve: {
                         vehicleInfo: function () {
                             var stub = {};
                             require(['../Angular/Services/VehicleService'], function (VehicleService) {
                                 angular.extend(stub, $injector.invoke(VehicleService));
                             });
                             return stub;
                         }
                     }
                 })

Answer 1

在你的核心角度模块上，注入$ stateProvider，然后输入状态。它应该吸引你的其他依赖。然后应该将其作为主要的起始requirejs文件加载。

(function () {
var dependancies = ['angular', 'app.core', 'app.controllers', 'app.services'];
define(dependancies, function (angular) {
    var app = angular.module('myApp', ['app.core', 'app.controllers', 'app.services']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
     .state('quote', {
                     url: '/quote',
                     templateUrl: '/Sales/Dashboard/CreateQuoteVehicle',
                     controller: 'QuoteProposalCtrl as vm',
                     resolve: {
                         vehicleInfo: function () {
                             var stub = {};
                             require(['../Angular/Services/VehicleService'], function (VehicleService) {
                                 angular.extend(stub, $injector.invoke(VehicleService));
                             });
                             return stub;
                         }
                     }
                 })
});

return app;

})();

根据您的设置，您将加载应用程序，例如：

<script data-main="scripts/app" src="scripts/require.js"></script>

有一件事，我不确定你是否需要这个，因为它应该已经加载了app.services依赖。

var stub = {};

require(['../Angular/Services/VehicleService'], function (VehicleService) {
                             angular.extend(stub, $injector.invoke(VehicleService));
                         });
return stub;