Question

请告诉我为什么它不加载部分内容。当您单击特定的超链接（如Home，about或contact）时，我尝试进行路由并将部分模板插入布局HTML页面。我检查了每行代码，但我没有找到不加载部分问题的根源。路线很好，它只是没有加载。这是我的代码：

index.html

<html ng-app="streamApp">
    <head>
        <meta charset="utf-8">
        <!-- To ensure proper rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>StreamTest App</title>
        <!-- load bootstrap and fontawesome -->
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="styles/style.css"/>
    </head>
    <body ng-app="streamApp" ng-controller="MainController">

    <div id="main">

        <!-- including header -->
        <div ng-include="'views/templates/header.html'"></div>

        <!-- this is where content will be injected -->
        <div id="container" style="margin-top: 50px;">
            <ng-view></ng-view>
        </div>

        <!-- including footer -->
        <div ng-include="'views/templates/footer.html'"></div>

    </div>

    </body>
    <!-- Scripts -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="app.js"></script>
    <!-- Scripts End -->
</html>

app.js

// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);

//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
   $routeProvider
       //route for the home page
       .when('/home', {
           templateURL : 'views/partials/home.html',
           controller  : 'MainController'
       })
       //route for the about page
       .when('/about', {
           templateURL : 'views/partials/about.html',
           controller  : 'aboutController'
       })
       //route for the contact page
       .when('/contact', {
           templateURL : 'views/partials/contact.html',
           controller  : 'contactController'
       })
       .otherwise({
           redirectTo: '/home'
       });
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
    // create a message to display in our view
    $scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
    // create a message to display in our view
    $scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
    // create a message to display in our view
    $scope.contact="Don't be shy to contact us!";
});

了header.html

<header>
    <nav class="navbar navbar-default">
     <div class="container">
         <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="#home">StreamTEST</a>
            </div>

             <ul class="nav navbar-nav navbar-right">
                 <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
                 <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                 <li><a href="#contact"><i class="fa fa-envelope"></i> Contact</a></li>
             </ul>
         </div>
     </div>
    </nav>
</header>

home.html的

<div class="jumbotron text-center">
    <h1>Home Page</h1>

    <p>{{ home }}</p>
</div>

about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ about }}</p>
</div>

contact.html

<div class="jumbotron text-center">
    <h1>Contact Page</h1>

    <p>{{ contact }}</p>
</div>

Answer 1

我更改了＆＃39;！＆＃39;的默认哈希前缀清空字符串＆＃39;＆＃39;在app.js中导致我使用angularjs 1.6

Traceback (most recent call last):
Exception: hello generator

Answer 2

从您的body元素中删除ng-app。你已经在外部html元素上拥有它了。

我使用的是ui-router而不是ngRoute，但它们非常相似。有几件事。

您需要设置Html5Mode，这意味着您需要将$ locationProvider注入您的配置，然后发出：
```
$locationProvider.html5Mode(true)
```
您应该在index.html的<head>部分设置基本href：
```
<base href="/" >
```
您可能还想在链接上尝试ng-href而不是href。

部分没有加载angularjs

2 个答案: