2016-10-20 95 views
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,所以我認爲這是一個非常簡單的問題,但我傾注了代碼,沒有看到任何錯誤。有沒有人看到我的問題?

回答

0

我想通了。我正在使用angular-ui-router版本0.3.1,本教程使用1.0.0-alpha.4。我想這裏有一些重大的變化。