Home » AngularJS3 July 2017

AngularJS: Basic Introduction [Beginner Tutorial]

This article presents a basic introduction to AngularJS 1.x. AngularJS is a free and open source Javascript Framework. It’s a frontend web application framework maintained by Google.

AngularJS follows the MVC (Model View Controller) approach of coding. Two way data-binding is a prominent feature of AngularJS which automatically synchronizes data between model and view components. This allows automatic updates in model whenever view changes and vice-versa. There are other great features like Dependency Injection, Services, Filters, Directives, etc.

First of all, let’s learn something about AngularJS Directive.

Directives are markers on a DOM element that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element.

Here are some of the built-in directives present in Angular JS:

ng-app: This directive starts any Angular JS application. It’s generally written in root element of the application.
ng-init: This directive defines initial values of application data.
ng-model: This directive binds the value of Angular JS application to HTMl input controls or bind value of HTML input field to Angular JS application variable.
ng-controller: This directive is used to define controller of the Angular JS application.
ng-repeat: This directive is used to loop collection (array or object).

Here’s the full list of Directive Components in ng.

In the above code, we have included Angular JS from CDNJS source. You can download this file to your local machine and update the script src with your local angular.min.js location so that you can work offline.

We have named our application as myApp using ng-app directive.

Inside the body html tag, we have also defined controller and model.

AngularJS uses modular approach of coding. angular.module() function is used to define an application. The module variable can then be used define controller.

$scope object is used to connect between AngularJS controller and views. It contains the data of ng-model directive. The $scope object is passed as argument to the AngularJS controller.

AngularJS Expression is used to bind application data to HTML view. This can be done either by writing expression inside curly double brackets like this {{expression}} or by using ng-bind directive.

In the above code, we have used both curly double brackets and ng-bind directives to print application data.

Below is another example of an AngularJS application that uses filter and ng-repeat directive.

In the above code, we have updated our previous example. We have just added new code that has company and its products as object data in the controller and that company name and products are displayed in view. ng-repeat is used loop through the company object and display its products.

We have used filters at two places. One is at the directive level where we sort (orderBy) the products by name. And the other filter is currency filter used while displaying the product sales data.

orderBy:'name' will sort the product name in ascending order. To sort it in descending order, we need to put hyphen (-) just before ‘name’, like this: orderBy:'-name'.

In this tutorial, we learned about some basics of directive, filter, data-binding, controllers in AngularJS.

Hope this helps. Thanks.


Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed