Angularjs-UI-路由器不顯示模板的內容瀏覽器

我是個新的角度，並試圖獲得一個工作示例設置爲角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

來源

2016-01-04 Saurabh Sharma

目前尚不清楚爲什麼使用抽象狀態。抽象狀態可以爲子狀態提供數據和進入/退出處理。但它未被激活。它確實需要一個模板。

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

在你的榜樣孩子國家沒有做過的這些和抽象狀態顯然意味着要使用。

看來你並不打算把它抽象化。

更新：抽象網址不能爲空。這是你的代碼的URL集的例子：

.state('a', { 
    url: '/a', 
    abstract: true, 
    controller: 'mainController', 
    controllerAs: 'main', 
    templateUrl: 'partials/home.html' 
})

http://plnkr.co/edit/11o6qF?p=preview

要查看功能使用此鏈接：http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b

來源

2016-01-05 09:32:56 DavidNJ

您好在我的代碼庫中抽象狀態的意圖是將A前置到子狀態的url。這個部分實際上發生在我將狀態描述爲抽象的時候。當我打localhost：8080/TestPrj時，它變爲localhost：8080/TestPrj /＃/ ReportB。隨着摘要註釋，thir重定向不起作用。也仍然這個URL不工作本地主機：8080/TestPrj /＃/ ReportB，這在我腦海中應該工作。我在瀏覽器緩存中看到了網絡日誌中的響應，該響應正從調用返回，而不是在模板中顯示 –

在挖掘的基礎上，我認爲問題在於你提出了第一個狀態摘要。在github上發佈的ui-router問題可以閱讀here。另外，還要考慮兩個plunkr例子

without abstract

$stateProvider 
     .state('route1', { 
      url: "/route1", 
      templateUrl: "route1.html" 
     }) 
      .state('route1.list', { 
       url: "/list", 
       templateUrl: "route1.list.html", 
       controller: function($scope){ 
       $scope.items = ["A", "List", "Of", "Items"]; 
       } 
      }) 

     .state('route2', { 
      url: "/route2", 
      templateUrl: "route2.html" 
     }) 
      .state('route2.list', { 
       url: "/list", 
       templateUrl: "route2.list.html", 
       controller: function($scope){ 
       $scope.things = ["A", "Set", "Of", "Things"]; 
       } 
      }) 
    })

with abstract

$stateProvider 
     .state('route1', { 
      url: "/route1", 
      abstract: true, 
      templateUrl: "route1.html" 
     }) 
      .state('route1.list', { 
       url: "/list", 
       templateUrl: "route1.list.html", 
       controller: function($scope){ 
       $scope.items = ["A", "List", "Of", "Items"]; 
       } 
      }) 

     .state('route2', { 
      url: "/route2", 
      templateUrl: "route2.html" 
     }) 
      .state('route2.list', { 
       url: "/list", 
       templateUrl: "route2.list.html", 
       controller: function($scope){ 
       $scope.things = ["A", "Set", "Of", "Things"]; 
       } 
      }) 
    })

第二plunkr是第一個，除了抽象的副本：被添加到狀態真實，現在它不沒有工作。

另外，請確保您在使用ui-router的同時頻繁清除瀏覽器緩存或禁用緩存。對於緩存結果的服務相當糟糕。

來源

2016-01-04 23:28:02 DanielC

喜摘國家在我的代碼庫的意圖是要在前面加上到子狀態的url。這個部分實際上發生在我將狀態描述爲抽象的時候。當我點擊http：// localhost：8080/TestPrj時，它變爲http：// localhost：8080/TestPrj /＃/ ReportB。隨着摘要註釋，thir重定向不起作用。也仍然這個URL不工作http：// localhost：8080/TestPrj /＃/ ReportB，這在我腦海中應該工作。我在網絡日誌中看到清除瀏覽器緩存後的響應正在從調用返回，而不是在模板中顯示 –

Angularjs-UI-路由器不顯示模板的內容瀏覽器

回答

相關問題