2017-05-31 2 views
-1

app.js arbeiten // dies ist mein app.js Datei Ich habe eine andere Datei enthalten die HeaderCtrlModule darinng-Ansicht nicht für meine App

var app = angular.module("BooKart",["ngRoute","HeaderCtrlModule"]); 

app.config(function($routeProvider){ 
$routeProvider 
.when("/books",{ 
templateUrl: "views/book-list.html", 
controller: "BookListCtrl" 
}) 
.when("/kart",{ 
templateUrl: "views/kart-list.html" 
}) 
.otherwise({ 
    redirectTo: "/books" 
}) 
}); 

Kart-list.html // diese Verbraucher mit die Kart Ansicht

<div> 
This is Kart view. 
</div> 

Buch list.html // dies lädt die Bücherliste Ansicht

<div id="bookListWrapper"> 
<form role="form"> 
<div class="form-group"> 
<input type="text" class="form-control" placeholder="Search here..."> 
</div> 
</form> 
<br/> 
<ul class="list-unstyled"> 
<li class="book" ng-repeat="book in books" 
style="background: white url('imgs/{{book.imgUrl}}') no-repeat"> 
<div class="book-details clearfix"> 
<h3>{{book.name}}</h3> 
<p>{{book.price}}</p> 
<ul class="list-unstyled list-inline"> 
<li>Rating: {{book.rating}}</li> 
<li>Binding: {{book.binding}}</li> 
<li>Publisher: {{book.publisher}}</li> 
<li>Released: {{book.releaseDate}}</li> 
</ul> 
<p>{{book.details}}</p> 
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to 
Kart</button> 
</div> 
</li> 
</ul> 
</div> 

index.html

<!doctype html> 

<html lang="en" ng-app="BooKart"> 

<head> 
    <meta charset="utf-8"> 
    <title>Welcome to BooKart</title> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <script src="lib/angular.js"></script> 
    <script src="lib/angular-route.min.js"></script> 
    <script src="js/controllers/app.js"></script> 

    <script src="js/controllers/HeaderCtrl.js"></script> 
    </head> 
    <body> 

    <div id="header-wrapper" ng-controller="HeaderCtrl"> 
     <span class="logo pull-left">{{appDetails.title}}</span> 
     <span class="tagline pull-left">{{appDetails.tagline}}</span> 
    <div class="nav-wrapper pull-left"> 
      <ul class="nav nav-pills"> 
       <li class="active"><a href="#!/books">Books</a></li> 
       <li><a href="#!/kart">Kart</a></li> 
      </ul> 
     </div> 
    </div> 

    <div ng-view> 
    </div> 
    </body> 
    </html> 

HeaderCtrl.js

angular.module("HeaderCtrlModule",[]) 

.controller("HeaderCtrl",["$scope",function($scope) 
{ 

$scope.appDetails = {}; 
$scope.appDetails.title = "BooKart"; 
$scope.appDetails.tagline = "We have 1 Million Books for you"; 

}]) 

