Question

我知道已经有很多问题与这个问题非常相似，但我真的无法在这里找到解决方案。

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上本地测试它。我为类似问题阅读了很多答案，但无法弄清楚如何使其发挥作用。

是否有更好的方法来调试＆＃34;它，而不是反复试验？

Answer 1

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

我认为这应该是它的样子

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

更新

只需删除那些 - ＆gt; 'PortfolioController','AboutCtrl','ContactCtrl'中的angular.module([...]);，您可以为when(...)内的每条路线分配控制器。

这是Fiddle Example

更新2

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

<强> Fiddle

Answer 2

首先，永远不要使用缩小的lib进行测试，它会与错误报告混淆。使用未限定版本的角度，您将获得更具描述性的报告。

其次，您是否已将所有这四个控制器（已添加到控制台）创建到crisSite模块，并将它们包含在index.html中？您似乎并未将它们放在index.html中。保持一致的命名约定，可以使用NameController或NameCtrl。

第三，您的联系路线缺少/，否则您应该使用Ramis提供的语法。

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

如果您希望我们进一步提供帮助，您需要使用完整的代码发布小提琴或者傻瓜。有太多事情可能出错。

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

2 个答案: