Angular + RequireJs + Ui.Router

0

Я только начал использовать 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;
                         }
                     }
                 })
Теги:

1 ответ

0

На вашем основном угловом модуле введите $ stateProvider, затем введите состояния. Это должно занять остальную часть ваших зависимостей. Затем он должен быть загружен в качестве основного файла с запросом на запуск.

(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;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню