Author: saqibkhan

Angular Features
A list of most important features and benefits of Angular:

Angular supports multiple platforms

Angular is a cross platform language. It supports multiple platforms. You can build different types of apps by using Angular.
1. Desktop applications: Angular facilitates you to create desktop installed apps on different types of operating systems i.e. Windows, Mac or Linux by using the same Angular methods which we use for creating web and native apps.
2. Native applications: You can built native apps by using Angular with strategies from Cordova, Ionic, or NativeScript.
3. Progressive web applications: Progressive web applications are the most common apps which are built with Angular. Angular provides modern web platform capabilities to deliver high performance, offline, and zero-step installation apps.
High Speed, Ultimate Performance

Angular is amazingly fast and provides a great performance due to the following reasons:
1. Universal support: Angular can be used as a front-end web development tool for the programming languages like Node.js, .Net, PHP, Java Struts and Spring and other servers for near-instant rendering in just HTML and CSS. It also optimizes the website for better SEO.
2. Code splitting: Angular apps are fast and loads quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.
3. Code generation: Angular makes your templates in highly optimized code for today?s JavaScript virtual machines which gives the benefits of hand-written code.
Productivity

Angular provides a better productivity due to its simple and powerful template syntax, command line tools and popular editors and IDEs.
1. Powerful templates: Angular provides simple and powerful template syntax to create UI view quickly.
2. IDEs: Angular provides intelligent code completion, instant errors, and other feedback in popular editors and IDEs.
3. Angular CLI: Angular CLI provides command line tools start building fast, add components and tests, and then instantly deploy.
Full Stack Development

Angular is a complete framework of JavaScript. It provides Testing, animation and Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB.
1. Testing: Angular provides Karma and Jasmine for unit testing. B y using it, you can check your broken things every time you save. Karma is a JavaScript test runner tool created by Angular team. Jasmine is the testing framework form unit testing in Angular apps, and Karma provides helpful tools that make it easier to us to call our Jasmine tests whilst we are writing code.
2. Animation Support: Angular facilitates you to create high-performance, complex choreographies and animation timelines with very little code through Angular’s intuitive API.
3. Accessibility: In Angular, you can create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.
September 14, 2024

What is Angular 7?

Angular 7 is a JavaScript (actually a TypeScript based open-source full-stack web application) framework which makes you able to create reactive Single Page Applications (SPAs). Angular 7 is completely based on components. It consists of several components which forms a tree structure with parent and child components. Angular’s versions beyond 2+ are generally known as Angular only. The very first version Angular 1.0 is known as AngularJS.

“Angular is a complete rewrite of AngularJS by the same team that built AngularJS.”

What is Single Page Application (SPA)?

A single page application is a web application or a website which provides users a very fluid, reactive and fast experience similar to a desktop application. It contains menu, buttons and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server. That’s the reason behind its reactive fast speed.

Difference between AngularJS and Angular

AngularJS	Angular
AngularJS is common and popular name of the first version of Angular1.0.	Angular is common and popular name of the Angular’s version beyond 2+
AngularJS is a JavaScript-based open-source front-end web framework.	Angular is a TypeScript-based open-source full-stack web application framework.
AngularJS uses the concept of scope or controller.	Instead of scope and controller, Angular uses hierarchy of components as its primary architectural characteristic.
AngularJS has a simple syntax and used on HTML pages along with the source location.	Angular uses the different expression syntax. It uses “[ ]” for property binding, and “( )” for event binding.
AngularJS is a simple JavaScript file which is used with HTML pages and doesn’t support the features of a server-side programming language.	Angular uses of Microsoft’s TypeScript language, which provides Class-based Object Oriented Programming, Static Typing, Generics etc. which are the features of a server-side programming language.
AngularJS doesn’t support dynamic loading of the page.	Angular supports dynamic loading of the page.

Angular 7 vs Angular6 vs Angular2 vs Angular1

Angular1 was initially released in 2010. It was the first Angular version. It created a revolution in the web application development. It was a browser side JavaScript which was used within HTML code. It is popularly known as AngularJS.

Angular2 was a complete rewrite of Angular1. It was initially released in 2016. There is nothing common between Angular2 and Angular1 except the core developer’s team. Angular2, Angular 6 and Angular 7 are very similar to each other. Angular 7 is the latest version. It contains the extensive features of Angular2 and Angular6. These versions are known as Angular.

September 14, 2024

AngularJS HTML DOM

In AngularJS, some directives can be used to bind application data to attributes of HTML DOM elements.These directives are:

Directive	Description
ng-disabled	It disables a given control.
ng-show	It shows a given control.
ng-hide	It hides a given control.
ng-click	It represents an AangularJS click event.

ng-disabled directive:The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements. In the below code, it binds a model to a checkbox.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button  

button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show directive: The ng-show directive shows or hides an HTML element. In the below code, it binds a model to a checkbox.

<input type = "checkbox" ng-model = "showHide1">Show Button  

button ng-show = "showHide1">Click Me!</button>

ng-hide directive: The ng-hide directive hides or shows an HTML element. In the below code, it binds a model to a checkbox.

<input type = "checkbox" ng-model = "showHide2">Hide Button  

<button ng-hide = "showHide2">Click Me!</button>

ng-click directive: The ng-click directive counts the total clicks an HTML element. In the below code, it binds a model to a checkbox.

<p>Total click: {{ clickCounter }}</p>  

lt;button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

Let’s take an example to deploy the all above directives and test the variations:

See this example:

<!DOCTYPE html>  

<html>  

<head>  

      <title>AngularJS HTML DOM</title>  

</head>  

<body>  

      <h2>AngularJS Sample Application</h2>  

      <div ng-app = "">  

           <table border = "0">  

            <tr>  

               <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>  

               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>  

            </tr>  

            <tr>  

               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>  

               <td><button ng-show = "showHide1">Click Me!</button></td>  

            </tr>  

             <tr>  

               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>  

               <td><button ng-hide = "showHide2">Click Me!</button></td>  

            </tr>  

             <tr>  

               <td><p>Total click: {{ clickCounter }}</p></td>  

               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>  

            </tr>  

         </table>  

         </div>  

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

</body>  

</html>

September 14, 2024

AngularJS Select

In AngularJS, you can create a dropdown list (select box) based on items in an array, or an object.

Using ng-options

You should use the ng-option directive to create a dropdown list, based on an object or an array in AngularJS.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<select ng-model="selectedName" ng-options="x for x in names">  

</select>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];  

});  

</script>  

</body>  

</html>

Note:

You can also use the ng-repeat directive to make the same dropdown list as ng-options.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<select>  

<option ng-repeat="x in names">{{x}}</option>  

</select>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

        $scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];  

});  

</script>  

<p>The same example of dropdown list using the ng-repeat directive.</p>  

</body>  

</html>

ng-options vs. ng-repeat

Although, both can be used for dropdown list, but ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, while the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Consider that you have an array of objects:

$scope.cars = [  

    {model : "Ford Mustang", color : "red"},  

    {model : "Fiat 500", color : "white"},  

    {model : "Volvo XC90", color : "black"}  

];

Limitation of ng-repeat

The ng-repeat directive has a limitation that the selected value must be a string:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<p>Select a car:</p>  

<select ng-model="selectedCar">  

<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>  

</select>  

<h1>You selected: {{selectedCar}}</h1>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.cars = [  

        {model : "Ford", color : "red"},  

        {model : "Honda", color : "white"},  

        {model : "Volvo", color : "black"},  

        {model : "Hundai", color : "gray"}  

    ];  

});  

</script>  

</body>  

</html>

While using the ng-options directive, you can select an object value:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<p>Select a car:</p>  

<select ng-model="selectedCar" ng-options="x.model for x in cars">  

</select>  

<h1>You selected: {{selectedCar.model}}</h1>  

<p>It's color is: {{selectedCar.color}}</p>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

       $scope.cars = [  

        {model : "Ford", color : "red"},  

        {model : "Honda", color : "white"},  

        {model : "Volvo", color : "black"},  

        {model : "Hundai", color : "gray"}  

    ];  

  

});  

</script>  

</body>  

</html>

Use data source as an object

We can also use data source as an object.

Consider that you have an object with following key-value pairs:

$scope.cars = {  

        car01 : "Ford",  

        car02 : "Honda",  

        car03 : "Volvo",  

        car03 : "Hundai",  

    };

The expression in the ng-options attribute is a bit different for objects:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<p>Select a car:</p>  

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">  

</select>  

<h1>You selected: {{selectedCar}}</h1>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.cars = {  

        car01 : "Ford",  

        car02 : "Honda",  

        car03 : "Volvo",  

        car03 : "Hundai",  

    }  

});  

</script>  

</body>  

</html>

Example2:

The selected value will always be the value in a key-value pair.

The value in a key-value pair can also be an object:

$scope.cars = {  

car01 : {brand : "Ford", model : "Mustang", color : "red"},  

car02 : {brand : "Honda", model : "city", color : "white"},  

car03 : {brand : "Volvo", model : "XC90", color : "black"},  

car04 : {brand : "Hundai", model : "Creta", color : "gray"}  

};

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<p>Select a car:</p>  

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">  

</select>  

<h1>You selected: {{selectedCar.brand}}</h1>  

<h2>Model: {{selectedCar.model}}</h2>  

<h3>Color: {{selectedCar.color}}</h3>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.cars = {  

car01 : {brand : "Ford", model : "Mustang", color : "red"},  

car02 : {brand : "Honda", model : "city", color : "white"},  

car03 : {brand : "Volvo", model : "XC90", color : "black"},  

car04 : {brand : "Hundai", model : "Creta", color : "gray"}  

    }  

});  

</script>  

</body>  

</html>

September 14, 2024

AngularJS Tables

The ng-repeat directive is used to draw tables in AngularJS. Displaying tables with AngularJS is very easy and simple.

Let’s take an example. This example use ng-repeat directive to draw a table.

See this example:

<table>  

   <tr>  

      <th>Name</th>  

      <th>Marks</th>  

   </tr>  

   <tr ng-repeat = "subject in student.subjects">  

      <td>{{ subject.name }}</td>  

      <td>{{ subject.marks }}</td>  

   </tr>  

</table>

Displaying with CSS style

You can also style the tables by using CSS.

See this example:

<style>  

   table, th , td {  

      border: 1px solid grey;  

      border-collapse: collapse;  

      padding: 5px;  

   }  

     

   table tr:nth-child(odd) {  

      background-color: #f2f2f2;  

   }  

  

   table tr:nth-child(even) {  

      background-color: #ffffff;  

   }  

</style>

AngularJS Table example with CSS

<!DOCTYPE html>  

<html>  

   <head>  

      <title>Angular JS Table</title>  

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

        

      <style>  

         table, th , td {  

            border: 1px solid grey;  

            border-collapse: collapse;  

            padding: 5px;  

         }  

           

         table tr:nth-child(odd) {  

            background-color: #f2f2f2;  

         }  

           

         table tr:nth-child(even) {  

            background-color: #ffffff;  

         }  

      </style>  

   </head>  

   <body>  

      <h2>AngularJS Sample Application</h2>  

      <div ng-app = "mainApp" ng-controller = "studentController">  

         <table border = "0">  

            <tr>  

               <td>Enter first name:</td>  

               <td><input type = "text" ng-model = "student.firstName"></td>  

            </tr>  

            <tr>  

               <td>Enter last name: </td>  

               <td>  

                  <input type = "text" ng-model = "student.lastName">  

               </td>  

            </tr>  

            <tr>  

               <td>Name: </td>  

               <td>{{student.fullName()}}</td>  

            </tr>  

            <tr>  

               <td>Subject:</td>  

              <td>  

                  <table>  

                     <tr>  

                        <th>Name</th>.  

                        <th>Marks</th>  

                     </tr>  

                     <tr ng-repeat = "subject in student.subjects">  

                        <td>{{ subject.name }}</td>  

                        <td>{{ subject.marks }}</td>  

                     </tr>  

                  </table>  

               </td>  

                      

            </tr>  

         </table>  

           

      </div>  

        

      <script>  

         var mainApp = angular.module("mainApp", []);  

           

         mainApp.controller('studentController', function($scope) {  

            $scope.student = {  

               firstName: "Rahul",  

               lastName: "Rai",  

               fees:500,  

                 

               subjects:[  

                  {name:'Physics',marks:850},  

                  {name:'Chemistry',marks:80},  

                  {name:'Math',marks:90},  

                  {name:'English',marks:80},  

                  {name:'Hindi',marks:70}  

               ],  

                 

               fullName: function() {  

                  var studentObject;  

                  studentObject = $scope.student;  

                  return studentObject.firstName + " " + studentObject.lastName;  

               }  

            };  

         });  

      </script>  

   </body>  

</html>

September 14, 2024

AngularJS Filters

In AngularJS, filters are used to format data. Following is a list of filters used for transforming data.

Filter	Description
Currency	It formats a number to a currency format.
Date	It formats a date to a specified format.
Filter	It select a subset of items from an array.
Json	It formats an object to a Json string.
Limit	It is used to limit an array/string, into a specified number of elements/characters.
Lowercase	It formats a string to lower case.
Number	It formats a number to a string.
Orderby	It orders an array by an expression.
Uppercase	It formats a string to upper case.

How to add filters to expressions

You can add filters to expressions by using the pipe character |, followed by a filter.

In this example, the uppercase filter format strings to upper case:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="personCtrl">  

<p>The name is {{ firstName | uppercase }}</p>  

</div>  

<script>  

angular.module('myApp', []).controller('personCtrl', function($scope) {  

    $scope.firstName = "Sonoo",  

    $scope.lastName = "Jaiswal"  

});  

</script>  

</body>  

</html>

Let’s apply the lowercase filter into the same example:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="personCtrl">  

<p>The name is {{ firstName | lowercase }}</p>  

</div>  

<script>  

angular.module('myApp', []).controller('personCtrl', function($scope) {  

    $scope.firstName = "Sonoo",  

    $scope.lastName = "Jaiswal"  

});  

</script>  

</body>  

</html>

How to add filters to directives

Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter.

Let’s take an example:

In this example, orderBy filter is used to sort an array.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>      

<div ng-app="myApp" ng-controller="namesCtrl">  

<p>Looping with objects:</p>  

<ul>  

  <li ng-repeat="x in names | orderBy:'country'">  

    {{ x.name + ', ' + x.country }}  

  </li>  

</ul>  

</div>  

<script>  

angular.module('myApp', []).controller('namesCtrl', function($scope) {  

    $scope.names = [  

        {name:'Ramesh',country:'India'},  

        {name:'Alex',country:'USA'},  

        {name:'Pooja',country:'India'},  

        {name:'Mahesh',country:'India'},  

        {name:'Iqbal',country:'Pakistan'},  

        {name:'Ramanujam',country:'India'},  

        {name:'Osama',country:'Iraq'},  

        {name:'Johnson',country:'UK'},  

        {name:'Karl',country:'Russia'}  

        ];  

});  

</script>  

</body>  

</html>

The filter Filter

The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items.

Let’s take an example:

This example will return the names that contain the letter “o”.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="namesCtrl">  

<ul>  

  <li ng-repeat="x in names | filter : 'o'">  

    {{ x }}  

  </li>  

</ul>  

</div>  

<script>  

angular.module('myApp', []).controller('namesCtrl', function($scope) {  

    $scope.names = [  

'Ramesh',  

'Pooja',  

'Mahesh',  

'Ramanujam',  

'Osama',  

'Iqbal',  

'Karl',  

'Johnson',  

'Alex'  

    ];  

});  

</script>  

<p>This example displays only the names containing the letter "o".</p>  

</body>  

</html>

Filter an array based on user input

You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="namesCtrl">  

<p>Type a letter in the input field:</p>  

<p><input type="text" ng-model="test"></p>  

<ul>  

  <li ng-repeat="x in names | filter:test">  

    {{ x }}  

  </li>  

</ul>  

</div>  

<script>  

angular.module('myApp', []).controller('namesCtrl', function($scope) {  

    $scope.names = [  

        'Ramesh',  

'Pooja',  

'Mahesh',  

'Ramanujam',  

'Osama',  

'Iqbal',  

'Karl',  

'Johnson',  

'Alex'  

   ];  

});  

</script>  

<p>The list will only contain the names matching the filter.</p>  

</body>  

</html>

Sort an array based on user input

You can sort an array according to the table columns.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<p>Click the table headers to change the sorting order:</p>  

<div ng-app="myApp" ng-controller="namesCtrl">  

<table border="1" width="100%">  

<tr>  

<th ng-click="orderByMe('name')">Name</th>  

<th ng-click="orderByMe('country')">Country</th>  

</tr>  

<tr ng-repeat="x in names | orderBy:myOrderBy">  

<td>{{x.name}}</td>  

<td>{{x.country}}</td>  

</tr>  

</table>  

</div>  

<script>  

angular.module('myApp', []).controller('namesCtrl', function($scope) {  

       $scope.names = [  

        {name:'Ramesh',country:'India'},  

        {name:'Alex',country:'USA'},  

        {name:'Pooja',country:'India'},  

        {name:'Mahesh',country:'India'},  

        {name:'Iqbal',country:'Pakistan'},  

        {name:'Ramanujam',country:'India'},  

        {name:'Osama',country:'Iraq'},  

        {name:'Johnson',country:'UK'},  

        {name:'Karl',country:'Russia'}  

        ];  

  

    $scope.orderByMe = function(x) {  

        $scope.myOrderBy = x;  

    }  

});  

</script>  

</body>  

</html>

AngularJS Custom Filters

You can create your own filters by register a new filter factory function with your module.

See this example:

<!DOCTYPE html>  <html>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  <body>  <p>Click the table headers to change the sorting order:</p>  <div ng-app="myApp" ng-controller="namesCtrl">  <table border="1" width="100%">  <tr>  <th ng-click="orderByMe('name')">Name</th>  <th ng-click="orderByMe('country')">Country</th>  </tr>  <tr ng-repeat="x in names | orderBy:myOrderBy">  <td>{{x.name}}</td>  <td>{{x.country}}</td>  </tr>  </table>  </div>  <script>  angular.module('myApp', []).controller('namesCtrl', function($scope) {         $scope.names = [          {name:'Ramesh',country:'India'},          {name:'Alex',country:'USA'},          {name:'Pooja',country:'India'},          {name:'Mahesh',country:'India'},          {name:'Iqbal',country:'Pakistan'},          {name:'Ramanujam',country:'India'},          {name:'Osama',country:'Iraq'},          {name:'Johnson',country:'UK'},          {name:'Karl',country:'Russia'}          ];        $scope.orderByMe = function(x) {          $scope.myOrderBy = x;      }  });  </script>  </body>  </html>

September 14, 2024

AngularJS Dependency Injection

AngularJS comes with a built-in dependency injection mechanism. It facilitates you to divide your application into multiple different types of components which can be injected into each other as dependencies.

Dependency Injection is a software design pattern that specifies how components get holds of their dependencies. In this pattern, components are given their dependencies instead of coding them within the component.

Modularizing your application makes it easier to reuse, configure and test the components in your application. Following are the core types of objects and components:

value
factory
service
provider
constant

These objects and components can be injected into each other using AngularJS Dependency Injection.

Value

In AngularJS, value is a simple object. It can be a number, string or JavaScript object. It is used to pass values in factories, services or controllers during run and config phase.

//define a module  

var myModule = angular.module("myModule", []);  

//create a value object and pass it a data.   

myModule.value("numberValue", 100);  

myModule.value("stringValue", "abc");  

myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

Here, values are defined using the value() function on the module. The first parameter specifies the name of the value, and the second parameter is the value itself. Factories, services and controllers can now reference these values by their name.

Injecting a value

To inject a value into AngularJS controller function, add a parameter with the same when the value is defined.

var myModule = angular.module("myModule", []);  

myModule.value("numberValue", 100);  

myModule.controller("MyController", function($scope, numberValue) {  

 console.log(numberValue);  

});

Factory

Factory is a function that is used to return value. When a service or controller needs a value injected from the factory, it creates the value on demand. It normally uses a factory function to calculate and return the value.

Let’s take an example that defines a factory on a module, and a controller which gets the factory created value injected:

Injecting values into factory

To inject a value into AngularJS controller function, add a parameter with the same when the value is defined.

var myModule = angular.module("myModule", []);  

myModule.value("numberValue", 100);  

myModule.controller("MyController", function($scope, numberValue) {  

 console.log(numberValue);  

});

Note: It is not the factory function that is injected, but the value produced by the factory function.

Service

In AngularJS, service is a JavaScript object which contains a set of functions to perform certain tasks. Services are created by using service() function on a module and then injected into controllers.

//define a module  

var mainApp = angular.module("mainApp", []);  

...  

//create a service which defines a method square to return square of a number.  

mainApp.service('CalcService', function(MathService){  

   this.square = function(a) {  

      return MathService.multiply(a,a);   

   }  

});  

//inject the service "CalcService" into the controller  

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  

   $scope.number = defaultInput;  

   $scope.result = CalcService.square($scope.number);  

    $scope.square = function() {  

      $scope.result = CalcService.square($scope.number);  

   }  

});

Provider

In AngularJS, provider is used internally to create services, factory etc. during config phase (phase during which AngularJS bootstraps itself). It is the most flexible form of factory you can create. Provider is a special factory method with a get() function which is used to return the value/service/factory.

//define a module  

var mainApp = angular.module("mainApp", []);  

...  

//create a service using provider which defines a method square to return square of a number.  

mainApp.config(function($provide) {  

   $provide.provider('MathService', function() {  

      this.$get = function() {  

         var factory = {};    

         factory.multiply = function(a, b) {  

            return a * b;   

         }  

         return factory;  

      };  

   });  

});

Constants

You cannot inject values into the module.config() function. Instead constants are used to pass values at config phase.

mainApp.constant("configParam", "constant value");

Let’s take an example to deploy all above mentioned directives.

<!DOCTYPE html>  

<html>  

   <head>  

      <title>AngularJS Dependency Injection</title>  

   </head>  

   <body>  

      <h2>AngularJS Sample Application</h2>  

        

      <div ng-app = "mainApp" ng-controller = "CalcController">  

         <p>Enter a number: <input type = "number" ng-model = "number" /></p>  

         <button ng-click = "square()">X<sup>2</sup></button>  

         <p>Result: {{result}}</p>  

      </div>  

        

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

        

      <script>  

         var mainApp = angular.module("mainApp", []);  

           

         mainApp.config(function($provide) {  

            $provide.provider('MathService', function() {  

               this.$get = function() {  

                  var factory = {};  

                    

                  factory.multiply = function(a, b) {  

                     return a * b;  

                  }  

                  return factory;  

               };  

            });  

         });  

              

         mainApp.value("defaultInput", 10);  

           

         mainApp.factory('MathService', function() {  

            var factory = {};  

              

            factory.multiply = function(a, b) {  

               return a * b;  

            }  

            return factory;  

         });  

           

         mainApp.service('CalcService', function(MathService){  

            this.square = function(a) {  

               return MathService.multiply(a,a);  

            }  

         });  

           

         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  

            $scope.number = defaultInput;  

            $scope.result = CalcService.square($scope.number);  

  

            $scope.square = function() {  

               $scope.result = CalcService.square($scope.number);  

            }  

         });  

          </script>  

      </body>  

</html>

September 14, 2024

AngularJS Scopes

The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller). It plays a role of joining controller with the views. It is available for both the view and the controller.

How to use Scope

To make a controller in AngularJS, you have to pass the $scope object as an argument.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

<h1>{{carname}}</h1>  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.carname = "Volvo";  

});  

</script>  

<p>The property "carname" was made in the controller, and can be referred to in the view by using the {{ }} brackets.</p>  

</body>  

</html>

September 14, 2024

AngularJS Module

In AngularJS, a module defines an application. It is a container for the different parts of your application like controller, services, filters, directives etc.

A module is used as a Main() method. Controller always belongs to a module.

How to create a module

The angular object’s module() method is used to create a module. It is also called AngularJS function angular.module

<div ng-app="myApp">...</div>  

<script>  

var app = angular.module("myApp", []);   

</script>

Here, “myApp” specifies an HTML element in which the application will run.

Now we can add controllers, directives, filters, and more, to AngularJS application.

How to add controller to a module

If you want to add a controller to your application refer to the controller with the ng-controller directive.

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="myCtrl">  

{{ firstName + " " + lastName }}  

</div>  

<script>  

var app = angular.module("myApp", []);  

app.controller("myCtrl", function($scope) {  

    $scope.firstName = "Ajeet";  

    $scope.lastName = "Maurya";  

});  

</script>  

</body>  

</html>

How to add directive to a module

AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.

Following is a list of AngularJS directives:

Directive	Description
ng-app	It defines the root element of an application.
ng-bind	It binds the content of an html element to application data.
ng-bind-html	Itbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string.
ng-bind-template	It specifies that the text content should be replaced with a template.
ng-blur	It specifies a behavior on blur events.
ng-change	It specifies an expression to evaluate when content is being changed by the user.
ng-checked	It specifies if an element is checked or not.
ng-class	It specifies css classes on html elements.
ng-class-even	It is same as ng-class, but will only take effect on even rows.
ng-class-odd	It is same as ng-class, but will only take effect on odd rows.
ng-click	It specifies an expression to evaluate when an element is being clicked.
ng-cloak	It prevents flickering when your application is being loaded.
ng-controller	It defines the controller object for an application.
ng-copy	It specifies a behavior on copy events.
ng-csp	It changes the content security policy.
ng-cut	It specifies a behavior on cut events.
ng-dblclick	It specifies a behavior on double-click events.
ng-disabled	It specifies if an element is disabled or not.
ng-focus	It specifies a behavior on focus events.
ng-form	It specifies an html form to inherit controls from.
ng-hide	It hides or shows html elements.
ng-href	It specifies a URL for the <a> element.
ng-if	It removes the html element if a condition is false.
ng-include	It includes html in an application.
ng-init	It defines initial values for an application.
ng-jq	It specifies that the application must use a library, like jQuery.
ng-keydown	It specifies a behavior on keydown events.
ng-keypress	It specifies a behavior on keypress events.
ng-keyup	It specifies a behavior on keyup events.
ng-list	It converts text into a list (array).
ng-model	It binds the value of html controls to application data.
ng-model-options	It specifies how updates in the model are done.
ng-mousedown	It specifies a behavior on mousedown events.
ng-mouseenter	It specifies a behavior on mouseenter events.
ng-mouseleave	It specifies a behavior on mouseleave events.
ng-mousemove	It specifies a behavior on mousemove events.
ng-mouseover	It specifies a behavior on mouseover events.
ng-mouseup	It specifies a behavior on mouseup events.
ng-non-bindable	It specifies that no data binding can happen in this element, or it’s children.
ng-open	It specifies the open attribute of an element.
ng-options	It specifies <options> in a <select> list.
ng-paste	It specifies a behavior on paste events.
ng-pluralize	It specifies a message to display according to en-us localization rules.
ng-readonly	It specifies the readonly attribute of an element.
ng-repeat	It defines a template for each data in a collection.
ng-required	It specifies the required attribute of an element.
ng-selected	It specifies the selected attribute of an element.
ng-show	It shows or hides html elements.
ng-src	It specifies the src attribute for the <img> element.
ng-srcset	It specifies the srcset attribute for the <img> element.
ng-style	It specifies the style attribute for an element.
ng-submit	It specifies expressions to run on onsubmit events.
ng-switch	It specifies a condition that will be used to show/hide child elements.
ng-transclude	It specifies a point to insert transcluded elements.
ng-value	It specifies the value of an input element.

How to add directives

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

  

<div ng-app="myApp" w3-test-directive></div>  

<script>  

var app = angular.module("myApp", []);  

app.directive("w3TestDirective", function() {  

    return {  

        template : "This is a directive constructor. "  

    };  

});  

</script>  

</body>  

</html>

Modules and controllers in file

In AngularJS applications, you can put the module and the controllers in JavaScript files.

In this example, “myApp.js” contains an application module definition, while “myCtrl.js” contains the controller:

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<script src="myApp.js"></script>  

<script src="myCtrl.js"></script>  

</body>  

</html>

Here “myApp.js” contains:

Here “myCtrl.js” contains:

 <div ng-app="myApp" ng-controller="myCtrl">  

{{ firstName + " " + lastName }}  

</div>

This example can also be written as:

<!DOCTYPE html>  

<html>  

<body>  

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

<div ng-app="myApp" ng-controller="myCtrl">  

{{ firstName + " " + lastName }}  

</div>  

<script>  

var app = angular.module("myApp", []);  

app.controller("myCtrl", function($scope) {  

    $scope.firstName = "Ajeet";  

    $scope.lastName = "Maurya";  

});  

</script>  

</body>  

</html>

September 14, 2024

AngularJS Controllers

AngularJS controllers are used to control the flow of data of AngularJS application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

AngularJS Controller Example

<!DOCTYPE html>  

<html>  

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

<body>  

  

<div ng-app="myApp" ng-controller="myCtrl">  

  

First Name: <input type="text" ng-model="firstName"><br>  

Last Name: <input type="text" ng-model="lastName"><br>  

<br>  

Full Name: {{firstName + " " + lastName}}  

  

</div>  

  

<script>  

var app = angular.module('myApp', []);  

app.controller('myCtrl', function($scope) {  

    $scope.firstName = "Aryan";  

    $scope.lastName = "Khanna";  

});  

</script>  

  

</body>  

</html>

Note:

Here, the AngularJS application runs inside the <div> is defined by ng-app=”myApp”.
The AngularJS directive is ng-controller=”myCtrl” attribute.
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).

AngularJS controller example with methods (variables as functions)

<!DOCTYPE html>  

<html>  

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

<body>  

  

<div ng-app="myApp" ng-controller="personCtrl">  

  

First Name: <input type="text" ng-model="firstName"><br>  

Last Name: <input type="text" ng-model="lastName"><br>  

<br>  

Full Name: {{fullName()}}  

  

</div>  

<script>  

var app = angular.module('myApp', []);  

app.controller('personCtrl', function($scope) {  

    $scope.firstName = "Aryan";  

    $scope.lastName = "Khanna";  

    $scope.fullName = function() {  

        return $scope.firstName + " " + $scope.lastName;  

    };  

});  

</script>  

  

</body>  

</html>

AngularJS Controller in external files

In larger applications, generally the controllers are stored in external files.

Create an external file named “personController.js” to store controller.

Here, “personController.js” is:

angular.module('myApp', []).controller('personCtrl', function($scope) {  

    $scope.firstName = "Aryan",  

    $scope.lastName = "Khanna",  

    $scope.fullName = function() {  

        return $scope.firstName + " " + $scope.lastName;  

    }  

});

See this example:

<!DOCTYPE html>  

<html>  

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

<body>  

<div ng-app="myApp" ng-controller="personCtrl">  

First Name: <input type="text" ng-model="firstName"><br>  

Last Name: <input type="text" ng-model="lastName"><br>  

<br>  

Full Name: {{firstName + " " + lastName}}  

</div>  

<script src="personController.js"></script>  

</body>  

</html>

September 14, 2024

Author: saqibkhan

Angular supports multiple platforms

High Speed, Ultimate Performance

Productivity

Full Stack Development

What is Single Page Application (SPA)?

Difference between AngularJS and Angular

Angular 7 vs Angular6 vs Angular2 vs Angular1

Using ng-options

ng-options vs. ng-repeat

Limitation of ng-repeat

Use data source as an object

Displaying with CSS style

AngularJS Table example with CSS

How to add filters to expressions

How to add filters to directives

The filter Filter

Filter an array based on user input

Sort an array based on user input

AngularJS Custom Filters

Value

Injecting a value

Factory

Injecting values into factory

Note: It is not the factory function that is injected, but the value produced by the factory function.

Service

Provider

Constants

How to use Scope

How to create a module

How to add controller to a module

How to add directive to a module

How to add directives

Modules and controllers in file

AngularJS Controller Example

AngularJS controller example with methods (variables as functions)

AngularJS Controller in external files