Angular Js：简单应用无法正常工作

Question

我正在从codeSchool学习AngularJS，并且正在制作一个简单的hello world应用程序，最初它是正确呈现的，但过了一段时间它根本无法使用。 我无法检测到该错误，请提供帮助。这是html文件的代码

<!DOCTYPE html>
<html ng-app="store">
<head>
    <title>Angular Code School</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    I am {{4+6}}
    {{"Hello +"World"}}
<div ng-controller="StoreCtrl as store">
<div ng-repeat="product in store.products| orderBy:'-price'">
<h2>Name :{{product.name}} </h2>

    <h2>Price:{{product.price | currency}} </h2>
    <h2>Description:{{product.description}} </h2>
    <button ng-show="product.canPurchase">Add To Cart </button>

<section ng-controller="PanelCtrl as panel">
    <ul class="nav nav-pills">
        <li ng-class="{'active':panel.isSelectedTab(1)}"><a href ng-click="panel.selectTab(1)"> Description</a></li>
        <li ng-class="{'active':panel.isSelectedTab(2)}"><a href ng-click="panel.selectTab(2)">Specs</a></li>
        <li ng-class="{'active':panel.isSelectedTab(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
    </ul>
    <div ng-show="panel.isSelectedTab(1)">This is description div</div>
    <div ng-show="panel.isSelectedTab(2)">This is Specification Section</div>
    <div ng-show="panel.isSelectedTab(3)">This is Reviews section</div>
</section>
</div>
</div>


</body>
</html>

appTest.js

var app = angular.module('store', []);

app.controller('StoreCtrl', ['$scope', function ($scope) {
    this.products = gems;
}])

gems = [{
    name: 'Dodecahedron',
    price: 2.95,
    description: 'This is the description of Dodecahedron'
    canPurchase: false;
},
{
    name:'Diamond',
    price: 5.95,
    description: 'Diamond is the most luxuriest gem of all.'
    canPurchase:true;
}]

app.controller('PanelCtrl', ['$scope', function ($scope) {
    this.tab=1;
    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelectedTab = function(checkTab){
        return this.tab===checkTab;
    }

}])

我目录的结构像

root/
   angular.js
   appTest.js
   index.html

这是带有控制台的页面

Answer 1

您搞砸了双引号：

{{"Hello +"World"}}

应该：

{{"Hello " + "World"}}

检查您的控制台是否存在javascript错误。

Answer 2

三个问题：

如下修改问候词
{{“ Hello” +“ World”}}

在您的appTest.js中，

在'gem'的描述字段后添加逗号
去除 ”;” “可以购买”后的分号

在您的html文件中

确保您包括“ appTest.js”，而不仅仅是“ app.js”

Answer 3

appTest.js

var app = angular.module('store', []);

app.controller('StoreCtrl', function() {
    this.products = gems;
});

app.controller('PanelCtrl', function() {
    this.tab = 1;

    this.selectTab = function(setTab) {
        this.tab = setTab;
    };

    this.isSelected = function(checkTab) {
        return this.tab === checkTab;
    };
});

var gems = 
    [{
        name: 'Dodecahedron',
        price: 2.95,
        description: 'This is the description of Dodecahedron',
        canPurchase: false
    },
    {
        name: 'Diamond',
        price: 5.95,
        description: 'Diamond is the most luxuriest gem of all.',
        canPurchase: false
    }];

并且在index.html {{"Hello" +"World"}}应为{{"Hello" + "World"}}

Angular Js：简单应用无法正常工作

问题描述

3 个解决方案

解决方案1
0 2015-12-19 05:07:07

解决方案2
0 2015-12-19 05:12:36

解决方案3
0 已采纳 2015-12-19 05:32:06

Angular Js：简单应用无法正常工作

问题描述

3 个解决方案

解决方案1 0 2015-12-19 05:07:07

解决方案2 0 2015-12-19 05:12:36

解决方案3 0 已采纳 2015-12-19 05:32:06

解决方案1
0 2015-12-19 05:07:07

解决方案2
0 2015-12-19 05:12:36

解决方案3
0 已采纳 2015-12-19 05:32:06