What Everyone Needs to Know About AngularJS

AngularJS Introduction

In this article I will introduce AngularJS a JavaScript framework which allows you fast production ready code development. AngularJS was released in 2012 and it is a widespread tool for JavaScript development.

AngularJS let’s you use HTML as your templating language

Why should I care?

Because AngularJS is easy to use and has a lot of pre-built features you can easily integrate into your application. So you do not need to re-invent the wheel yourself. And as I’ve written previously you have the power of speed in your development.

Advantages of AngularJS

Let me list some of the advantages of AngularJS:

• Provides capability to create Single Page Applications in a very clean and maintainable way (because it provides reusable components).
• Provides data binding capability to HTML: it gives user a rich and responsive experience.
• Utilizes dependency injection and make use of separation of concerns.
• In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
• AngularJS code is unit testable.

[sociallocker]Download angular sample code [/sociallocker]

Disadvantages of AngularJS

Every coin has two sides. This is true for AngularJS too. Because it is a JavaScript framework it can be disabled by the users: if JavaScript is not enabled only the basic page (the template) is visible, the directives and expressions do not work.

Looking at the image above this is not the best impression you can give your customers, is it?

The second disadvantage is that AngularJS is not secure. This means you have to use server side authentication and authorization to keep your application secure.

An example

And if you won’t trust me, here is a simple example to get you started:

 

If you copy this code into an HTML file and open it up in your browser you will have a working AngularJS application which greets you when you type in your name — without any need to push a button.

The result should look something like this:

Explaining the example application

Now it is time to examine the example application thoroughly.

The first interesting part is that you can include AngularJS like any other JavaScript file with the script tag. Currently the latest stable (and released) version is 1.4.3:

To have AngularJS work its magic you need to define an AngularJS application. You can do this with the ng-app directive. In the example above the application/module has no name, but for later usages when you want to add some logic in separate JavaScript code it is essential to name your module. For example to have the example the name MyModule just change the div tag to the following:

In this case the ng-app directive tells AngularJS that this div tag is the owner of the application so you can reference everything under the hood of this module inside this div. If you give a name to your app, then AngularJS requires a JS file which defines your application — even if it contains only that one definition:

var application = angular.module('MyModule', []);

If you miss this you will get an error like this:

Module 'MyModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

To bind the value of the input field to the variable name with the ng-model directive just do the following:

Name:

 

Hello {{name}}!

Lastly we use the {{name}} expression to display the value bound to the name variable.

The concepts behind AngularJS

The image below shows the main concepts of AngularJS:

This article will not cover every one and which we look at we won’t cover in the full depth. But I will give you the necessary introduction to get started with development using AngularJS.

In this article I will use data bindings, expressions and filters.

Data binding in the example application

We can switch the exampple application to use data binding instead of an expression to display the name to greet (the value of the input field).

To do this, change the paragraph to the following:

Hello World!

 

In this case we bind the value to an HTML tag. This enables to add some default values to the tag to show the user a nice looking website even when they disabled JavaScript in their browser.

Initializing data

AngularJS provides a possibility to initialize data for your application with a directive. This directive is called ng-init. Let’s extend our application and add some colors to it — and initialize them with this new directive:

I used JSON syntax to define the array of colors used by this example.

Now it is time to show the users available colors. Let’s start with a simple display and extend it later to do something visible and more complex.

AngularJS is a templating language so we want to use only a minor amount of lines to display a list of elements. The defined colors aren’t too much currently but imagine you want to display a drop-down list of available countries. Well, this would have some <option> entries — and you can leverage this with AngularJS. But let’s get back to our example:

Available colors

 

• • {{color.name + ‘ (‘ + color.code + ‘)’}}

 

The code above creates an unordered list with the values of the colors variable.

Now let’s do some more interesting with the colors: let the user change the color of something using the list of colors defined.

Select a color

Currently selected: {{ selectedColor.name + ‘ (‘ + selectedColor.code + ‘)’ }}

The code snippet above creates a drop-down (select) box from the available colors and binds the selected color to the selectedColor variable which is used to set the background color of the div element below the selection. In this case you needed less code than previously and you get more complex result because the developers of AngularJS found that some HTML elements can be enhanced with some magic to make it more readable in code. This is the power of AngularJS.

Filters

Sometimes you have a list of elements and you want to enable the user to filter that list to see if it contains anything of interest. I will apply a filter for the list of available colors.

Filter some colors:

Sometimes you have a list of elements and you want to enable the user to filter that list to see if it contains anything of interest. I will apply a filter for the list of available colors.

Filter some colors:

• • {{color.name + ‘ (‘ + color.code + ‘)’}}

 

 

The code example above displays the same colors as previously and enables filtering. The filter directive filters per default on every field available for the displayed item. In this case it filters for name andcolor too:

Expressions

Finally some words about expressions. You have already seen those: between two pairs of curly braces. They bind application data to HTML and they behave similar to ng-bind directives. The expressions are pure JavaScript expressions and they output the data where they are invoked.

For example the expression

2*3 is {{ 2*3 }}

evaluates in the browser to 2*3 is 6.

Conclusion

AngularJS is a powerful JavaScript framework which enables you fast HTML templating and easy code-execution.

This article could not cover the whole might of this framework but I hope you get the idea to get started and build your own applications using AngularJS. We scratched the surface with including AngularJS in our HTML code. The next step would be to add custom controllers to move the logic from the HTML template to a separate JavaScript file.

You can find the examples glued together (however only with AngularJS 1.2.1) on JSFiddle here.