Angular JS is a JavaScript framework used for creating single page web application. Single page application means, regardless the size of application, browser will be loading only single page. Additional content will be loaded into the application as needed. This makes application faster, since the website loads only the content it needs, instead of loading entire page. Angular JS is extensively used with HTML and allow us for declaring dynamic views in web-applications. It extends html content by replacing html tag with data.
In this article I am going to explain the basic concepts of AngularJS that will help us to use AngularJS framework in real time web application.
Example: Below figure shows how it used in real time application.
So here are the core features of AngularJS framework
1. Directives
2. Data binding
3. Controller
4. Filter
5. Modules
6. Routers
In this tutorial, I have explained Directives, data-binding and controller. We will cover other features in next part.
1. Directives:
Directives are nothing but are command in an AngularJS template. It starts with Letter NG and then hyphen. These commands tell the angular JavaScript framework to do its job. So anything start with prefix ng- is directives.
Here are the basic directives in AngularJS framework.
• ng-app
It tells the AngularJS that the owner of this directive is Angular app.
• ng-init
This directive is use to initialization the data that we can bind to display in view.
• ng-model
This directive binds the form controls (input, select, etc…) to property into the scope.
Example: Following example show the use of directive and how it extensively uses with HTML document.
2. Data binding
Data binding as name implies it bind the property of ng-model to data binding expression. In following example we are adding ng-model with property of name. As we type in this text-box, we can bind its value in data binding expression
Output:
3. Controller :
Controller controls the flow of data in application or view associated in current scope. $Scope is play intermediate role between view and controller. Controller itself does not know about which view to control and also view does not know about controller, for this Scope refer to application which controller or view is need to use.
Example: (Defining Controller)
In following example I am adding angular controller in JavaScript script tag, this controller control the data flow of view. In this controller I have initialized the first middle and last name in view
Adding Controller to view
All in one
Here is the full code that i have explained in this article
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script>
var app = angular.module('myApp', []);
app.controller('ctrl1', function ($scope) {
$scope.FirstName = "Manoj";
$scope.MiddleName = "Kumar";
$scope.LastName = "Sharma";
});
</script>
<title>Intro to Angular JS</title>
</head>
<body>
<div>
Name :
<input id="Text1" type="text" ng-model ="name" /> {{name}}
</div>
<div ng-controller="ctrl1">
Enter First Name: <input type="text" ng-model="FirstName"><br>
Enter Middle Name: <input type="text" ng-model="MiddleName"><br>
Enter Last Name: <input type="text" ng-model="LastName"><br>
<p>
First Name: {{FirstName}} <br />
Middle Name: {{MiddleName}} <br />
Last Name: {{LastName}}
</p>
</div>
</body>
</html>
Output:
