[Tutorial] Angular JS Javascript Framework Getting Started

By Team Clofus Innovations | Mon Jan 17 2022

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free. Before you study AngularJS, you should have a basic understanding of:

Html/css/js

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

The AngularJS Components:

  1. ng-app-This directive defines and links an AngularJS application to HTML.
  2. ng-model-This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind- This directive binds the AngularJS Application data to HTML tags.

angularjs

Example

<!doctype html>
        <html ng-app>
        <head>
        <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
        </head>
        <body>
          <div>
            <label>Name:</label>
            <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
            <hr />

            <h1>Hello {{yourName}}!</h1>
          </div>

        </body>
        </html>

Scope:

The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

<script>
        var mainApp = angular.module("mainApp", []);
        mainApp.controller("shapeController",function($scope) {
          $scope.message = "In shape controller";
          $scope.type = "Shape";
        });
        </script>

Root Scope:

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

<body ng-app="myApp">

        <p>The rootScope's favorite color:</p>
        <h1>{{color}}</h1>

        <div ng-controller="myCtrl">
        <p>The scope of the controller's favorite color:</p>
        <h1>{{color}}</h1>
        </div>

        <p>The rootScope's favorite color is still:</p>
        <h1>{{color}}</h1>

        <script>
        var app = angular.module('myApp', []);
        app.run(function($rootScope) {
        $rootScope.color = 'blue';
        });
        app.controller('myCtrl', function($scope) {
        $scope.color = "red";
        });
        </script>
        </body

Services:

AngularJS supports the concepts of “Separation of Concerns” using services architecture. Services are javascript functions and are responsible to do a specific tasks only.

There are two ways to create a service.

  1. factory
  2. service

By using factory method:

var mainApp = angular.module("mainApp", []);
        mainApp.factory('MathService', function() {
        var factory = {};

        factory.multiply = function(a, b) {
          return a * b
        }

        return factory;
        });

By using service method:

mainApp.service('CalcService', 
        function(MathService){
          this.square = function(a) {
            return MathService.multiply(a,a);
        }
        });

Routing:

Location service:

The $location service is very useful whenever you need to read or change the URL (or any part of it) in the browser. It can be configured to work in two modes: hashbang mode or HTML5 mode

Route sevice:

This service allows you to map different URLs to different views and react whenever there’s a match between a URL and a defined route. To work with the $route service, we need the ngRoute module which can be found in the angular-route.js file.

Contact Us

+91 72003 71486
173 TECCI Park, 6th Floor, OMR, Sholinganallur, Chennai, Tamil Nadu 600119.
*Please complete all fields correctly
Whats App