AngularJS路線不加載視圖

我的項目的結構是這樣的：AngularJS路線不加載視圖

我試圖讓使用this圖像的單頁的應用程序。當index.html頁面啓動時，它將默認在ng-view中加載registration.html。但是，當加載index.html時，它不會像預期的那樣加載ng-view registration.html。

而且我對的index.html，的main.css和mainAppRouter.js文件如下：

//mainAppRouter.js 
 

 
(function() { 
 
    var myModule = angular.module('studentInfo', ['ngRoute']); 
 
    myModule.config(function ($routeProvider) { 
 
     $routeProvider 
 
      .when('/registration', { 
 
       templateUrl : '../views/registration.html', 
 
       controller: 'regController' 
 
      }) 
 
      .otherwise({ 
 
       redirectTo: '/registration' 
 
      }); 
 
     
 
     console.log("checking"); 
 
    }); 
 

 
    myModule.controller('regController', function ($scope) { 
 
     $scope.message = 'This is Add new order screen'; 
 
     console.log("checking"); 
 
    }); 
 

 
});

/*man.css*/ 
 

 
.studentInfo{ 
 
    margin-top: 100px; 
 
} 
 

 
.navbar{ 
 
    padding: 1em; 
 
} 
 

 
.navbar-brand { 
 
    padding:0; 
 
}

<!--index.html--> 
 

 
<!DOCTYPE html> 
 
<html data-ng-app="studentInfo"> 
 

 
<head> 
 
    <script src="lib/js/angular.min.js"></script> 
 
    <script src="lib/js/jquery-3.0.0.min.js"></script> 
 
    <script src="lib/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="lib/js/angular-route.js"></script> 
 
    <script src="app/route/mainAppRouter.js"></script> 
 
    <link rel="stylesheet" href="lib/css/bootstrap.css" /> 
 
    <link rel="stylesheet" href="lib/css/bootstrap-theme.css" /> 
 
    <link rel="stylesheet" href="app/css/main.css" /> 
 
    <title>A demo Angular JS app</title> 
 
</head> 
 

 
<body> 
 
    <div class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#"> <span><img src="app/images/people.png"/></span> Student Info </a> 
 
      </div> 
 
      <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController"> 
 
       <li role="presentation"><a href="#/registration">Registration</a></li> 
 
       <li role="presentation"><a href="#/student">Student Details</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="col-md-4 col-md-offset-4" data-ng-controller="regController"> 
 
      <h1>Student Info</h1> 
 
     </div> 
 
     <div ng-view></div> 
 
    </div> 
 
</body> 
 

 
</html>

我所有的代碼都在這個github repo

我該怎麼做才能糾正我的問題？

來源

2017-06-17 Pial Kanti

什麼顯示在控制檯？ –

對不起。我不明白。爲什麼會在控制檯中顯示任何內容？ –

我的意思是你有任何顯示在控制檯上的錯誤。 –

我認爲這個問題是因爲你沒有爲你的ng-view指定任何控制器，你也必須正確設置你的基本URL。

$routeProvider 
      .when('/registration', { 
       templateUrl :'http://localhost/StudentInfo/app/views/registration.html', 
       controller: 'regController' 
      })

並從HTML中刪除控制器標籤。您的控制器標籤超出了ng-view的範圍。

<div class="container"> 
     <div class="col-md-4 col-md-offset-4" > 
      <h1>Student Info</h1> 
     </div> 
     <div ng-view></div> 
    </div>

而且還有一個語法錯誤在你的控制器以及

myModule.controller('regController', function ($scope){ 
    $scope.message = 'This is Add new order screen'; 
})

修訂答：另一個原因，這是行不通的是，你正在運行的實例關閉文件系統（使用file：//協議）和許多瀏覽器（Chrome，Opera）在使用file：//協議時限制XHR調用。 AngularJS模板是通過XHR下載的，這與使用file：//協議相結合會導致錯誤。

欲瞭解更多詳情：Couldn't load template using templateUrl in Angularjs

來源

2017-06-17 10:52:28 Vivz

我試過這個。與以前相同的結果。 –

你可以在你的regController中放置一個控制檯，並檢查控制器是否正在加載。 – Vivz

我已經更新了我的答案，但你似乎仍然缺少一個模塊。這就是爲什麼注射模塊錯誤即將到來 – Vivz

AngularJS路線不加載視圖

回答

相關問題