AngularJS：ui路由器組件不顯示

我想寫一個簡單的角度應用程序，使用角度ui路由器來顯示我的應用程序中的組件。AngularJS：ui路由器組件不顯示

我可以讓它使用模板和控制器，但是當我重構組件時，它們不會在屏幕上呈現。我也沒有得到任何控制檯錯誤。

這是我的應用程序，它是基於角樣本應用Hello Solarsytem

app.js

的index.html

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>My AngularJS App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="app.js"></script> 
    <script src="about.js"></script> 

</head> 
<body ng-app="materialThings"> 

<a ui-sref="about" ui-sref-active="active">About</a> 

<ui-view></ui-view> 

<!-- In production use: 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
--> 

</body>

about.js

angular.module('materialThings').component('about', { 
    template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>' 
})

來源

2016-10-28 Leo

哪個版本的UI路由器是這樣的？ – Mahesh

參考這個問題： Angular - UI.Router not loading component

如果您正在使用0.3.X，這是行不通的。升級到1.0.0（我認爲測試版是最新版本），請嘗試。

組件屬性可以從[email protected]（見here和CHANGELOG.MD - 它是在1.0.0-aplpha增加），所以0.3.1

還指它的不可用我的回答爲類似的帖子 - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component

來源

2016-10-28 19:49:35 Mahesh

謝謝！我檢查了我的依賴關係，我正在使用angular-ui-router 0.3。 – Leo

看看http://stackoverflow.com/questions/40575749/angular-ui-router-0-3-2-doesnt-work-correct-with-components –

試試改變你的狀態變量是：

var states = [ 
    { 
     name: 'about', 
     url: '/about', 
     template: '<about></about>' 
    } 
]

不幸的是UI的路由器組件指南似乎並不這樣解釋，我將繼續尋找更多的告訴你爲什麼。

來源

2016-10-28 19:40:34

查看版本並查看https://github.com/angular-ui/ui-router/issues/2627 – mmey

AngularJS：ui路由器組件不顯示

回答

相關問題