我正在用角度编写商店应用程序,但是在
浏览器。我想我错过了一些东西,但看不到:

我切割了html文件。它只是显示写入的第一行
链接<scripts>

我通过添加<meta charset="utf-8">修复了标点符号。因此,到现在为止,这些字符都可以显示出来了。我想我忘记从angular aplication添加其他脚本,但是我看不到!

javascript - Angular应用无法在浏览器上正确呈现-LMLPHP

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="[email protected]" 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"
    ]
  }];
})();

最佳答案

看你的ngapp

<html ng-app="gemStore">


在你的JavaScript上

var app = angular.module('gemstore', ['qrScanner', 'ngRoute']);


gemstoregemStore,不匹配,

外观字符S

在两个地方都做相同(区分大小写)

demo on JSBin

07-24 17:59