The Angular Club: April 2015

Tuesday, April 14, 2015

#8 - Filtering Data in an AngularJS Collection

In this article we review Filtering Data in an AngularJS Collection, by developing an Angular App containing a searchable list of items .
This is the Lesson #8 in the "AngularJS: From 0 To 100" learning tutorials written for absolute Beginners. This article is a continuation of the previous Controllers' Lesson #7 , so please take a look at it.
<<<< PREVIOUS LESSON NEXT LESSON >>>>

For this article we're using the "Brackets" free Web Editor , with support for developing AngularJS Apps . You can see the 5 minutes tutorial about it in this post.

In this post we'll write an AngularJS App , containing a Controller with the necessary behavior (functionality) to populate an HTML5 list from data in JSON format , and a text box to perform searches on that list at the View.
For now, this JSON collection will be hard-coded inside the Controller, but in further tutorials, it will be fetched from an OData RESTful Web Service using Ajax requests.
The AngularJS App will look this way :

Filtering Data in an AngularJS Collection

The first thing for us to do is to load the AngularJS framework and to declare our App :

<!doctype html><html data-ng-app="MusicApp"><head><title> Filtering Data Collections</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>

Then we code the data list as we did in our previous lesson , where we exhaustively explained it:

Filtering Data in an AngularJS Collection 3

<body> <div class="centered"> <h1>Fragile State Discography</h1> <h2>Neil Cowley (Zero 7) and Ben Mynott</h2> </div> <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>

Next, we build the Controller, containing the data and the method that loads it inside the list:

Filtering Data in an AngularJS Collection 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"} ] $scope.fnShowAlbums = function(){ $scope.albums = albums; } }]);

Then, add the data-ng-click directive to call the Controller's method from the View:

Filtering Data in an AngularJS Collection 5

Run the App on the browser:

Filtering Data in an AngularJS Collection 6

And click the button to load the list:

Filtering Data in an AngularJS Collection 7

Finally, we need to add the filter to get only the data that fits to the user search, inside the data-ng-repeat directive. If you like, take a look at the official AngularJS documentation on $filter .

Therefore, append an input box to input the keyword for search, give it a data-ng-model , and add the expression "filter:" with the model to the repeat directive:

Filtering Data in an AngularJS Collection 8

Run the App:

Filtering Data in an AngularJS Collection 9

And perform a search:

Filtering Data in an AngularJS Collection 10

As you can see, AngularJS takes care automatically of your search, since the AngularJS engine knows where to go to reach the data for the list.

This is one of the fantastic features of AngularJS!!!

Filtering Data in an AngularJS Collection 11

This is the CSS3 style for this App, if you liked it and wanted 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; }input.search {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:190px;text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}div.centered{ text-align:center }

That's All!!! You have begun filtering Data Collections in AngularJS . In the next article we will continue to learn Step by Step how to create an HTML5 Form with Validation support and Error Messages using AngularJS.
Happy programming.....

by Carmel Schvartzman

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

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

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

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:

<!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:

Now create the Controller at the .js file:

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

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:

$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:

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:

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:

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

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

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

<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:

The list is dynamically displayed by Angular:

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 >>>>

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