AngularJs的ngRoute不会在ng-view上加载页面

AngularJs ngRoute not loading pages on ng-view

本文关键字：加载 ng-view ngRoute AngularJs      更新时间：2023-09-26

我知道已经有很多类似的问题了，但是我真的找不到解决方法。

ng-view没有加载我的页面。我是不是错过了什么太明显的东西?

App.js: 

var app = angular.module('crisSite', [
    'ngRoute',
    'PortfolioController',
    'AboutCtrl',
    'ContactCtrl'
  ]);
  var selectedSpecIdGlobal = 0;
  app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    })
    .when('/about', {
        templateUrl : '/pages/about.html',
        controller : 'AboutCtrl'
    })
    .when('contact', {
        templateUrl : '/pages/contact.html',
        controller : 'ContactCtrl'
    })
    .otherwise('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    });

  });

index . html: 

<!DOCTYPE html>
<html ng-app="crisSite">
  <head>
    <!-- <link rel="stylesheet.css" type="text/css" href="bootstrap.min.css" /> -->
    <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="jqueryfuncs.js"></script>
    <!-- <script type="text/javascript" src="angular.min.js"></script> -->
    <script type="text/javascript" src="app.js"></script>
    <style type="text/css">

  </style>
  </head>
  <body class="list-group"  ng-controller="mainController">
    <header>
      <!-- <h1 class="text-center">Cris</h1> -->
    </header>
    <div class="page-content">
        <ul class="main-nav" id="main-nav">
            <li><a href="#"><i class="fa fa-home"></i> Portfolio</a></li>
            <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
            <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
        </ul>   
        <div class="main">
            <div ng-view></div>
        </div>      
    </div>
  </body>
</html>

我正在Chrome和Mozilla上进行本地测试。我读了很多类似问题的答案，但不知道如何使它工作。

有没有更好的方法来"调试"它，而不是试错?

这是.otherwise(...)的正确用法吗?

我觉得应该是这个样子

.otherwise({
    redirectTo: '/' /*redirects to portfolio (because you defined it before with "/") */
});

只要从angular.module([...]);中去掉-> 'PortfolioController','AboutCtrl','ContactCtrl'，就可以在when(...)内部为每条路由分配控制器。

Here is a Fiddle Example

更新2

这是一个修改后的小提琴(请注意，我必须使用Angular 1.2.1在小提琴。但只要你总是使用相同版本的angular.js和它的模块，一切都应该没问题。

小提琴

首先，永远不要使用最小化的库进行测试，这会影响错误报告。使用angular的非精简版本，你会得到更多描述性的报告。

第二，您是否创建了所有这四个控制器，并将它们添加到crisSite模块中，并将它们包含在index.html中?看起来并没有将它们放在index.html中。保持一致的命名约定，选择NameController或NameCtrl。

第三，你的联系人路由缺少/，你的else应该使用Ramis提供的语法。

最后，确保所有的引用都是正确的，这些模板路径是否指向正确的文件?

你需要张贴小提琴或柱塞与完整的代码，如果你希望我们进一步帮助。可能出错的地方实在太多了。

相关文章：