Question

我正在用角度编写商店应用，但它没有正确渲染浏览器。我想我错过了一些东西，但我看不清楚：

我剪切了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"
    ]
  }];
})();

Answer 1

查看您的ngapp

<html ng-app="gemStore">

和您的JavaScript

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

gemstore和gemStore，未匹配，

看字符S

在两个地方都做同样的（区分大小写）

请参阅demo on JSBin

Answer 2

在脚本标记中只包含一个Angular js文件min.js或simple js，但它应该在app.js之前。

Answer 3

模块名称应该有资本＆＃39; S＆＃39; 将var app = angular.module('gemstore', ['qrScanner', 'ngRoute']);替换为var app = angular.module('gemStore', ['qrScanner', 'ngRoute']);

还有一件事，你不需要将模块包装到自动调用函数中(function(){}());

Angular应用程序无法在浏览器上正确呈现

3 个答案: