2015-10-31 91 views
1

角UI的路由器不加载任何

app.js

这是app.js

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/home'); 

$stateProvider 

    // HOME STATES AND NESTED VIEWS ======================================== 
    .state('home', { 
     url: '/home', 
     templateUrl: 'partial-home.html' 
    }) 

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS ================================= 
    .state('about', { 
     // we'll get to this in a bit  
    }); 

}); 

的index.html

这是index.html的

<!DOCTYPE html> 
<html> 
<head> 

<!-- CSS (load bootstrap) --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
<style> 
    .navbar { border-radius:0; } 
</style> 

<!-- JS (load angular, ui-router, and our custom js file) --> 
<script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
<script> https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js</script> 
<script>https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js</script> 
<script src="app.js"></script> 
</head> 

<!-- apply our angular app to our site --> 
<body ng-app="routerApp"> 

    <!-- NAVIGATION --> 
<nav class="navbar navbar-inverse" role="navigation"> 
<div class="navbar-header"> 
    <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </div> 
<ul class="nav navbar-nav"> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="about">About</a></li> 
</ul> 
</nav> 

<!-- MAIN CONTENT --> 
<div class="container"> 

<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT  ============================== --> 
<div ui-view></div> 

    </div> 

    </body> 
</html> 

局部home.html的

这是局部home.html的

<div class="jumbotron text-center"> 
<h1>The Homey Page</h1> 
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>  
</div> 

回答

0

当你说这“我双击index.html的”你的意思是你与你的浏览器中打开该文件?

如果是的,它可能是问题。您需要将其加载到Web服务器上。

你可以做到这一点与live-server

  • 首先安装node.js如果你没有它。
  • 然后用这个命令安装Live服务器:npm install -g live-server
  • 然后转到您的工作目录,并用这个命令启动服务器:live-server

您的浏览器应启动您的应用程序。该URL shouls是这样:http://localhost/...这意味着你是你的Web服务器上!

+0

plzz..can你告诉我如何 –

+0

我编辑了我的帖子来向你解释一个过程。希望它能帮助你。 –

0

a working example

我刚刚更改了<script>设置:

<script data-require="[email protected]*" 
     src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" 
     ></script> 
<script data-require="[email protected]*" 
     src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js" 
     ></script> 
<script src="app.js"></script> 

其余的是与上面相同。检查here

+0

我看到了榜样,是的,它是工作......但遗憾的是我仍然得到error..the局部home.html的未加载 –

+0

凡在本地?或在我的闯入者? –

+0

我做了局部.. –