056 AngularJS

29 Dec 2013

AngularJS is a frontend JavaScript framework. In this episode we will build a tiny project to learn on how to implement controllers, hide or show certain sections of the dom, change styling conditionally all in the fun of building single-page-applications.

Download video: mp4

Sample code: Github

Version: 1.2.6

Similar episodes: 014 Local Web Servers, 042 BackboneJS

##Background on AngularJS

  1. Main website
  2. API documentation

##Things to learn with AngularJS

###1. data binding

  1. create index.html with these 4 elements:
    • ng-app portion of the html for angularjs to act upon
    • script tag to link to the angularjs cdn
    • ng-model change the model to update the control
    • {{hello}} display the datas

    ``` <!doctype html>

    Things to learn in 2014!

    {{message}}

    ```

###2. controllers

  1. inside index.html

    ```

    {{message}}

    ```

  2. functions within controllers

    ```

    {{message}}

    uppercase: {{uppercase(message)}}

    ```

###3. code organization

  1. define the dom

    ```

    {{uppercase(message)}}

    ```
  2. define the function and data in the controller

    ``` …

    var app = angular.module(‘App’, []);

    app.controller(‘HelloCtrl’, function ($scope) {

    $scope.message = ‘hello’; $scope.uppercase = function(word) { return word.toUpperCase(); } })

    </script> … ```

###4. filters

  1. creating filters

    ``` …

    uppercase: {{message | uppercase}}

    ```

  2. in-built filters

    ```

    price: {{price | currency:}}

    … $scope.price = 23.556; …

    now: {{startingTime | date:}}

    … $scope.startingTime = Date.now(); … ```

###5. repeated data ng-repeat

  1. a list of books to read that can be filtered:

    ```

    1. {{book.name}} by {{book.author}}

    ```

  2. with the following data structure and script:

    ```

    var app = angular.module(‘App’, []);

    app.controller(‘BooksCtrl’, function ($scope) {

    $scope.books = [ { name: ‘Modern Operating Systems’, author: ‘Andrew S. Tanenbaum’ }, { name: ‘Design Patterns’, author: ‘Gang of 4’ }, { name: ‘Structure and interpretation of computer programs’, author: ‘Gerald Jay Sussman and Hal Abelson’ }, { name: ‘Getting Started with Electronics’, author: ‘Forrest M. Mims’ }, { name: ‘Code Complete’, author: ‘Steve McConnell’ }, { name: ‘Design of Everyday Things’, author: ‘Donald A. Norman’ }, { name: ‘The Feynman Lectures on Physics’, author: ‘Richard Feynman’ }, { name: ‘Universal Principles of Design’, author: ‘William Lidwell, Kritina Holden, Jill Butler’ } ]

    })

    </script> ```

###6. display data if chosen ng-if

  1. select for a quick look of the book with a summary and cover image:

    ```


    <table border=1 cellpadding=5> # Book detail {{ $index +1 }} {{book.name}} by {{book.author}}

    {{ book.summary }}

    {{ book.name }}
    {{reading}}

    ```

  2. structure of the books will now include the image and summary:

    $scope.books = [ { name: 'Modern Operating Systems', author: 'Andrew S. Tanenbaum', summary: 'The widely anticipated revision of this worldwide best-seller incorporates the latest developments in operating systems technologies.', cover: 'img/1.jpg' }, { name: 'Design Patterns', ...

###7. change styled with ng-class

  1. add a style

    ```

</style> ``` 2. add another column for quantity with ng-class conditions for the entire table row

```
<tr>
  <th>#</th>
  <th>Book detail</th>
  <th>Quantity</th>
</tr>
…

<tr ng-repeat='book in books | filter:search' ng-class="{selected: (book.quantity > 0)}">

…

<td>
    <select ng-model="book.quantity">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</td>
```

###8. do something upon an action ng-change

  1. upon adding each book

    <select ng-model="book.quantity" ng-change="addBooks(book)">

  2. add the script

    ``` $scope.selectedBooks = {};

    $scope.addBooks = function(book) { $scope.selectedBooks[book.name] = {‘name’: book.name, ‘quantity’: parseInt(book.quantity, 10) }; if(book.quantity === ‘0’) { delete $scope.selectedBooks[book.name]; } // console.log($scope.selectedBooks); } ```

  3. (optional) you can try to display them as html as well

    ```

    1. {{book.name}} [{{ book.quantity }}]

    ```

###9. hide and show parts of ui ng-hide and ng-show

  1. trigger the hide and show

    <button ng-hide="dispatched" ng-click="getBooks()">GET THE BOOKS!</button>
    
  2. define what getBooks() does

    ``` $scope.dispatched = false;

    $scope.getBooks = function() { $scope.dispatched = true; } ```

  3. hide and show according:

    ```


    <table ng-hide=”dispatched” border=1 cellpadding=5> …

    Hurray! Your books are on the way ;-)

      ```

##Credits

The summaries and cover images of these books in the project were taken from the following websites:

  1. Amazon: Modern Operating Systems by Andrew S. Tanenbaum
  2. Amazon: Design Patterns by Gang of 4
  3. MIT Press: Structure and interpretation of computer programs by Gerald Jay Sussman and Hal Abelson
  4. Amazon: Getting Started with Electronics by Forrest M. Mims
  5. Amazon: Code Complete by Steve McConnell
  6. Amazon: Design of Everyday Things by Donald A. Norman
  7. Caltech: The Feynman Lectures on Physics by Richard Feynman
  8. Amazon: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler

##More Resources on AngularJS

  1. ngResource for RESTful interaction with server and http module for simple interaction with serverside
  2. change url using $location
  3. Egghead videos
  4. AngularJS Oreilly book
  5. Tutsplus video course
  6. BackboneJS and EmberJS - other frontend mvc frameworks

##Build Link of this episode

Yeoman Digest