部分佈局新航線最新

/// <reference path="Scripts/angular.js" /> 
 
var myApp = angular.module("myModule", ["ngRoute"]) 
 
        .config(function ($routeProvider) { 
 
         $routeProvider 
 
          .when("/home", { 
 
           templateUrl: "homeHTML.html", 
 
           controller: "homeController" 
 
          }) 
 
          .when("/courses", { 
 
           templateUrl: "coursesHTML.html", 
 
           controller: "coursesController" 
 
          }) 
 
          .when("/student", { 
 
           templateUrl: "studentHTML.html", 
 
           controller: "studentController" 
 
          }) 
 
        }) 
 
        .controller("homeController", function ($scope) { 
 
         $scope.message = "Home"; 
 
        }) 
 
        .controller("coursesController", function ($scope) { 
 
         $scope.message = "Courses"; 
 
        }) 
 
        .controller("studentController", function ($scope) { 
 
         $scope.message = "Student"; 
 
        });

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule"> 
 
<head> 
 
    <script src="Scripts/angular.min.js"></script> 
 
    <script src="Scripts/angular-route.min.js"></script> 
 
    <script src="Script.js"></script> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <table> 
 
     <tr> 
 
      <td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center"> 
 
       This is the header area 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td style="width:200px; height:400px; background-color:#ff0000"> 
 
       <ul> 
 
        <li><a href="#/home">Home</a></li> 
 
        <li><a href="#/courses">Courses</a></li> 
 
        <li><a href="#/student">Student</a></li> 
 
       </ul> 
 
       
 
      </td> 
 
      <td style="width:400px; height:400px; background-color:#ff6a00"> 
 
       <ng-view></ng-view> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center"> 
 
       This is a Footer Area 
 
      </td> 
 
     </tr> 
 
    </table> 
 

 
</body> 
 
</html>

homeHTML，studentHTML，coursesHTML都是下同。

<h1>{{message}}</h1> 
<div> 
    <p>Hi this is home partial view</p> 
</div>

我發現這個錯誤的片段部分

Error:{ 
    "message": "Uncaught ReferenceError: angular is not defined", 
    "filename": "http://stacksnippets.net/js", 
    "lineno": 51, 
    "colno": 13 
}

這裏發生了什麼事是我得到的視圖，如圖所示的代碼片段，其中在瀏覽器中沒有任何錯誤，還當我點擊鏈接家庭，課程，學生沒有出現。請指出這裏出了什麼問題。

來源

2017-03-16 Shubham Agarwal Bhewanewala

你不應該放在頭部的腳本，而是應該把腳本標籤體結束之前，並確保anular.min.js加載 – user93

沒有不產生任何問題。你可以將腳本保留在html中的任何地方，但是它最好保存在角度JS應用程序中的頭部或boday標籤的開頭。 –

首先在你的html中定義角度模塊。然後刪除var myApp全局變量，因爲您不使用它來引用控制器。

也確保角度版本與angular-router兼容。否則它會拋出異常。


 
angular.module("myModule", ["ngRoute"]) 
 
.config(function ($routeProvider) { 
 
    $routeProvider 
 
     .when("/home", { 
 
      templateUrl: "homeHTML.html", 
 
      controller: "homeController" 
 
     }) 
 
     .when("/courses", { 
 
      templateUrl: "coursesHTML.html", 
 
      controller: "coursesController" 
 
     }) 
 
     .when("/student", { 
 
      templateUrl: "studentHTML.html", 
 
      controller: "studentController" 
 
     }) 
 
}) 
 
.controller("homeController", function ($scope) { 
 
    $scope.message = "Home"; 
 
}) 
 
.controller("coursesController", function ($scope) { 
 
    $scope.message = "Courses"; 
 
}) 
 
.controller("studentController", function ($scope) { 
 
    $scope.message = "Student"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-route.min.js"></script> 
 
    
 
    <table ng-app="myModule"> 
 
     <tr> 
 
      <td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center"> 
 
       This is the header area 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td style="width:200px; height:400px; background-color:#ff0000"> 
 
       <ul> 
 
        <li><a href="/home">Home</a></li> 
 
        <li><a href="/courses">Courses</a></li> 
 
        <li><a href="/student">Student</a></li> 
 
       </ul> 
 
       
 
      </td> 
 
      <td style="width:400px; height:400px; background-color:#ff6a00"> 
 
       <ng-view></ng-view> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center"> 
 
       This is a Footer Area 
 
      </td> 
 
     </tr> 
 
    </table>

來源

2017-03-16 04:13:53

我定義的HTML標籤 –

NG-應用=「MyModule的」然後確保版本相互兼容 –

我下載了一個完整的包角JS腳本 –

Guyss我找到了答案

/// <reference path="Scripts/angular.min.js" /> 
var myApp = angular.module("myModule", ["ngRoute"]) 
        .config(function ($routeProvider, $locationProvider) { 
         $locationProvider.hashPrefix(''); 
         $routeProvider 
          .when("/home", { 
           templateUrl: "homeHTML.html", 
           controller: "homeController" 
          }) 
          .when("/courses", { 
           templateUrl: "coursesHTML.html", 
           controller: "coursesController" 
          }) 
          .when("/student", { 
           templateUrl: "studentHTML.html", 
           controller: "studentController" 
          }) 
        }) 
        .controller("homeController", function ($scope) { 
         $scope.message = "Home"; 
        }) 
        .controller("coursesController", function ($scope) { 
         $scope.message = "Courses"; 
        }) 
        .controller("studentController", function ($scope) { 
         $scope.message = "Student"; 
        });

我已經加入$ locationProvider。我會盡快更新原因。

來源

2017-03-16 06:14:59

存在路線的最新版本的某些類型的錯誤 –

首先在html或body標籤中定義角度模塊，並確保您的角度版本與角度路由器版本相同。也不要忘記在homeHTML.html，coursesHTML.html和studentHTML.html

中定義相應的控制器

homeHTML.html

<div ng-controller="homeController"> 

    <h1>{{ message }}</h1> 

</div>

它爲我工作。

退房此鏈接：https://plnkr.co/edit/cZzk8EKBXqRuoy6oYhuF?p=preview

來源

2017-03-16 06:31:02 Syed

感謝名單賽義德嘿。我發佈了問題創建的答案。 –

部分佈局新航線最新

回答

相關問題