部分没有加载 angularjs答案

【问题标题】：partials aren't loading angularjs部分没有加载 angularjs
【发布时间】：2018-01-01 22:43:40
【问题描述】：

请告诉我为什么它不加载部分。当您单击特定的超链接（例如主页、关于或联系人）时，我正在尝试进行路由并将部分模板插入到布局 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>

关于.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>

【问题讨论】：

标签： angularjs routing

【解决方案1】：

我已将默认哈希前缀从 '!'在 app.js 中清空字符串 '' 因为我使用的是 angularjs 1.6

$locationProvider.hashPrefix('');

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

好吧，但结果是一样的。你知道它是否有帮助。谢谢！