ng-View無法在單頁中工作App

我正在努力爭取第一次使用Angular SPA。並遇到一些問題。我似乎無法讓ng-view正確呈現或路由。似乎無法解析ng-view。ng-View無法在單頁中工作App

文件結構

mainController.js

var propManApp = angular.module('propManApp', ['ngRoute']); 

propManApp.config(function ($routeProvider){ 
$routeProvider 
.when('/', { 
    templateUrl : '../public/main.html', 
    controller : 'mainController' 
}) 

.when('/about', { 
    templateUrl : '../public/about.html', 
    controller : 'aboutController' 
}) 

.when('#/contactUs', { 
    templateUrl : '../public/contactUs.html', 
    controller : 'contactUsController' 
}) 

.otherwise({redirectTo : 'index.html'}); 
}); 



propManApp.controller('mainController',['$scope', '$log', 
function($scope, $log){ 
$scope.message = "Message Here!!!!!!"; 
}]); 

propManApp.controller('aboutController',['$scope', '$log', 
function($scope, $log){ 
$scope.aboutMessage = "About Message Here!!!!!!"; 
console.$log("Test"); 
}]); 


propManApp.controller('contactUsController',['$scope', '$log', 
function($scope, $log){ 
$scope.contactMessage = "Contact Message Here!!!!!!"; 
}]);

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head ng-app="propManApp"> 
    <title>Rental Properties</title> 
<!-- angular/ --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script> 
<!-- bootstrap --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

</head> 
<body> 

<nav class="navbar navbar-inverse navbar-static-top"> 
<div class="container-fluid"> 
<!-- Logo --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-  toggle="collapse" data-target="#mainNavBar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
      <a href="#" class="navbar-brand">Rental PROPERTIES</a> 
    </div> 

    <!-- Menu Items --> 
    <div class="collapse navbar-collapse" id="mainNavBar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#/about">About</a></li> 
      <li><a href="#/contact">Contact</a></li> 
     </ul> 
    </div> 

</div> 
</nav> 

<div class="container"> 
    <div ng-view></div> 
</div> 
</body>

main.html中

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

about.html

<h1>{{aboutMessage}}</h1> About

瀏覽器檢查：

來源

2016-08-14 Redmoomba

您是否看過錯誤信息？它清楚地解釋了你的問題。 – dfsq

試着將'ng-app'從'head'標籤移動到'body'標籤。 –

您已設置了NG-app標記，以頭，而不是HTML標籤。這意味着你的應用只圍繞head標籤旋轉，並且不包含使用ng-view的body標籤。

所以在您的index.html

<html lang="en" ng-app="propManApp"> 
<head > 
    <title>Rental Properties</title> 
<!-- angular/ --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script> 
<!-- bootstrap --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

</head>

更改像這樣。

此外您還沒有包含mainController.js。將它包含在jquery文件之後的index.html中。

來源

2016-08-14 06:50:39

將其更改爲HTML和相同的問題。不知道我是否正確加載ng路由。從我看到的我是，但這是我的第一個Angular應用程序。 – Redmoomba

垃圾。我完全錯過了它。你沒有包含mainController.js。將它包含在jquery文件後的index.html中 –

編輯我的答案以及 –

ng-View無法在單頁中工作App

回答

相關問題