UI路由器 - 用戶界面視圖和鏈接無法使用

我想出來的UI路由器的角度。我在app.js加入這行代碼，以我的應用程序模塊：UI路由器 - 用戶界面視圖和鏈接無法使用

angular 
.module("ngClassifieds", ['ngMaterial', 'ui.router']) 
.config(function($mdThemingProvider, $stateProvider){ 

    $mdThemingProvider.theme('default') 
     .primaryPalette('teal') 
     .accentPalette('orange'); 

    $stateProvider 
     .state('stateone', { 
      url:'/stateone', 
      template: '<h1>State one</h1>' 
     }) 
     .state('statetwo', { 
      url: '/statetwo', 
      template: '<h1>State two</h1>' 
     }); 

});

在我的HTML我只是把一個空的用戶界面，以測試是否i我得到那兩個頭，但沒有運氣：

<ui-view></ui-view>

測試它在我的本地鏈接的投入：

localhost:8080/#/stateone 
localhost:8080/#/statetwo

但因爲某些原因它沒有加載/顯示在任何這些鏈接，而只是顯示了不帶我的網頁任何頭標題。

我已經列入角度-UI-router.js到我的index.html

如果有人能指出我做錯了什麼，那會很棒。

如果你想知道：這是我的腳本的順序：

<script src="node_modules/angular/angular.js"></script> 
    <script src="node_modules/angular-animate/angular-animate.js"></script> 
<script src="node_modules/angular-aria/angular-aria.js"></script> 
<script src="node_modules/angular-material/angular-material.js"></script> 
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script> 

<script src="scripts/app.js"></script> 

<script src="components/classifieds.ctr.js"></script> 
<script src="components/classifieds.fac.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

來源

2017-01-17 rory-h

就在你的index.html腳本正確的順序？另外，在控制檯中顯示任何錯誤？ –

@AyushBahuguna控制檯中沒有錯誤。當我運行鏈接localhost：8080 /＃/ stateone時，它會改變爲：http：// localhost：8080 /＃！＃％2Fstateone，頁面將顯示爲不帶標題。同樣的狀態兩個鏈接 –

你使用ui-sref作爲錨標籤嗎？ – digit

既然你沒有得到任何錯誤就很難理解了什麼問題，但你可以看看我的plunkr和想辦法。我刪除角材料。

https://plnkr.co/edit/WGjzY6flSx5Ces1moSPk?p=preview

<script> 
    angular 
.module("ngClassifieds", ['ui.router']) 
.config(function($stateProvider){ 

    $stateProvider 
     .state('stateone', { 
      url:'/stateone', 
      template: '<h1>State one</h1>' 
     }) 
     .state('statetwo', { 
      url: '/statetwo', 
      template: '<h1>State two</h1>' 
     }); 

}); 
    </script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    <a href="#/stateone">Link1</a> 
    <a href="#/statetwo">Link2</a> 
    <ui-view></ui-view> 
    </body>

來源

2017-01-17 06:17:16

您可能忘記使用「＃/」在HREF –

UI路由器 - 用戶界面視圖和鏈接無法使用

回答

相關問題