The Angular Club: January 2015

Monday, January 26, 2015

#3 - What are Models and Data Binding in AngularJS

In this article we describe What are Models and Data Binding in AngularJS, using a very simple AngularJS App, to give you an idea on how to perform Data Binding and where you can find AngularJS documentation about it .
This is part #3 in the "AngularJS: From 0 To 100" series written for absolute Beginners. The Lesson #1 can be found here.

<<<< PREVIOUS LESSON NEXT LESSON >>>>
We're using here the open-source Brackets Web Editor, lightweight, powerful and optimized for AngularJS . A Brackets 5 minutes' setup tutorial can be seen in this post.
Models are AngularJS Directives used to Data Bind between :
1) an HTML5 element : input (email checkbox radio text password number button date url month day time) - select - textarea , for one side.
2) an AngularJS Property and Expression
The official AngularJS documentation for Models and Data Binding can be found in the AngularJS web site.
For this tutorial we'll build an AngularJS List , and dynamically perform Data Binding between a textarea , and an AngularJS Expression.
Our AngularJS App will look like this:

What are Models and Data Binding in AngularJS

In the MVC (Model - View - Controller) architecture, the Model stands for holding the data, while the Controller is for interactions' logic (business and application logic) . The View (the HTML5) is just the presentation layer.
We'll add to our HTML5 the AngularJS framework and the data-ng-app directive:

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

Also we'll write some CSS3 to take care of the design:

What are Models and Data Binding in AngularJS 2

textarea , div[id$=results]
{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:99%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{padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;width:99%text-align:center;background:#fed; border:10px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}

Now we'll create an Angular Model to take care of the data, using an Angular List as follows:

What are Models and Data Binding in AngularJS 3

<div> <h3>My Favorite Fragile State Songs :</h3>
<textarea data-ng-model="FavoriteTracks" data-ng-list="," data-ng-trim="false" cols="70" rows="10">
</textarea>

As you see, the data-ng-model sets the Model's name, and the data-ng-list directive contains the separator between the phrases. Each phrase will occupy a different cell in the List. The data-ng-trim tells Angular to ignore the white space inside the album's names. We'll build this AngularJS List , and dynamically perform Data Binding between a textarea and an AngularJS Expression, through that List. So let's add also the Expression where to display the data:

What are Models and Data Binding in AngularJS 4

<pre><b>Selected Songs : (Json Array representation)</b><br></pre>
<div id="results" title="{{ FavoriteTracks }}" >
<pre>
<b><i>{{ FavoriteTracks | json }}</i> </b>
</pre>
</div>

Notice that we can use the AngularJS expression inside the "{{}}" brackets also into the "title" of the div element, meaning the tooltip that the user can see when hovering over the element.

Run the App by clicking on the "Live Preview" of Brackets:

What are Models and Data Binding in AngularJS 5

To see the data binding in action , just type the names of the "Fragile State" albums , separated by commas:

What are Models and Data Binding in AngularJS 6

You will see that while you type and/or erase albums, the List, in JSON representation will be altered accordingly:

What are Models and Data Binding in AngularJS 7

That's the magic of AngularJS!!! You have begun using Models and Data Binding in AngularJS . In the next article we will learn Step by Step What are Controllers in AngularJS.
Happy programming.....
by Carmel Schvartzman

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

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

Saturday, January 24, 2015

#2 - What are Directives in AngularJS?

In this article we describe What are Directives in AngularJS, using some of them in a very simple AngularJS App , to give an idea of how to use them and where you can find documentation and examples .
This is part #2 of the "AngularJS: From 0 To 100" series developed for absolute Beginners. The Part #1 can be found here.
For this series of tutorials we'll be using the open-source Brackets Web Editor, which is lightweight, powerful and optimized for AngularJS . The Brackets 5 minutes' setup can be seen in this post.

For this article we'll create an AngularJS List , dynamically bound to an input textarea , and a button bound to an AngularJS Expression.
Our AngularJS App will look like this:

What are Directives in AngularJS?

The simple AngularJS App that we're building will be based on the one at Tutorial #1:

Please copy-paste the HTML5 code that can be found at that Tutorial #1.

First thing we will do is to check the AngularJS framework is loaded: just click on the "Live Preview" button at the top right side of Brackets, and see if the browser displays the prices:

If there are no prices, just check that you added the "data-ng-app" Directive to the <html> tag:

The "data-ng-app" Directive is used to bootstrap an AngularJS App. Here you can find the documentation.

Provided that everything is ok so far, we'll create a button and use an "data-ng-click" Directive, which documentation you can see here in the AngularJS official site. Then add the HTML5 code for the button and the output span tag:

The code is this (copy-paste to your App):

<div >

<button data-ng-click="likes = likes + 1" data-ng-init="likes=0">

Like!!!

</button>

<span >

Likes: {{likes}}

</span>

</div>

The "data-ng-click" Directive states the javascript code to be run on click (just adding 1 to the counter), and the "data-ng-init" Directive sets the initial value of the "likes" data Model:

Now you can run the App and see at the browser how the counter can be updated per click:

Next, we'll add a textarea and an AngularJS Expression, to build and output an Array of the typed songs , in Json format: as it can be seen at the AngularJS official documentation, we'll make use of the directives data-ng-model , data-ng-list and data-ng-trim :

The first one is used to BIND some HTML input element (text, checkbox, radio,week, month, time, number, email, url, date, select and textarea) to some property: in our case, the property will be called "FavoriteTracks". More details, at the documentation.
The second directive sets what sign will represent the separator in the list: " , " in our case.
The last one says to the AngularJS engine to keep white spaces, thus including them in the phrases.
Add the TextArea and the {{ Expression }} :

The code is the following (copy-paste to your App):

<div>
<h3>My Favorite Fragile State Songs :</h3>

<textarea data-ng-model="FavoriteTracks"
data-ng-list=","
data-ng-trim="false"
cols="60" rows="10">
</textarea>

<pre><b>Json Array of Selected Songs : </b><br>{{ FavoriteTracks | json }}</pre>

</div>

Press again the "Live Preview" icon to see the HTML in the browser:

Now type one by one your favorite songs, with an " , " separator, to see the dynamic construction of a Javascript Array. Notice that you can also delete some songs, to see the resulting list:

And the final AngularJS View will show as follows:

The entire AngularJS HTML5 code is this:

<!doctype html>
<html data-ng-app>
<head>
<title>
My First AngularJS App
</title>
<style>div{width:500px;margin:0 auto;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
</head>

<body>
<h1>Fragile State Discography</h1>
<h2>Neil Cowley (Zero 7) and Ben Mynott</h2>
<ol>
<li ><img src="Nocturnal.jpg" >
<span id="no-fractions">Nocturnal Beats {{11.8 | currency:"USD$":0}} </span>
</li>
<li ><img src="Facts.jpg" >
<span id="fractions">The Facts And The Dreams (2003)
{{12.7 | currency:"USD$"}}</span>
</li>
<li ><img src="Voices.jpg" >
<span>Voices From The Dust Bowl (2004) {{10.4 | currency}}</span>
</li>
<li ><img src="Pretz.jpg" >
<span>Soundcastles (2006) {{9.9 | currency | uppercase}}</span>
</li>
</ol>
<div >
<button data-ng-click="likes = likes + 1" data-ng-init="likes=0">
Like!!!
</button>
<span >
Likes: {{likes}}
</span>
</div>
<div>
<h3>My Favorite Fragile State Songs :</h3>

<textarea data-ng-model="FavoriteTracks"
data-ng-list=","
data-ng-trim="false"
cols="60" rows="10">
</textarea>

<pre><b>Json Array of Selected Songs : </b><br>{{ FavoriteTracks | json }}</pre>

</div>

</body>
</html>

That All!!! You have begun using the AngularJS Directives . In the next article we will learn Step by Step What are Models and Data Binding in AngularJS.
Happy programming.....

  by Carmel Schvartzman

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

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

Monday, January 19, 2015

#1 - First AngularJS Application For Beginners in 10 minutes

In this article we describe Step by Step How to create a First AngularJS Application For Beginners in 10 minutes, with a very simple AngularJS setup and introducing AngularJS Expressions and Filters .
This is the Part #1 of the "AngularJS: From 0 To 100" series designed for absolute Beginners.
For this tutorial we'll make use of the open-source Brackets Web Editor, which is lightweight, powerful and very AngularJS friendly. The Brackets installation is explained in this post.
Our AngularJS App will look like this:

First AngularJS Application For Beginners in 10 minutes

The simple AngularJS App that we're building here will look as follows:

First thing we need to do is to get the AngularJS framework. But instead of downloading it to our machine, we'll load the script using CDN (Content Delivery Network) . Browse to the official AngularJS web site :

First AngularJS Application For Beginners in 10 minutes 2

Click on the "Download" button:

First AngularJS Application For Beginners in 10 minutes 3

Here choose the latest Branch (version) "Minified" and copy the "CDN" URL: that will give us access to the latest AngularJS version at the GoogleAPIs Ajax library:

First AngularJS Application For Beginners in 10 minutes 4

Don't press the "Download" button: you don't need the AngularJS in your local machine.
Open Brackets and type the following HTML:

First AngularJS Application For Beginners in 10 minutes 6

Insert the CDN AngularJS script that you copy before, and add the AngularJS "ng-app" directive to the HTML tag:

First AngularJS Application For Beginners in 10 minutes 7

Now we'll continue building our example with some headings...

First AngularJS Application For Beginners in 10 minutes 8

...and a list of the high quality "Fragile State" discography:

First AngularJS Application For Beginners in 10 minutes 9

At the top-right Brackets menu, press the "Live Preview" icon to see the HTML in the browser:

First AngularJS Application For Beginners in 10 minutes 10

Next , we'll use some AngularJS Expressions and Filters to add the album's prices.
AngularJS Expressions is code inside double brackets {{ expression }}: take a look at the documentation in the AngularJS web site :

First AngularJS Application For Beginners in 10 minutes 11

There is also an example there:

First AngularJS Application For Beginners in 10 minutes 12

We'll use AngularJS expressions together with Filters , so read the AngularJS Filters documentation:

In order to show the prices we'll use the Expressions and Filters as follows:

First AngularJS Application For Beginners in 10 minutes 13

This AngularJS expression tell simply that the price is "11.8" , and the Filter says that is "currency" with the type "USD$" , and that there will not be fractions, the price being therefore rounded upwards.

We'll append also expressions for the other prices, but this time , using fractions :

First AngularJS Application For Beginners in 10 minutes 14

Because you enabled the Brackets "Live Preview", every time you SAVE the HTML file, the browser is automatically refreshed:

First AngularJS Application For Beginners in 10 minutes 15

First AngularJS Application For Beginners in 10 minutes 16

And the final AngularJS View will be as follows:

First AngularJS Application For Beginners in 10 minutes 17

The full AngularJS HTML code is here , to copy-paste:

<!doctype html>
<html ng-app>
<head>
<title>
My First AngularJS App
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
</head>
<body>
<h1>Fragile State Discography</h1>
<h2>Neil Cowley (Zero 7) and Ben Mynott</h2>
<ol>
<li ><img src="Nocturnal.jpg" >
<span id="no-fractions">Nocturnal Beats {{11.8 | currency:"USD$":0}} </span>
</li>
<li ><img src="Facts.jpg" >
<span id="fractions">The Facts And The Dreams (2003)
{{12.7 | currency:"USD$"}}</span>
</li>
<li ><img src="Voices.jpg" >
<span>Voices From The Dust Bowl (2004) {{10.4 | currency}}</span>
</li>
<li ><img src="Pretz.jpg" >
<span>Soundcastles (2006) {{9.9 | currency | uppercase}}</span>
</li>
</ol>

</body>
</html>

That All!!! You have begun using the AngularJS javascript framework . In this article we learned Step by Step How to create a First AngularJS Application For Beginners in 10 minutes.
In the next article we will learn Step by Step What are Directives in AngularJS.

Happy programming.....

by Carmel Schvartzman

NEXT LESSON >>>>

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

Friday, January 9, 2015

HTML5 Markup Validation for AngularJS

In this article we describe Step by Step How to perform HTML5 Markup Validation for AngularJS in 5 minutes, by validating a sample AngularJS HTML5 View markup , and introducing the W3C Online Markup Validator .
Angular JS Views are written in HTML5 . HTML5 is a computer language and as such it has its own vocabulary, syntax and grammar. However, sometimes the documents written in HTML5 do not follow those grammar rules, and therefore they are considered invalid HTML5 files.
The process of verifying whether an HTML5 document follows the language grammar and rules is called "Validation". Validity is a quality criteria for an HTML5 web page.

We'll use the best HTML5 validator: the online free tool by the W3C consortium: the HTML5 Markup Validator :

HTML5 Markup Validation for AngularJS

First thing to do is to browse to the HTML5 Markup Validator :

Here select the "Validate by direct input" tab:

Open your AngularJS View:

Copy the AngularJS View and paste it inside the textarea at the W3C Markup Validator:

Click the "Check" button, and you will receive a bunch of validation errors:

Scroll down the web page to see the errors that the tool found:

As you can see, the errors found refer to an Attribute not found in HTML5 grammar. Let's fix it by replacing all "ng-xxx" directives with "data-ng-xxx":

Again, copy-paste the markup into the Validator:

Use the tool again to find that the HTML5 document is now "valid" :

That All!!! In this article we learned Step by Step How to perform HTML5 Markup Validation for AngularJS in 5 minutes.
Happy programming.....

by Carmel Schvartzman

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

Monday, January 5, 2015

What are Single Page Applications (SPA) for mobile and tablets

In this article we describe What are Single Page Applications (SPA) for mobile and tablets .

From years now, everything has been moving from the realm of desktop applications to the world of Web Apps. More than ever, since the apparition of mobiles and tablets. However, nowadays web applications are facing many problems , like bad user experience due to web page re-rendering, poor application performance because of page reloads and data transmission over the wire, and lack of offline support ( slow server connections imply unresponsive user interface ).

What are Single Page Applications (SPA) for mobile and tablets

Single-page applications (SPA), also called single-page interfaces (SPI), are web applications built all over a single one web page, with the goal of replicating a desktop environment in the web browser. That is achieved by means of rendering all SPA code on a single load, and calling the server ONLY when there is need of preserving data. SPAs can be run on different kinds of devices like smartphones, tablets and of course standard desktops. SPAs use specialized frameworks like AngularJS, Knockout and more, written in JavaScript , and they do not require page reloading .

Some examples of SPAs are Gmail, iCloud, Google Drive, Google Maps, Hotmail, GitHub, and Soundcloud . The term "SPA" was first used by Steve Yen in 2005, and the first known experiments on Single Page Applications date from the 2002 Stuart Morris self-contained website (visit it at slashdotslash (works only on IE6) ) , and from the US patent made by Lucas Birdeau, Kevin Hakman, Michael Peachey and Evan Yeh , which describes a SPA implementation.

SPA apps have many important features like:

1) SPA apps respond like desktop applications : this is achieved by moving data and processing from the server to the client, and by moving the business logic from server to client : this way, only data validation and permanent storage are located on server side.

2) SPA's bandwidth is minimal : the communication with the server is made in small quantities via Ajax , using the economic JSON sintax.

3) SPA renders like desktop applications : since there are not round-trips to retrieve HTML.

