Google+

Wednesday, April 1, 2015

#7 - Using Data Collections in AngularJS

In this tutorial we are Using Data Collections in AngularJS,  performing data binding between a Controller and an AngularJS View, by means of an <ul> HTML5 element. and an objects collection in JSON (JavaScript Object Notation) format.
This is the Lesson #7 in the "AngularJS: From 0 To 100" learning series written for absolute Beginners. This lesson is a continuation of a previous Controllers' Lesson #6  , so please take a look at it.
<<<< PREVIOUS LESSON                                                                  NEXT LESSON >>>>

For this lesson we're using a free Web Editor called "Brackets" , optimized for developing AngularJS . You can take a look at a 5 minutes tutorial about it in this post.

At this article we'll develop an AngularJS App , adding a Controller containing the behavior (functionality) to populate an HTML5 list with data in JSON format , and calling it from the View.
For simplicity, this JSON collection will be hard-coded, but in the real world, it could probably be fetched from some Web Service using Ajax.
Our AngularJS App will look this way :

Using Data Collections in AngularJS





Using Data Collections in AngularJS



The first thing that we ought to do to develop an AngularJS App is loading the Angular Framework and inserting the data-ng-app directive to the HTML file:

Using Data Collections in AngularJS 1


<!doctype html><html data-ng-app="MusicApp"><head><title>    My First AngularJS App</title>         <link href="Controllers.css" rel="stylesheet" type="text/css"  />    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>    <script src="Controllers.js" type="text/javascript"></script></head>



We also create two files: an CSS stylesheet and the javascript file containing the Controller.
Next, type an div element and bind it to the Controller using the data-ng-controller directive:

Using Data Collections in AngularJS 2

Now create the Controller at the .js file:

Using Data Collections in AngularJS 3

Inside the Controller, we type an JSON collection, which will contain  the data to be displayed at the View:

Using Data Collections in AngularJS 4


var oMusicApp = angular.module('MusicApp', []);

 oMusicApp.controller('MusicCtl', [ '$scope', function ($scope) {
           
            var albums = 
            [
                {img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},
                {img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},
                {img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},
                {img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}
            ]
        



Now we want to load the data ONLY in the case the user click on a button. So, let's code the Controller's method that will be called by the button:


Using Data Collections in AngularJS 5


 $scope.fnShowAlbums = function(){                                              $scope.albums = albums;                                             } 


Inside the method, we just set the $scope's "albums" property with the contents of the JSON array.
Back at the View, create the list item element including an data-ng-repeat directive:


Using Data Collections in AngularJS 6

The expression at the directive says to the Angular engine to bind each one of the items inside the "albums" collection that we created at the Controller's method, with a list item template.
Inside the list item, and because we want to emulate an ordered list (ol) , type the following expression, to show the item's index number:

Using Data Collections in AngularJS 7

The $index variable is defined at the official AngularJS documentation here . There are more collection's variables, like $first, $even and $odd.
Continue creating the list item template, by adding the image as follows:

Using Data Collections in AngularJS 8

Notice that we refer the current item's properties using object notation ("object.property"):
Next, add the album's name:

Using Data Collections in AngularJS 9

And finally, add the price, with an AngularJS filter to make it as currency:

Using Data Collections in AngularJS 10

Now we just need the button to display the list. Include an data-ng-click directive to call the Controller's method:

Using Data Collections in AngularJS 11


<h1>Fragile State Discography</h1>     <h2>Neil Cowley (Zero 7) and Ben Mynott</h2>        <div id="controls1" data-ng-controller="MusicCtl">    <ul >                <li data-ng-repeat="album in albums">                        .{{$index + 1}}            <img src="{{album.img}}" alt="{{album.name}}"  >             <span >{{album.name}} - {{album.price | currency:"USD$" | uppercase}}</span>                    </li>             </ul>        <div style="text-align:center">            <button data-ng-click="fnShowAlbums()">Show the Album's List</button>        </div>        </div>    
     

Run the App, and click the button:

Using Data Collections in AngularJS 12

The list is dynamically displayed by Angular:

Using Data Collections in AngularJS 13

This is the CSS3 style to copy :

div[id^=controls]{padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;font:900 12px Comic Sans MS;opacity:0.9;background:#fed;    border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:220px;text-align: center;background:#ddd; font:900 14px Comic Sans MS;opacity:0.9;border:1px solid #c0c0c0;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}ul{list-style:none;    }

That's All!!! You have begun Using Data Collections in AngularJS . In the next article we will continue to learn Step by Step about Filtering Data in an AngularJS Collection  . 
Happy programming.....
      by Carmel Schvartzman


<<<< PREVIOUS LESSON                                                                  NEXT LESSON >>>>

כתב: כרמל שוורצמן

Posted by
Labels: , ,

1 comment:

Subscribe to: Post Comments (Atom)