ng-View funktioniert nicht in Single Page App

Ich arbeite daran, dass ein Angular SPA zum ersten Mal funktioniert. Und auf einige Probleme stoßen. Ich kann nicht scheinen, die ng-view korrekt zu rendern oder zu routen. Scheint nicht in der Lage zu sein, die ng-view zu analysieren.ng-View funktioniert nicht in Single Page App

Dateistruktur

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

Browser-Inspektor:

Quelle

2016-08-14 Redmoomba

Haben Sie eine Fehlermeldung gelesen? Es erklärt deutlich, was dein Problem ist. – dfsq

Versuchen Sie, 'ng-app' vom' head'-Tag zum 'body'-Tag zu verschieben. –

Sie den ng-App-Tag Kopf und nicht die HTML-Tag festgelegt haben. Das bedeutet, dass sich Ihre App nur um head-Tags dreht und das Body-Tag, in dem die ng-view verwendet wird, nicht enthält.

Also in Ihrem 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>

ändern es so.

Auch Sie haben mainController.js nicht enthalten. Fügen Sie es nach der JQuery-Datei in index.html ein.

Quelle

2016-08-14 06:50:39

In den HTML-Code und die gleichen Probleme geändert. Ich bin mir nicht sicher, ob ich die ng-Route richtig lade. Von dem was ich gesehen habe bin ich aber das ist meine erste Angular App. – Redmoomba

Mist. Ich habe es total vermisst. Sie haben mainController.js nicht eingeschlossen. Include es in index.html nach jquery-Datei –

Bearbeitete meine Antwort auch –

ng-View funktioniert nicht in Single Page App

Antwort

Verwandte Themen