AngularJS 1: Core concepts

Core Concepts

  • Directives - HTML annotations that trigger Javascript behaviors
  • Modules - Where our application components live
  • Controllers - Where we add application behaviour
  • Expressions - How values get displayed within the page

Module / Controller Initialization

var app = angular.module(‘store’, \[\]);  
ng-app="store"> …

this way the html inside the body tag will be treated as a part of angular application
{{ expression }} - this will be evaluated using the javascript

(function(){
  var app = angular.module("store", []);
    app.controller("StoreController", function(){
    this.product = gem;
  });

  var gem = {
    name: "Product name",
    price: 2.95,
    description: "description",
    canPurchase: false,
    soldOut: true
};
})();

<html ng-app="store">
  <body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
      <h1>{{ store.product.name }}</h1>
      <div>{{ store.product.price }}</div>
      <div>{{ store.product.description }}</div>
      <button ng-show="store.product.canPurchase">Add to Cart</button>
    </div>
  </body>
</html>

Loops with ng-repeat

<div ng-repeat="product in store.products">
  <h1>{{ product.name }}</h1>
  <div>{{ product.price }}</div>
  <div>{{ product.description }}</div>
  <button ng-show="product.canPurchase">Add to Cart</button>
</div>

Publish Date: 2015-04-08