.controller("BookListCtrl",["$scope","$http",function($scope,$http){ 
{ 

$scope.books = [ 
    { 
     imgUrl: "adultery.jpeg", 
     name: "Adultery", 
     price: 205, 
     rating: 4, 
     binding: "Paperback", 
     publisher: "Random House India", 
     releaseDate: "12-08-2014", 
     details: "Linda, in her thirties, begins to question the routine and 
predictability of her days. In everybodys eyes, she has a perfect life-happy 
marriage, children and a career. Yet what she feels is an eno... <a 
href='#'>View More<a>" 
    }, 
    { 
     imgUrl: "geronimo.jpeg", 
     name: "Geronimo Stilton Spacemice#2 : You're Mine, Captain!", 
     price: 168, 
     rating: 5, 
     binding: "Paperback", 
     publisher: "Scholastic", 
     releaseDate: "01-07-2014", 
     details: "Geronimo Stilton meets outer space in this cosmically fun 
spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo 
Stilton of a parallel universe! He is captain of the spaceship Mou... View 
More" 
    }, 
    { 
     imgUrl: "life-or-death.jpeg", 
     name: "Life or Death", 
     price: 339, 
     rating: 4, 
     binding: "Paperback", 
     publisher: "Hachette India", 
     releaseDate: "01-04-2014", 
     details: "Why would a man escape from prison the day before he's due 
    to be released? Audie Palmer has spent a decade in prison for an armed 
    robbery in which four people died, including two of his gang. Five... View 
More" 
    }, 
    { 
     imgUrl: "playing.jpeg", 
     name: "Playing It My Way : My Autobiography", 
     price: 599, 
     rating: 5, 
     binding: "Hardcover", 
     publisher: "Hodder & Stoughton", 
     releaseDate: "01-08-2014", 
     details: "I knew that if I agreed to write my story, I would have to 
be completely honest, as thats the way I have always played the game and 
that would mean talking about a number of things I have not addr... View 
More" 
    }, 
    { 
     imgUrl: "the-fault.jpeg", 
     name: "The Fault in Our Stars", 
     price: 227, 
     rating: 4.5, 
     binding: "Paperback", 
     publisher: "Penguin Books Ltd", 
     releaseDate: "25-01-2013", 
     details: "Despite the tumor-shrinking medical miracle that has 
bought her a few years, Hazel has never been anything but terminal, her 
final chapter inscribed upon diagnosis. But when a gorgeous plot twist n... 
View More" 
    }, 
    { 
     imgUrl: "wings-of-fire.jpeg", 
     name: "Wings of Fire: An Autobiography", 
     price: 124, 
     rating: 5, 
     binding: "Paperback", 
     publisher: "Universities Press", 
     releaseDate: "25-08-2000", 
     details: "Wings of Fire traces the life and times of India's former 
president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well 
as his growth as India's Missile Man. Summary of the Book Wings... View 
More" 
    } 


$scope.addToKart = function(book) 
{ 
    console.log("add to kart: ", book); 
} 

}]); 

Ich denke, der Code sieht gut ich auch # aufgenommen haben!/Vielmehr/# nicht sicher, warum es nicht funktioniert, wenden Sie sich bitte einige einen Blick auf, sagen Sie mir, was ist falsch. Ich bin neu zu kantig und es gibt keinen Fehler in der Konsole, so dass auch das nicht hilft. Danke im Voraus. Bitte helfen Sie mir aus

+0

was ist Ihre Frage hier? –

+0

die Ansicht ändert sich nicht –

+0

irgendein Fehler in der Konsole? – anoop

Antwort

0

Wenn Sie nicht lokalen Server verwenden, lädt Chrome andere HTML-Dateien in vorhandenen HTML nicht. Aber es wird in Firefox-Browser funktionieren.

Versuchen Sie Visual Studio. Erstellen Sie ein Projekt in Visual Studio und führen Sie es aus.

+0

https://code.angularjs.org/1.6.4/angular-route.js –

+0

krank überschreiten die Grenze der Zeichen Wenn ich poste –

+0

einmal überprüfen, ob es in Firefox Browser funktioniert .. – sarathvamsi

0

Es gibt einige Probleme in Ihrem Code:

Entfernen zusätzliche { in Ihrer BookListCtrl Funktion.

Ihre Route beheben, ändern Sie es an: href="#/kart"

sehen Sie dieses working plunker

Ihre enthalten Skripte scheint in Ordnung zu sein, und nur ein Vorschlag Ihr Modulname ist BooKart, nicht BookKart

+0

Ich habe den Namen überprüft es sagt BooKart, ich habe die BookListCtrl als auch es scheint zu funktionieren gut in Firefox, aber nicht in Chrom aus irgendeinem Grund –

+0

@ShashankShankaranand: Versuchen Sie mit injizieren '$ locationProvider', in Ihrer' Route config' und set '$ locationProvider.hashPrefix ('');' nach allen Routen – anoop

Verwandte Themen