Introduction to AngularJS

AngularJS: Introduction and Sample Programs

If you are an avid web developer you have probably been hearing about AngularJS recently. More and more folks are using it, and big businesses like Netflix, DoubleClick, Reddit, YouTube, and a slew of others including many financial firms have also begun using it for their in-house solutions. It has quickly become an internet sensation, and with good cause.

Quite simply, you can get so much done with just a few lines of code. The results are just awesome.

I remember back in early 2000, when I was working as a web developer I needed to write tons of lines of code to ensure that my application would work correctly on multiple browsers, primarily Netscape navigator which was starting to lose it’s prominence, Internet Explorer and Mozilla which was still fairly new. Then by 2006, JQuery started gaining momentum and changed all that.

I wanted to share with everyone how easy it is to build web pages using AngularJS. I will start a new series on Angular and take you through step by step, starting with simple concepts and then to more complex operations.

Let’s see what all the fuss is about now.

1. What is AngularJS

AngularJS is a full-featured Javascript SPA (Single Page Application) framework that allows you to extend the basic syntax of HTML. It does this by extending the HTML functionality by using Directives and binds data to HTML using expressions. Angular does this by introducing powerful ideas like dynamic data binding and dependency injection which are also present in other languages like Java, .NET and frameworks like Spring. All this amounts to reduced code while building more dynamic web pages.

Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together. By using dynamic data binding, Angular ensures that model and view are kept in sync. The sample example below demonstrates this concept.

1.1 User Base

User base is one of the most important factors to consider when choosing any framework. A large user base means more information sharing, more questions being answered, more third-party modules, more tutorials…you get the idea. AngularJS certainly has enough support to survive and thrive and with Google providing a dedicated team contributing to its development its future seems very bright.

I have put together Google Trends data which shows that Angular is definitely the winner here.

2. What you need to get started

If you want to take the minimalistic approach, then you don’t really need to download or install anything to start using it. Simply make use of AngularJS by using the ajax.googleapis.com url as your source. See below:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js">

then go ahead and define your HTML page like the sample below:

2.1 Hello World using AngularJS

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World using AngularJS</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js">
    </script>
</head>

<body>
    Please enter your text: <input type="text" ng-model="mytext"/>
    <h1>Hello {{ mytext }}</h1>
</body>
</html>

2.2 TRY ME — Live Demo

2.3 ng-app

Did you notice the use of ng-app directive within the <html> tag? This attribute does not necessary have to reside in the <html> tag, it may also be in the <body>, <div> or any other tags. The point is, once it is found this directive is used to initialize the AngularJS application. It will be used to auto-bootstrap the application and enable it’s functionality.

<html id="ng-app" ng-app>

2.4 ng-model

This directive is used to bind the view to the model. In this example, the {{ mytext }} expression is bound (synchronized) with the AngularJS data element in the model by using the ng-model=”mytext” in the input field. Now, whenever the value of the input field changes, Angular will automatically change the model mytext associated with it. In addition, if the value in the model changes in any way, than Angular will change the value of the input field. This is called two way data binding and is one of the key features of AngularJS.

2.5 Expressions

Notice how expressions are used in Angular. We use the double curly braces {{ mytext }}.

<h1>Hello {{ mytext }}</h1>

As another example, consider the following: Total: {{ quantity * price }}..

<body>
  Quantity: <input type="number" ng-model="quantity"/>
  Unit Price: <input type="number" ng-model="price"/>

  Total in dollar: {{ quantity * price }}
</body>

3. Formatting Using Filters

AngularJS provides several useful filters for transforming data: currency ($1,287.43), number (ie. 123.32, 143.2345. 182), date, json, uppercase, lowercase, limitTo and orderBy. In the case, where these are not enough, you may build additional custom filters.

3.1 General Syntax

When using filters you typically use the following syntax:

{{ expression | filter  }}

You can also, chain them together by using the pipe (“|”) symbol and then adding the additional filter.

{{ expression | filter1 | filter2 }}

3.2 Adding Filters to Directives

We can add filters to directives as well, as seen below. We will cover this in more depth in our next tutorial on ng-controller, ng-repeat and other directives. For now, simple knowing this will suffice.

<div ng-app ng-controller="BooksController as store">
  <ul>
    <li ng-repeat="book in store.products | orderBy:'title'">
    {{ (book.title | uppercase) + ', ' + book.author + ', ' + book.isbn }}
    </li>
  </ul>
</div>

4. Currency and Number Filters

In this example, we will cover additional formatting options using the currency filter, a number filter with 4 digits decimal precision, and a number filter with no decimals. See below, and notice how easy and clear the code is. One of the things that differentiates AngularJS framework from the others is how readable and maintainable the code is.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Built-In Filters</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js">
    </script>
</head>

<body>
  <table>
    <tr>
       <td>Please enter your mortgage amount:</td>
       <td><input type="number" ng-model="mortgage_amount"/></td>
    </tr>
    <tr>
       <td>Please enter your bond amount:</td>
       <td><input type="number" ng-model="bond_amount"/></td>
    </tr>
    <tr>
       <td>Please enter your order amount: </td>
       <td><input type="number" ng-model="order_amount"/></td>
    </tr>
    <tr>
       <td>Mortgage Amount:</td>
       <td>{{ mortgage_amount | currency }}</td>
    </tr>
    <tr>
       <td>Bond Amount:</td>
       <td>{{ bond_amount | number:4 }}</td>
    </tr>
    <tr>
       <td>Order Amount:</td>
       <td>{{ order_amount | number:0 }}</td>
    </tr>
</table>
</body>
</html>

4.1 TRY ME — Live Demo

5. Additional Filters — Date, Upper, Lower and LimitTo

Now lets move on to the final set of filters will will be covering in this intro tutorial. Let’s look at the Date, uppercase, lowercase and the limitTo filters. In addition, the last filter actually shows you how to chain multiple filters together.

date

{{ date_expression | date[:format] }}

‘yyyy’: 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
‘yy’: 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
‘y’: 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
‘MMMM’: Month in year (January-December)
‘MMM’: Month in year (Jan-Dec)
‘MM’: Month in year, padded (01-12)
‘M’: Month in year (1-12)
‘dd’: Day in month, padded (01-31)
‘d’: Day in month (1-31)

For a full list of format options, please refer to the AngularJS API Reference …

uppercase

Formats a string to uppercase

{{ expression | uppercase }}

lowercase

Formats a string to lowercase

{{ expression | lowercase }}

limitTo

Limits the number of characters in a string or elements in an array to the length specified. If the length is negative, then you will limit number of items from the end of the string or array.

{{ expression | limitTo[:[+-]length] }}

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Date, Uppercase/Lowercase, limitTo Filters</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js">
    </script>
</head>

<body>
  <table>
    <tr>
      <td>Please enter today's date (YYYY-mm-dd):</td>
      <td><input type="date" ng-model="today"/></td>
    </tr>
    <tr>
      <td>Please enter your full name:</td>
      <td><input type="text" ng-model="name"/></td>
    </tr>
    <tr>
      <td>Please enter huge text string: </td>
      <td><input type="text" ng-model="long_string"/></td>
    </tr>
    <tr>
      <td>Formatted Date:</td>
      <td>{{ today | date : 'EEEE MMMM d, yyyy' }}</td>
    </tr>
    <tr>
      <td>Full Name (uppercase):</td>
      <td>{{ name | uppercase }}</td>
    </tr>
    <tr>
      <td>Full Name (lowercase):</td>
      <td>{{ name | lowercase }}</td>
    </tr>
    <tr>
      <td>Your long string (limited to 10 characters):</td>
      <td>{{ long_string | limitTo:10 }}</td>
    </tr>
    <tr>
      <td>Limited Full Name (uppercase[6]):</td>
      <td>{{ name | uppercase | limitTo:6 }}</td>
    </tr>
    <tr>
      <td>Limited Full Name (uppercase[-6]):</td>
      <td>{{ name | uppercase | limitTo:-6 }}</td>
    </tr>
  </table>
</body>
</html>

5.1 TRY ME — Live Demo

6. There you have it!

Now, that we’ve shown you how easy it is to develop in AngularJS you can begin playing around on your own. There is still a lot more material to learn, but we will show you in subsequent posts in this series. Stay tuned for more and enjoy!

Update: AngularJS Controller Tutorial is now available !