AngularJS ng-view 不显示路由页面答案

【问题标题】：AngularJS ng-view not showing routed pagesAngularJS ng-view 不显示路由页面
【发布时间】：2017-02-05 18:10:52
【问题描述】：

ng-view 没有显示页面并且路由似乎不起作用，但它正在浏览器控制台/网络中加载 angular-route.min.js。文件结构为文件夹-> css、字体、js、页面。根目录中有 2 个文件，它们是 app.js 和 index.html，而 pages 文件夹内还有 2 个文件，它们是 main.html 和 second.html，它们应该被添加到 ng-view 部分但不会加载.

当点击 main.html 内容的链接时，它会返回 http://127.0.0.1/main 并完全忽略 /pages 文件夹

**更新代码，让第一页加载其内容，但第二页没有，并且控制台中没有错误，所以假设我的 href 路径错误？

标题脚本

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>

HTML

  <div class="row">
    <a href="#">Main Content</a>  
    <a href="#/second">Second Content</a>  
  </div>

    <div class="row">
      <div class="col-md-12">
        <div ng-view></div>
      </div>
    </div>

    <hr>

  </div>

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateURL: 'pages/main.html',
        controller: 'mainController'
    })  
    .when('/second', {
        templateURL: 'pages/second.html',
        controller: 'secondController'
    })
});

myApp.controller('mainController', ['$scope', function($scope) {



}]);

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {



}]);

【问题讨论】：

为什么你的 index.html 中有 2 个 ng-view？
你还没有实现html5Mode因此需要在url中使用#/
您在 index.html 中添加了ng-app ="myApp" 吗？
是的：
你尝试调试了吗？你的控制台在说什么？

标签： angularjs ng-view

【解决方案1】：

使用templateUrl 而不是templateURL。

在您的 html 中使用 #/main。

不要使用拖曳视图

JS代码

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/main', {
        templateUrl: 'main.html',
        controller: 'mainController'
    })  
    .when('/second', {
        templateUrl: 'second.html',
        controller: 'secondController'
    })
});

myApp.controller('mainController', ['$scope', function($scope) {
  $scope.name = "world"

}]);

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {


}]);

HTML 代码

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>

    <script src="app.js"></script>
  </head>

  <body ng-controller="mainController">
    <p>Hello {{name}}!</p>

    <div class="row">
    <a href="#/main">Main Content</a>  
    <a href="#/second">Second Content</a>  
  </div>

    <div class="row">
      <div class="col-md-12">
        <div ng-view></div>
      </div>
    </div>

    <hr>

  </body>

</html>

这里正在工作plunker

编辑

请注意，我使用的是 Angular 版本 1.4.0。如果您想使用 Angular 1.6.1，他们已经更改了用于 $location hash-bang URL 的默认哈希前缀，现在是 ('!') 而不是 ('')

所以你需要在你的配置阶段添加这个。

myApp.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

现在它也适用于 angular 1.6.1

【讨论】：

试过这个复制我的并更新它以匹配你的，我错过了什么，因为它仍然没有加载你通常不需要你使用的基本重写脚本吗？ plnkr.co/edit/bOkCnhgD1GaNF3kbJaM7
@NicholasRitson 您的代码不起作用，因为您没有添加 $locationProvider.hashPrefix('');正如我在编辑中提到的那样，在您的配置阶段。只需添加它，它就可以工作了
感谢现在有效。我从 udemy 学习的教程是我认为的旧版本，所以添加没有涵盖

【解决方案2】：

.when('/main', {
    templateURL: 'pages/main.html',
    controller: 'mainController'
})

或使用此 url 访问主页： http://127.0.0.1/ 它应该可以工作，因为您尚未在配置中为 main 设置路由。

【讨论】：

这只是众多问题之一