Angular UI-路由器未加载任何内容

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

这是部分-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

当您说 "I double click index.html" 时，您的意思是您正在使用浏览器打开文件？

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

你可以用 live-server

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

您的浏览器应该会启动您的应用程序。 URL 应该是这样的：http://localhost/... 这意味着你在你的网络服务器上！

Angular UI-路由器未加载任何内容

Angular UI-Router not loading anything

angularjs

angular-ui

angular-ui-router