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路由器不工作

回答

相关问题