我是個新的角度,並試圖獲得一個工作示例設置爲角UI路由器Angularjs-UI-路由器不顯示模板的內容瀏覽器
我研究了一些計算器的問題,但沒有看到這個問題特別。我的問題是,即使在瀏覽器的調試和網絡分析我看到thatm我的HTML模板被調用時,仍然沒有看到browser.No錯誤的任何內容在控制檯
AngularJS ui-router - template not displaying
採用了棱角分明1.4.7和corrosponding
下面
(function(){
angular.module('TestPrj',['ui.router']);
angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/ReportB');
$stateProvider
.state('a', {
url: '',
abstract:true,
controller:'mainController',
controllerAs:'main',
templateUrl: 'partials/home.html'
})
.state('a.b', {
url: '/ReportB',
controller:'B',
controllerAs:'B',
templateUrl: "partials/B.html"
});
});
angular.module('TestPrj').run(function($rootScope,$state){
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
控制器b.js請找app.js:
(function(){
angular.module('TestPrj').controller('B',B);
function B($state){
this.pageName = "Report a B";
}
B.$inject = ["$state","$stateParams","$scope"];
})();
Controller main.js
(function(){
angular.module('TestPrj').controller('mainController',mainController);
function mainController($state,$translate){
}
mainController.$inject = ["$state","$translate"];
})();
個
的index.html
<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
<script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
<script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
諧音/ home.html的
<div class="container">
<div ui-view=""></div>
</div>
諧音/ B.html
<div>
<div ui-view=""></div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
也分享我的項目設置的屏幕截圖 Angular Setup
您好在我的代碼庫中抽象狀態的意圖是將A前置到子狀態的url。這個部分實際上發生在我將狀態描述爲抽象的時候。當我打localhost:8080/TestPrj時,它變爲localhost:8080/TestPrj /#/ ReportB。隨着摘要註釋,thir重定向不起作用。也仍然這個URL不工作本地主機:8080/TestPrj /#/ ReportB,這在我腦海中應該工作。我在瀏覽器緩存中看到了網絡日誌中的響應,該響應正從調用返回,而不是在模板中顯示 –