Question

ng-view没有显示页面，路由似乎不起作用，但它正在浏览器控制台/网络中加载angular-route.min.js。文件结构是文件夹 - ＆gt; css，fonts，js，pages。根目录中有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>

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

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

修改

请注意我使用了角度版本1.4.0。如果你想使用angular 1.6.1，他们已经改变了用于$ location hash-bang网址的默认哈希前缀，它现在是('!')而不是('')

所以你需要在配置阶段添加它。

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

现在它也适用于角度1.6.1

Answer 2

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

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

AngularJS ng-view未显示路由页面

2 个答案: