AngularJS ng-view 未显示路由页面

Question

ng-view 未显示页面，路由似乎不起作用，但它正在浏览器 console/network 中加载 angular-route。min.js。文件结构是文件夹-> css、字体、js、页面。根目录中有 2 个文件，它们是 app.js 和 index.html，在页面文件夹中还有 2 个文件，它们是应该添加到的 main.html 和 second.html ng-view 部分但不会加载。

当单击 link 以获得 main.html 内容时，它会返回 http://127.0.0.1/main 并完全忽略 /pages 文件夹

**更新代码，第一个页面加载了它的内容，但第二个页面没有，控制台中没有错误，所以我的 href 路径可能有误？

Header 脚本

<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>

JS

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) {



}]);

Answer 1

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

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

Answer 2

使用 templateUrl 而不是 templateURL。

在你的html中使用#/main。

不要使用拖车ng-views

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 的默认 hash-prefix 现在是 ('!') 而不是 ('')

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

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

现在它也适用于 angular 1.6.1

AngularJS ng-view 未显示路由页面

AngularJS ng-view not showing routed pages

angularjs

ng-view