Ich habe den HTML-Code nach den mir vorliegenden Anweisungen eingefügt. Aber wenn ich versuche, das Laden der Seite gibt es mir nichts anderes als:Coursera - Eckig lernen - Warum kann ich meine app.js nicht laden?
Die Registerkarten: Das Menü Vorspeisen Mains Desserts
Die Beschreibung: Bild: dish.name, dish.name, Gericht. Etikett, Geschirr.Preis |
Ich dachte, es könnte die Version von eckigen Ich bin laufen, aber ich habe nur die neueste heruntergeladen und es funktioniert immer noch nicht. Ich habe versucht, die Dateien in dasselbe Verzeichnis wie die HTML-Datei zu verschieben, das gleiche Problem. Ich habe dann versucht, die eckigen und app-Codes innerhalb des HTML-Dokuments selbst und immer noch das gleiche Ergebnis. Ich habe sogar den Cache gelöscht, weil ich dachte, dass das das Problem wäre, aber immer noch die gleiche Ansicht haben.
Ich weiß, es ist etwas Dummes, aber mein Gehirn ist gebraten und ich kann den Wald nicht für die Bäume sehen. All die CSS lädt gut. Es ist nur die app.js, die nicht geladen wird. Ich füge die main.html ein, gefolgt von den app.js Dateien unten für weitere Hinweise. Ich versuche, in den Teil des Kurses zu kommen, in dem ich Grunt lerne (daher die Build-/Endbuild-Kommentare). Daher wäre ich sehr dankbar für etwas Hilfe.
<!-- MAIN.HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row row-content" ng-controller="menuController as menuCtrl">
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-class="{active:menuCtrl.isSelected(1)}">
<a ng-click="menuCtrl.select(1)" aria-controls="all menu" role="tab">The Menu</a>
</li>
<li role="presentation" ng-class="{active:menuCtrl.isSelected(2)}">
<a ng-click="menuCtrl.select(2)" aria-controls="appetizers" role="tab">Appetizers</a>
</li>
<li role="presentation" ng-class="{active:menuCtrl.isSelected(3)}">
<a ng-click="menuCtrl.select(3)" aria-controls="mains" role="tab">Mains</a>
</li>
<li role="presentation" ng-class="{active:menuCtrl.isSelected(4)}">
<a ng-click="menuCtrl.select(4)" aria-controls="dessert" role="tab">Desserts</a>
</li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in menuCtrl.dishes | filter:menuCtrl.filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="{{ dish.name }}">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{ dish.name }} <span class="label label-danger label-xs">{{ dish.label }}</span> <span class="badge">{{ dish.price | currency }}</span></h2>
<p>{{ dish.description }}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- build:js scripts/main.js -->
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<!-- endbuild -->
</body>
</html>
<!-- SCRIPTS/APP.JS -->
var app = angular.module('confusionApp', [])
.controller('menuController', function(){
this.tab = 1;
this.filtText = '';
var dishes=[
{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: 'Hot',
price:'4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comment: ''
},
{
name: 'Zucchipakoda',
image: 'images/Zucchipakoda.png',
category: 'appetizer',
label: '',
price:'1.99',
description: 'Deep-fried with mildly spiced Chickpea flour batter accompanied with a tamarind sauce.',
comment: ''
},
{
name: 'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label: 'New',
price:'1.99',
description: 'A quintessential experience, is it a vada or is it a donut.',
comment: ''
},
{
name: 'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label: '',
price:'2.99',
description: 'A delectable, semi-sweet New York Style Cheese Cake with Graham cracker crust spiced with Indian cardamoms',
comment: ''
}
];
this.dishes = dishes;
this.select = function(setTab){
this.tab = setTab;
if(setTab === 2)
this.filtText = "appetizer";
else if(setTab === 3)
this.filtText = "mains";
else if(setTab === 4)
this.filtText = "dessert";
else
this.filtText = "";
}
this.isSelected = function(checkTab) {
return (this.tab === checkTab);
}
});
D'oh! Vielen Dank. Vielen Dank. – muzzo