2016-07-07 32 views
0

根据我给出的说明,我已经放入了HTML代码。 但是当我尝试加载网页它给了我什么,但:Coursera - 学习Angular - 为什么我无法获得我的app.js加载?

的标签: 菜单 开胃 电源 甜品

描述: 图片:dish.name,dish.name,菜。标签,dish.price |货币,dish.description

我认为这可能是我运行的角度的版本,但我只是下载最新的一个,它仍然无法正常工作。我试图将文件移动到与html文件相同的目录中,这一问题。然后,我尝试将角度和应用程序代码放入html文档中,并保持相同的结果。我甚至已经删除了缓存,认为这会是问题,但仍然有相同的看法。

我知道这是愚蠢的,但我的大脑被炸,我无法看到树木的森林。所有的CSS加载都很好。这只是没有加载的app.js。我包含main.html,接下来是app.js文件,以供进一步的提示。我正在尝试进入我学习Grunt的课程的部分内容(因此构建/内部构建的评论)。所以我会非常感谢一些帮助。

<!-- 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); 
} 
}); 

回答

0

你忽略了ng-app这是用来在页面

变化

<html lang="en"> 

初始化角要

<html lang="en" ng-app="confusionApp"> 
+0

D'oh!谢谢。谢谢。 – muzzo

0

这正是已经说。我错过了ng-app变量。当我将它从一个文件转移到另一个文件时,我一定失去了它。再次感谢。

相关问题