Angular应用程序无法在浏览器上正确呈现
[英]Angular app is not rendering properly on the browser
问题描述
我正在用角度编写商店应用程序，但是在浏览器中没有正确显示。 我想我错过了一些东西，但看不到：
我切割了html文件。 它只是显示链接<scripts>的第一行。
我通过添加<meta charset="utf-8">修复标点符号。 因此，到现在为止，这些字符都可以显示出来了。 我忘了我从angular aplication添加其他脚本，但我看不到！
index.html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="list-group" ng-controller="StoreController as store">
<header>
<h1 class="text-center">Prueba tienda</h1>
<h2 class="text-center">_ aplicación con Angular-js _</h1>
</header>
<div class="list-group-item" ng-repeat = "product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<!-- Image gallery -->
<div class="gallery" ng-show="product.images.length"
ng-controller="GalleryController as gallery">
<img ng-src="{{product.images[gallery.current]}}">
<ul class="list-inline thumbs">
<li class="thumbnail" ng-repeat="image in product.images">
<img ng-src="{{image}}" />
</li>
</ul>
</div>
<section class="tab" ng-controller="TabController as tabber">
<ul class="nav nav-pills">
<li ng-class="{active: tabber.isSet(1)}">
<a href ng-click="tabber.setTab(1)">Description</a></li>
<li ng-class="{active: tabber.isSet(2)"}>
<a href ng-click="tabber.setTab(2)">Specs</a></li>
<li ng-class="{active: tabber.isSet(3)">
<a href ng-click="tabber.setTab(3)">Reviews</a></li>
</ul>
<!-- Review Tab's content -->
<div ng-show="tabber.isSet(1)">
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>
<div ng-show="tabber.isSet(2)">
<h4>Specs</h4>
<blockquote>Shine: {{product.shine}}</blockquote>
</div>
<div ng-show="tabber.isSet(3)">
<!-- Product Reviews List-->
<ul>
<h4>Reviews</h4>
<li ng-repeat="review in product.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<cite class"clearfix">-{{review.author}} on {{review.createdOn | date}}</cite>
</blockquote>
</li>
</ul>
<!--Review Form -->
<form name="reviewForm"
ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<!-- Live Preview -->
<blockquote>
<strong>{{reviewCtrl.review.stars}} Stars</strong>
{{reviewCtrl.review.body}}
<cite class="clearfix">—{{reviewCtrl.review.author}}</cite>
</blockquote>
<!-- Review Form -->
<h4>Submit a Review</h4>
<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" class="form-control"
ng-options="stars for stars in [5,4,3,2,1]"
title="Stars" required >
<option value="">Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea class="form-control" placeholder="Write a short review of the product..."
title="Review" ng-model="reviewCtrl.review.body"></textarea>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" type="email" class="form-control"
placeholder="jimmyDean@example.org" title="Email" required/>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" value="Submit Review"
{{reviewForm..$valid}}/>
</fieldset>
</form>
</div>
</section>
</body>
</html>
app.js
(function() {
var app = angular.module('gemStore');
app.controller('GalleryController', function() {
this.current = 0;
this.setCurrent = function(value) {
this.current = value || 0;
};
});
app.controller('StoreController', function() {
this.products = gems;
});
app.controller('TabController', function() {
this.tab = 1;
this.setTab = function(selectTab) {
this.tab = selectTab;
};
this.isSet = function(tabde) {
return this.tab == tabde;
};
});
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
this.review.createOn = Date.now();
product.reviews.push(this.review);
this.review = {};
};
});
var gems = [{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: [
"images/gem-02.gif",
"images/gem-05.gif",
"images/gem-09.gif"
]
}, {
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif"
]
}, {
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-10.gif"
]
}];
})();
3 个解决方案
解决方案1
2 已采纳 2016-11-11 17:57:18
看你的ngapp
<html ng-app="gemStore">
在你的JavaScript上
var app = angular.module('gemstore', ['qrScanner', 'ngRoute']);
gemstore和gemStore ，不匹配，
外观字符S
在两个地方都做相同（区分大小写）
解决方案2
0 2016-11-11 17:50:43
min.js或简单js脚本标记中仅包含一个Angular js文件，但应在app.js之前。
解决方案3
0 2016-11-11 18:15:37
模块名称应以大写var app = angular.module('gemstore', ['qrScanner', 'ngRoute']); “ S”代替var app = angular.module('gemstore', ['qrScanner', 'ngRoute']); 使用var app = angular.module('gemStore', ['qrScanner', 'ngRoute']);
还有一件事，您不需要将模块包装到自动调用函数中(function(){}());
外部JavaScript和下拉菜单在浏览器中无法正确呈现
[英]External JavaScript and Dropdown Menu not Properly Rendering in Browser
由于多种原因，AngularJS应用程序无法在IE 8中正确呈现
[英]AngularJS app not rendering properly in IE 8 for multiple reasons
Javascript HTML 单选按钮 - 在 web 浏览器中无法正确呈现代码的帮助
[英]Javascript HTML radio buttons - assistance with code not rendering properly in web browser
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.