Angularの基本的な書き方メモ

Angularの基本的な書き方メモとりあえず、メモとして。一番の目的はcontrollerを作る際の書き方を忘れそうだから。何回か書けば覚えると思うのだけど、まぁそのうちの一回として。

休みになったので、気になっていたcode schoolのShaping up with Angular.jsやってみたら、かなり内容が良くて満足してる!

app.js

(function(){
  var app = angular.module('store', []);
  app.controller('StoreController', function() {
    this.products = gems;
  });

  var gems = [
  {
    name: 'Dodechedron',
    price: 2.95,
    description: 'Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.',
    canPurchase: false,
    soldOut: false
  },
  {
    name: 'Pentagonal Gem',
    price: 3.95,
    description: 'Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.',
    canPurchase: true,
    soldOut: false
  },
  ];
})();

index.html

<!DOCTYPE html>
<html ng-app="store">
<head>
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
  <div ng-controller="StoreController as store">
    <div ng-repeat="product in store.products" ng-hide="product.soldOut">
      <h1> {{product.name}} </h1>
      <h2> ${{product.price}} </h2>
      <p> {{product.description}}</p>
      <button ng-show="product.canPurchase"> Add to Cart</button>
    </div>
  </div>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Pocket
LINEで送る

You may also like...