This post is more appropriate for me and not you. Unless you, like me, are learning Angular and want all the pieces to fit in your brain.

We have a file app.js that has a module named ‘myApp’ instantiated to app. A module contains the different AngularJS components.

var app = angular.module("myApp", []);

In our index.html we connect our HTML to our Angular via a directive. Directives are instructions back to Angular to run some code. They are namespaced with ‘ng-‘ and are the equivalent of <% %> in ERB, sort of. Directives also define the scope - so for our main directive, we want our whole code to be scoped to the whole body text of the HTML.

<body ng-app="myApp">
  <!--- code -->
</body>

Now we create a file called MainController.js for managing our app’s data. In the controller, we are naming our controller as our first argument and passing in an array as our second. This array[0] is set to $scope and [1] set to, in our case, a string. Note that we are able to link this controller to our main app in app.js because controller is a method of app, and app is the instantiated angular module. This is how this is all stitched together so far.

app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'This is my String';
}]);

Now this $scope means that the entire body of the HTML page can access things like title using the angular version of string interpolation, which is {{ title }} - now ‘This is my String’ can be entered into the HTML.

You can also set scoped objects and use dot notation to refer to data in your html.

app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'This is my String Harriet Tubman';
  $scope.promo = "Goodbye Andrew Indian Killer Jackson";
  $scope.product = {
  name: 'The Book of Tubman',
  price: 119
}

and the html

<div class="thumbnail">
  <img src="img/the-book-of-trees.jpg">
  <p class="title">{{ product.name }}</p>
  <p class="price">$ {{ product.price }}</p>
  <p class="date"> </p>
</div>

Astute readers will note that above in the “price” class p tag, I hardcoded a dollar - that isnt necessary though with Angular, you can use a pipe like with bash and just send that data to a filter. Here we will use ‘currency’ and delete the dollar sign.

<p class="price">{{ product.price | currency }}</p>

We want to use filters so we are separating the data from the presentation.

Other cool filters include:

  • | uppercase
  • | date

Also note that this is how you add a date into Angular and also create an array of objects in Angular to reference later.

$scope.products =
  [
    {
      name: 'The Book of Trees',
      price: 19,
      pubdate: new Date('2014', '03', '08'),
      cover: 'img/the-book-of-trees.jpg'
    },
    {
      name: 'Program or be Programmed',
      price: 8,
      pubdate: new Date('2013', '08', '01'),
      cover: 'img/program-or-be-programmed.jpg'  
    }
  ]
}]);

Now we can display this with a loop in the html with the code below. Note that we use ng-src instead of plain old src inside the img tag, and how we use ng-repeat and the Ruby-like product in products syntax.

<div ng-repeat="product in products" class="col-md-6">
  <div class="thumbnail">
    <img ng-src=" {{ product.cover }} " />
    <p class="title">{{ product.name}}</p>
    <p class="price">{{product.price | currency}}</p>
    <p class="date">{{product.pubdate | date }}</p>
  </div>
</div>

Overview

What I learned about Angular today

  • A module contains the different components of an AngularJS app
  • A controller manages the app’s data
  • An expression displays values on the page
  • A filter formats the value of an expression