Getting Started with AngularJS

Introduction to AngularJS

AngularJS is a client-side JavaScript framework. It is a JavaScript library used for Single Page Applications. It uses HTML DOM elements to make it more responsive and fast. The good thing about AngularJS is that it is a free open source framework. It binds with HTML attributes by making use of simple expressions. AngularJS also supports MVC design and uses two-way data binding which provides synchronization between Model and View.

AngularJS is distributed like JavaScript. You can include AngularJS by using simple script tags.

You can easily get started with AngularJS if you have the basic knowledge of HTML, CSS, JavaScript, and AJAX.

AngularJS Official Logo
Official Logo

Basic Building Blocks

1- Directives

As AngularJS extends HTML with ng-directives. For AngularJS application, use ng-app directive. To bind the value of HTML controls i.e. input, select and textarea to your AngularJS application, use ng-model directive. To bind application data to HTML view, use ng-bind directive.

Understanding ng-app, ng-model, and ng-bind directives consider the following example.

ng-app

ng-model

To bind an input field with the application for further use:

ng-bind

To bind text field data with the view:

Complete Code

When you run this example, the paragraph will immediately display the data from the text field as the input field is bind to the paragraph.

Output

If you want to know more about AngularJS directives and Filters, click here.

To read AngularJS API References, click here.

Custom Directives

You can also add custom directives to your application. With these directives, you can add more features to your customised application by using directive(<name> ,  function(){<do something>}); constructor. To understand the concept lets create a simple Hello World directive.

Output

In the above example, module setter is used, and the directive returns a Hello World! message, which is then displayed in the app.

Continue reading to understand the concept of the module.

2- Expressions

AngularJS expressions are an alternate of the ng-bind directive. Expressions also bind the AngularJS data to HTML. To use AngularJS Expressions, write expressions in double braces:

{{ expression }}

The data will be displayed exactly where the expression is placed. To understand the concept of expression modify the previous example and write the expression instead of using ng-bind.

Complete Code

Output

Difference between ng-bind and expression

The only difference is that ng-bind is used as an attribute, but the expression is used as a value.

ng-bind

expression

3- Modules

The AngularJS Module act as a container for all the components of the application i.e. Controllers.

To create an AngularJS module, use angular.module() method.

Setter and Getter

AngularJS module uses setter and getter.

Setter:

With the setter, you can include all other dependencies as arrays.

Getter:

The getter is used to create Controllers, Directives, Services and other Angular features. For the getter, we omit the dependencies array part as we only need to reference the existing module i.e. app.

Bootstrap

To tell the AngularJS where to bootstrap you will need to bind ng-app with the module.

4- Scopes

Scopes plays an important role in all the programming languages. In AngularJS, scopes provide two-way data-binding cycles to maintain application state by holding synchronised data. It acts as a bridge between JavaScript and HTML DOM. We use scopes to bind data from the controller to view so only controllers contain scope. To understand the scope, create a scope in the controller and display it using the expression.

$rootscope is another type of scope which is the top level scope. When AngularJS starts the rendering process of the application, it first creates the $rootscope object and then places all the $scope objects as the children of $rootscope.

 

5- Controllers

The Controller allows the user to interact with model and view. It synchronizes the user interface with the model. In AngularJS controller acts as a bridge between business logic and the presentation logic. We already used the controller in scopes example as ng-controller to display the scope data through expression. The

The controller accepts two parameters; first one is the name of the controller and the second one is the call-back method.

Creating a Controller

There are two possible ways of creating a controller.

Chaining up the Controller with Call-back Method

Separating Call-back Method and Controller

6- Filters

AngularJS also provides the functionality to add filters for arranging and transformation of the data.

  • currency transforms the data into the currency format.
  • date  transforms the date into specified date format.
  • filter Select a subset of the items from an array.
  • json transforms the object to a JSON string.
  • limitTo Limits an array or string to a specified number of elements or characters.
  • lowercase transforms the specified string to lowercase.
  • uppercase transforms a string to upper case.
  • number transforms a number to a string.
  • orderBy Orders an array by the specified expression.

Add Filter to an Expression

To add a filter to an expression |  symbol is used. For better understanding take a Name and convert it to uppercase.

Complete Code

Similarly, you can also add filters to directives as well.

Custom Filters

AngularJS also provides facility to create custom filters by using filter(‘name’, function() { <do-something> }); constructor.

 

To debug AngularJS applications, use ‘ng-inspector for AngularJS’ andAngularJS Batarang (Stable)’ with Google Chrome.

 

Hope that you like this tutorial, Stay tuned for more upcoming tutorials. Stay Blessed!

2 thoughts on “Getting Started with AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *