AngularJS: Basic Introduction [Beginner Tutorial]

Facebook Tweet LinkedIn Pin Print EmailShares

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.


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            myApp.controller('myAppController', function($scope){
                $scope.name = 'World';
            });
        </script>       
    </head>
    <body>
        <div ng-controller="myAppController">
            Name: <input type="text" ng-model="name" />
            <br />
            Hello {{name}}!
        </div>
    </body>
</html>

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.


ng-controller="myAppController"
ng-model="name"

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.


Hello {{name}}!
<br />
Hello <span ng-bind="name"></span>!

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


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('myAppController', function($scope){
                $scope.name = 'World';
            });
            
            myApp.controller('productsController', function($scope){
                $scope.company = {
                    name: "PepsiCo",
                    founded: "August 28, 1898",
                    products: [
                        {name:'Pepsi', sales:15},
                        {name:'Mountain Dew', sales:8},
                        {name:'Lay\'s Potato Chips', sales:7},
                        {name:'7 Up', sales:4},
                        {name:'Mirinda', sales:3}
                    ]
                };
            });
        </script>       
    </head>
    <body>
        <div ng-controller="myAppController">
            Name: <input type="text" ng-model="name" /></p>          
            Hello {{name}}!
            <br />
            Hello <span ng-bind="name"></span>!
        </div>
        
        <div ng-controller="productsController">
            <table style="border:1px solid #CCC; margin-top:10px">
                <tr>
                    <td>Name: </td>
                    <td>{{company.name}}</td>
                </tr>
                <tr>
                    <td>Founded: </td>
                    <td>{{company.founded}}</td>
                </tr>
                <tr style="font-weight:bold">
                    <td>Products</td>
                    <td>Sales</td>
                </tr>
                <tr ng-repeat="product in company.products | orderBy:'name'">
                    <td>{{product.name}}</td>
                    <td>{{product.sales | currency}} billion</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

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.

Share this:

Related posts: