0
我正在通過本教程https://ui-router.github.io/tutorial/ng1/hellosolarsystem的工作,以便建立一個角度爲&的angular-ui-router的單頁應用程序。我在早期出現了一些錯誤,但是修正了它們,現在我沒有發現任何錯誤,但除了標題外沒有任何顯示。Angular-ui-路由器沒有顯示錯誤或任何內容
我可以在導航鏈接之間單擊,但預期的內容沒有顯示,也沒有錯誤。
這裏是我的html:
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="ext-js/angular.min.js"></script>
<script src="ext-js/angular-ui-router.min.js"></script>
<script src="js/s.js"></script>
<script src="home_component.js"></script>
<style>.active { font-weight: bolder; }</style>
</head>
<body ng-app="CarSites">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="Home" ui-sref-active="active">Car Suite</a>
</div>
<ul class="nav navbar-nav">
<li>
<a ui-sref="Mongo" ui-sref-active="active">Mongo</a>
</li>
</ul>
</div>
</nav>
<div id="main">
<ui-view></ui-view>
</div>
</body>
</html>
我想作爲導航鏈接用戶點擊模板之間進行切換。這裏的JavaScript:
s.js
var myApp = angular.module('CarSites', ['ui.router']);
myApp.config(function($stateProvider) {
states = [
{
name: 'Home',
url: '',
component: 'home'
},{
name: 'Mongo',
url: '/Mongo',
template: '<h3>Mongo</h3>'
}];
// Loop over the state definitions and register them
states.forEach(function(state) {
$stateProvider.state(state);
});
});
問題開始後,我被單獨註冊,以在一個循環中登記的變化狀態,所以我覺得這個問題有事情做與。
home_compenent.js:
angular.module('CarSites').component('home', {
template: '<h3>{{$ctrl.greeting}} Home!</h3>' +
'<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
controller: function() {
this.greeting = 'hello';
this.toggleGreeting = function() {
this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
}
}
});
所以在主頁上我希望看到:
首頁你好! (button)
但沒有顯示,也沒有錯誤。我是一個有角度的noob,所以我認爲這是一個非常簡單的問題,但我傾注了代碼,沒有看到任何錯誤。有沒有人看到我的問題?