我正在學習使用angularjs與requirejs和angular-ui-router。我在這裏創建了一個運動員http://plnkr.co/edit/iA8zVQWP3ypRFiZeRDzY?Promises在AngularJS中解決兩次
<div ui-view ></div>
<script data-main="require-config" src="http://requirejs.org/docs/release/2.1.20/r.js"></script>
啓動index.html文件有要求-config.js參考它加載所需的第三方JavaScript庫,解決依賴自舉和我的模塊,它是在app.js
angular.element().ready(function() {
//bootstrap the app manually
angular.bootstrap(document,['myApp']);
});
我使用ui.router來解決相應的狀態和導航到相應的頁面
define(['angular', 'story'
], function(angular) {
angular.module('myApp', ['ui.router', 'ui.bootstrap', 'myApp.story'])
.controller('TabController', ['$scope', '$state', function($scope, $state) {
$scope.tabs = [
{route: 'main.story', label : "Promises", active : false},
//more routes here.
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
}])
$ stateProvider將路由到合適的狀態。
config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
abstract: true,
url: '/main',
templateUrl: 'tabs.html',
controller: 'TabController'
})
.state('main.story', {
url: '/story',
templateUrl: 'story.html',
controller: 'storyController'
})
$urlRouterProvider.otherwise('/main/story');
}])
和ui.bootstrap使用bootstrap庫提供的標籤。
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.label}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
這個笨蛋正在與錯誤。當我查看Chrome中的網絡時,json文件(chapter-1.json和chapter-2.json)被加載/解析兩次。
我也驗證了不使用requireJS的代碼,它正在工作(手動使用腳本標記加載腳本)很好。承諾只能解決一次。所以,有一些配置在使用requirejs時我做得不正確。
我還驗證了使用$ httpProvider.interceptors加載兩次的文件。
我該如何解決這個問題?