4) SPAs are accessible applications : users can use SPAs on tablets, laptops, smartphones, etc.

5) SPAs keep working offline : a SPA can go offline if the server connection falls, and synchronize later the browser data with the server .

6) SPAs do not need to download updates : all that users need to do to update their apps, is to reload the browser to automatically load the latest version.

7) SPA's Navigation between "different" pages is immediate: no page reloading is necessary, since the "new" pages are generated by the SPA on the fly, without loading HTML from the server.

8) SPAs are cross-platform: of course, a SPA works on any operating system .

SPAs are built upon the MVVM architecture , a two-way data binding software pattern, which goal is to isolate the UI (the View) from the business logic (the Model), making data transfers using an intermediate ViewModel and Binder in the middle, to synchronize the data updates between the View and the Model layers. The ViewModel code replaces the MVC Controller, and makes automatically all data synchronization, without any knowledge about which View is being exposed, or where is the data coming from. This later is very useful for testing purposes.

Schematically, the MVVM architecture can be put this way:

View:
holds the user interface or presentation layer UI , with all declarative bindings

ViewModel:
stands in the middle between the View and the Model, holds unsaved data, and handles the application/presentation logic : as for MSDN, the ViewModel

"decouples the View from the Model, and consolidates the business logic into the ViewModel and the Model where it can be tested"(MSDN)

If you feel a little confused on what the difference between presentation logic and business logic is, think it this way : Business logic manages data, while presentation logic manages users behaviors.

Model:
holds data validation & business logic, and addresses the server for data read & storage:

What are Single Page Applications (SPA) for mobile and tablets 1

What are Single Page Applications (SPA) for mobile and tablets 2

In an specific Single Page Application step-by-step tutorial , we explained how to build a SPA web application in only 10 minutes , using Visual Studio 2012 templates :

What are Single Page Applications (SPA) for mobile and tablets 3

In this SPA app, the ToDo items can be added, deleted or updated.

The data is preserved on database and, after the user is done and logs out, she/he can log in again, and see all personal Todo lists as they were saved on database on the last log out.

All the CRUD(Create Retrieve Update Delete) functionality will be hold in a SINGLE web page, while the server will be called only in case there is the need of preserving data on disk. This makes a fully functional SPA web application.

In this article we reviewed what a Single Page Application (SPA) is.
Happy programming.....

by Carmel Schvartzman

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