Question

当我双击index.html时，浏览器仅加载导航栏，partial-home.html内的内容未显示。

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的

这是partial-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>

Answer 1

有a working example

我刚刚更改了您的<script>设置：

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

其余与上述相同。检查here

Answer 2

当您说“我双击index.html”时，您的意思是您要使用浏览器打开文件吗？

如果是，则可能是问题所在。您需要将其加载到Web服务器上。

您可以使用live-server

执行此操作

如果您没有，请先安装node.js。
然后使用以下命令安装live-server：npm install -g live-server
然后转到您的工作目录并使用以下命令启动服务器：live-server

您的浏览器应该启动您的应用。 URL应该是这样的：http://localhost/...表示您在Web服务器上！

Angular UI-Router没有加载任何东西

2 个答案: