AngularJS | Introduction | Directives | Module | Setup | Expression | Benefits | Disadvantages
What is AngularJS?
AngularJS is a JavaScript framework that use HTML directives and expressions. It can be added to an HTML page within <script> tag. It contain a rich JavaScript library. It is responsive to user actions. It is an open-source framework that is available for free of cost. This framework is widely used by developers around the world.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>The framework was originally developed by Misko Hevery and Adam Abrons in 2009. AngularJs is now undertaken by Google. It is a structural framework for dynamic web apps. Licensed under Apache license version 2.0
AngularJs extend HTML
This is the common term we have heard regarding AngularJs. What does it mean? AngularJs allow us to use and extend HTML syntax and expressions as per our application component. To extend attributes in HTML it use Directives and to bind data with HTML it uses Expressions.
AngularJs Directives
Directives are special attributes in AngularJs that start with prefix ng-
ng-directives are used to extend HTML in AngularJs.
- ng-app: this ng-directive defines and links angularJs application to HTML
- ng-model: this ng-directive binds value to HTML contols like textbox from application data
- ng-bind: this ng-directive binds application data to HTML view
- ng-init: this ng-directive is used to initialize application data
- ng-repeat: this ng-directive repeat html element for each item in a collection
Syntax:
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>Example:
<html>
<head>
<title>MSA Technosoft AngularJs Directives Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app= “” ng-init= “countries= [{locale: ‘en-IN’, name: ‘India’},{locale: ‘en-US’, name: ‘United States’},{locale: ‘en-GB’, name: ‘United Kingdom’}]”>
<p>Enter your name: <input type= “text” ng-model= “name”></p>
<p> Hi <span nd-bind= “name”></span>!</p>
<p>List of countries with Locale:</p>
<ul>
<li ng-repeat= “country in countries”>
{{‘Country:’+ country.name+ ‘, Locale: ’+ country.locale}};
</ul>
</div>
</body>
</html>Benefits of AngularJs
- Automatically bind data between model and view components
- Comes with Several built-in services like https
- Built-in directives can be used to create custom HTML tags
- Capable to create single-page application easily
- Data binding to HTML gives responsive and rich experience to users
- Provide reusable components
- Provide more functionality with less code
- Fully responsive and cross-browser compatible
- Provide dynamic views in web application by extending HTML
Problem with AngularJS
- AngularJs uses JavaScript as the only framework that raise some security issues. To keep application secure, Server-side authentication and authorisation is required.
- AngularJs is a JavaScript library. If user disabled JavaScript for a web application developed in AngularJs, he will not be able to see anything except the basic page.
Getting Started with AngularJs
To start working with AngularJs, we need to install the setup in our computer.
AngularJs setup
- Go to the official website of AngularJs https://angularjs.org/
- Download and install setup for your system
Step1:
Add AngularJs
The first thing is to include AngularJs JavaScript to your HTML page so that we can use it in our application. The following snippet is used:
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>Step2:
Mention AngularJs application
The next important thing is to point out where the AngularJs file is located in HTML document. This can be done by adding ng-app directive to root HTML element.
<body> … <div ng-app= “myApp”> …. </div> …. </body>
Step3:
Controller Selection
ng-controller directive tells AngularJs which controller is to be used with this view. The following code snippet is used:
<div ng-controller= ‘MyController’>
<h3> {{helloTo.title}}</h3>
</div>helloTo.title tells AngularJs to return the value of the expression to the location in HTML page.
Step4:
Register controller function in AngularJs application
This can be done by angular.module(….).controller(….) the parameter passed inside controller() is model
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.helloTo= {};
$scope.helloTo.title= “AngularJs”;
});
</script>Step5:
Save and Execute
Save the code file with “.html” extension and open it in your web browser to see the output.
AngularJs Example
FirstExample.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App1" ng-controller="Controller1">
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('App1', []);
app.controller('Controller1', function($scope) {
$scope.firstName= "MSA";
$scope.lastName= "Technosoft";
});
</script>
</body>
</html>AngularJs Expressions
Expressions in AngularJs are written inside double braces {{expression}}. AngularJS will return data exactly where the expression is written. It will return the value of the expression within double braces. You can write your expression anywhere and AngularJs will return the value of the expression easily.
<div ng-app="">
<p>My first expression: {{2 + 5}} </p>
<p>My second expression: {{fname+ “ “+ lname}}</p>
</div>The first expression will return the result of adding 2 and 5 i.e. 7.
The second expression will return the value fname lname for example if fname has value “MSA” and lname contain value “Technosoft” then the expression will return MSA Technosoft.