ng-view 似乎不起作用。没有显示

Question

出于某种原因，我的 ng-view 已决定不工作。自从我与 angular 合作以来已经有一段时间了，所以也许我遗漏了一些东西。在视图 home.html 中，它只有文本 hello 在 h1 标签中，但它没有显示。

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

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
 

 //routes
mistApp.config(function($routeProvider,$locationProvider){
 $routeProvider.when('/',{
  templateUrl:'views/home.html',
  controller:'homeCtrl'
 })
 $routeProvider.when('/calendar',{
  templateUrl:'views/calendar.html',
  controller:'calendarCtrl'
 })
 .otherwise({
  redirectTo:'/'
 });


}) //end routes

}) //end of mainCtrl

<!DOCTYPE html>
<html ng-app="mistApp">
<head>
 <title></title>

 <!-- boostrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <!-- angular -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>


 <!-- controllers -->
 <script type="text/javascript" src="js/mainCtrl.js"></script>
 <script type="text/javascript" src="js/calendarCtrl.js"></script>






</head>

<body ng-controller="mainCtrl">
<!-- NAVBAR -->
<nav class="nav navbar-default">
 <div class="container-fluid">
  <div class="navbar-header">
   <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false" class="navbar-toggle collapsed">
    <span class="sr-only"> Toggle Navigation</span>
    <span class="icon-bar""></span>
    <span class="icon-bar""></span>
    <span class="icon-bar""></span>
   </button>

   <a href="#/" class="navbar-brand"></a>
   <h3>GameTown</h3>
  </div>
   <div id="navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
      <li>
       <a ng-href="#/">Home</a>
      </li>
      <li ng-hide="loggedIn">
       <a ng-href="#/calendar">Calendar</a>
      </li>
                  <li ng-hide="loggedIn">
                      <a ng-href="#/updates">Updates</a>
                  </li>  
                   
                  <li ng-hide="loggedIn">
                      <a ng-href="#/chat">Chat</a>
                  </li>
                  <li ng-hide="loggedIn">
                      <a ng-href="#/ideas">Ideas</a>
                  </li>                 
     </ul>
   </div> 
 </div>
</nav>

<div id="views" ng-view></div>

</body>
</html>

Answer 1

问题

路由器的模块调用（即 config()）在控制器回调中。

解决方案

将模块调用移到控制器回调之外。查看 ngRoute and the example 的文档以获取更多信息。

所以这个：

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
    //routes
    mistApp.config(function($routeProvider,$locationProvider){
    ...
    }) //end routes
}) //end of mainCtrl

变为：

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
}); //end of mainCtrl

//routes
mistApp.config(function($routeProvider,$locationProvider){
   ...
}) //end routes

查看它在 this updated plunker 中的工作情况。

我注意到的另一个问题是无效的 HTML。汉堡菜单中有三行在 class 属性之后有一个额外的双引号。所以这些行：

<span class="icon-bar""></span>

应该这样更新：

<span class="icon-bar"></span>

您可以考虑使用 glyphicon-menu-hamburger class 名称来使用 Bootstrap 菜单图标（参见Components section 有关这些的更多信息）。

<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>

ng-view 似乎不起作用。没有显示

ng-view does not seem to be working. Nothing shows up

javascript

angularjs

ng-view

angularjs-ng-route

问题

解决方案