AngularJs ngRoute不會在ng-view上加載頁面

我知道已經有很多問題與這個問題非常相似，但我實際上在這裏找不到解決方案。AngularJs ngRoute不會在ng-view上加載頁面

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本地測試它。我讀了很多類似問題的答案，但無法弄清楚如何使其工作。

有沒有更好的方式來「調試」它，而不是試錯？

來源

2015-08-20 Diego

這是.otherwise(...)的正確用法嗎？

我覺得這是它應該是什麼樣子

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

UPDATE

只是刪除那些 - >'PortfolioController','AboutCtrl','ContactCtrl'出angular.module([...]);，您可將控制器各條路線的when(...)內。

這裏是一個Fiddle Example

更新2

這裏是你修改的小提琴（請注意，我曾在撥弄使用角1.2.1。但只要你始終使用angular.js的版本相同，它的模塊都應該沒問題。

Fiddle

來源

2015-08-20 23:29:12

拉米斯，仍然無法正常工作。我也在這裏嘗試了一些變化。也試圖避免使用其他方式。 – Diego

你的控制檯中是否有錯誤？ –

好點！在Chrome上，我得到了這個：Uncaught Error：[$ injector：modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=crisSite&p1=Error%...gleapis.com%2Fajax%2Flibs% 2Fangularjs％2F1.3.15％2Fangular.min.js％3A17％3A381） – Diego

首先，千萬不要使用縮小的lib進行測試，它會與錯誤報告混淆。使用角度的unminified版本，你會得到更多的描述性報告。

其次，你是否已經創建了這四個控制器，並將它們添加到了crisSite模塊，並將它們包含在index.html中？它看起來並不像你把它們放在index.html中。保持一致的命名約定，可以使用NameController或NameCtrl。

第三，您的聯繫路徑缺少/，否則您應該使用Ramis提供的語法。

最後，確保所有引用都正確，這些模板路徑是否指向正確的文件？

如果您希望我們進一步提供幫助，您需要提供完整代碼的小提琴或plunker。有太多可能會出錯的東西。

來源

2015-08-21 00:47:29 soote

AngularJs ngRoute不會在ng-view上加載頁面

回答

相關問題