ui路由器不工作

-1

我應用ui路由器頁面變成空白後出現問題。ui路由器不工作

<!DOCTYPE html> 
<html ng-app="storeApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
    <script src="services.js"></script> 
    </head> 

    <body> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
    <div ui-view="footer"></div> 
    </body> 

</html>

這是其餘文件的鏈接。

https://plnkr.co/edit/1tUxa4eV5TjErqc8syM9?p=preview

提示：我用的閨房，然後一飲而盡在我的項目，我只是修改，以適應plunker。

索引頁面的圖片從項目：

來源

2016-08-18 Amal Magdy

我終於想通了，這個問題是controller.js我包括$ stateParams以錯誤的方式。

來源

2016-08-21 11:24:25

有幾個問題，

您需要加載services.js和之前controllers.js到app.js.

<script src="services.js"></script> 
    <script src="controller.js"></script> 
    <script src="app.js"></script>

在plunker

你提到controllers.js但文件名是controller.js

來源

2016-08-18 01:30:34 Sajeetharan

感謝您的回覆，我在電腦上正確地寫下了它，沒有出現任何問題。並且我在闖入者中糾正它，並存在同樣的問題。 –

服務和控制器加載順序是在加載Angular之後，而不是之前。 – MBielski

加載順序只對jQuery的問題和其他一些文件。你的AngularUI加載順序很好。這就是說，我發現我通常也只需要一個路由來訪問根URL。

.state('root', { 
    url:'', 
    views: { 
     'header': { 
      templateUrl : 'header.html' 
     }, 
     'content': { 
      template : 'home.html', 
      controller : 'HomeController' 
     }, 
     'footer': { 
      templateUrl : 'footer.html' 
     } 
    } 
})

你也應該JavaScript文件移動到身體，並讓它們在頁面上的最後一個元素之後出現。以內聯方式加載JS文件有時會對應用程序啓動產生不利影響。

<!DOCTYPE html> 
<html ng-app="storeApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    </head> 

    <body> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
    <div ui-view="footer"></div> 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
    <script src="services.js"></script> 
    </body> 

</html>

來源

2016-08-19 17:10:21 MBielski

感謝您的重播，我將模板：'home.html'改爲templateUrl：'home.html'，是模板出現，但控制器和服務不起作用 –

是的，我已經在我的項目中做過了。我的索引頁面http://i.stack.imgur.com/AMKSC.jpg的屏幕截圖 –

ui路由器不工作

回答

相關問題