What is AngularJS:
AngularJS is a Javascript MVC(Model-View-Controller) framework which is mainly helpful to build a SAP( Single page application) in a small time with efficient manner which is maintained by Google.If we are creating a dynamic webpages by Javascript then better to choose AngularJS. It makes the web pages more and more interactive with Bootstrap and also performance basis it is also a nice framework. AngularJS is completely Javascript and it is also completely client side.
AngularJS works with HTML templates. As HTML has angualr brackets so it is called as AngualrJS . To Make a AngularJS application mainly we need two things.
1. AngularJS is distributed as a JavaScript file and we can be added to a web page with a script tag.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>2. We should add "ng-app" directives in the HTML content.
Lets have a complete code to create to AngularJS application.
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Enter Some Text: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
So this is our first AngularJS application. So cool . 
Explanation: When the page will load at that time AngularJS will be load.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
Why we will use AngularJS / Advantages of AngularJS:
1. It extends the HTML vocabulary by adding the Dynamic elements to web pages.2. Relatively easy to learn
3. Very human readble
4. Two way data binding
5. It makes the application fast.
6. Its provide the facility to communicate with the server.
7. Basically it works well with Node, Backbone and MongoDB
Basic Components of AngularJS:
Before Creating a AngularJS application we should know about the components which is frequently used to build a AngularJS application. As this a framework so it has some own components . These are the list of Components given below.1. Directives
2. Controller
3. &scope
4. Expressions
5. Filters
6. Module
7. Services etc.
Actually we have some more components in AngularJS but here we are just explaining about some basic components.
We will explain one by one.
Directives :
Angular js extends the HTML elements with an attributes called as Directives or you can also say Directives are like an Html atrributes which is added in the HTML elements to provide more functionality to the HTML elements.The directives extend the HTML attributes with an prefix -ng. Here is some list of built in attributes and their functionality.
Angular js extends the HTML elements with an attributes called as Directives or you can also say Directives are like an Html atrributes which is added in the HTML elements to provide more functionality to the HTML elements.The directives extend the HTML attributes with an prefix -ng. Here is some list of built in attributes and their functionality.
A. ng-app : It initializes the AngularJS application. I mean it tells the browse that the ng-app defined section is active for angualrJS application
C. ng-model : It binds the value of HTML controls to the AngularJS application.
D. ng-data : It binds the data from the AngularJS application to HTML controls.
E. ng-init : It intializes the AngularJs application data.
D. ng-bind : It binds the data from the application data to HTML controls.
Example :
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Enter Name <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
In this example we have used some directives like ag-app, ng-model and ng-bind .
Controller :
A Controller is a Javascript Constructor function that is used to augment the scope. It just control the application between view and Model. Controller is added to the HTML content by ng-controller directive. we can use/assign directly the name of controller to ng-controller directive or we can instantiate the controller. We can directly create a controller in the HTML content itself , inside the script tag or we can also put the controller inside a module.
Example:
Controller without a module:
<!DOCTYPE html>
<html>
<body>
<!-- ng-app intialize the AngualrJs application for the div element -->
<div ng-app="">
<p ng-controller="myController">{{ Name}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
// Creating a controller
var myController= function GetName($scope){
$scope.Name= "Hello world";
}
</script></body>
</html>
But in this below example we are creating a Controller with a module:<!DOCTYPE html>
<html>
<body>
<!--Assigning the Module name in ng-app directives-->
<div ng-app="moduleName">
<p ng-controller="myController">{{ Name}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
// Creating a module
var moduleObject = angular.module("moduleName",[])
// Creating a controller from the module
moduleObject.controller("myController", function($scope){
$scope.Name= "Hello world";
})
</script>
</body>
</html>
Note:
It is better to define a controller inside a module. We will describe about the Module later in this article.$scope:
$scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.A. Scopes provide APIs ($watch) to observe model mutations.
B. Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "Angular realm" (controllers, services, Angular event handlers).
Also scope is a glue between controller and view.
Example:
<!DOCTYPE html>
<html>
<body>
<!-- ng-app intialize the AngualrJs application for the div element -->
<div ng-app="">
<p ng-controller="myController">{{ Name}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
// Creating a controller
var myController= function GetName($scope){
$scope.Name= "Hello world";
}
</script>
</body>
</html>
Expressions:
AngularJS binds data to HTML using Expressions. AngularJS expressions are written inside double braces: {{ expression }}.AngularJS expressions binds data to HTML the same way as the ng-bind directive.
AngularJS will "output" data exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example of Expression: {{ 10 + 10 }}
Example:
<!DOCTYPE html>
<html>
<body>
<!-- ng-app intialize the AngualrJs application for the div element -->
<div ng-app="">
<p >{{ 10 + 10 }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
The output of the application will be 20.
Filters:
Filters are used to transform the data. Filters can be used in expression and directives using a pipe(|) character. In AngularJS we use different types of filters likeuppercase: Format a string to upper case.
currency: Format a number to a currency format.
filter: Select a subset of items from an array.
lowercase: Format a string to lower case.
orderBy: Orders an array by an expression.
Example:
<!DOCTYPE html>
<html>
<body>
<!-- ng-app intialize the AngualrJs application for the div element -->
<div ng-app="">
<ul ng-controller="getNameByFilter">
<li >{{ user.FirstName | uppercase }}</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var getNameByFilter = function GetName($scope){
$scope.user = {
FirstName: "AngularJS"}
}
</script>
</body>
</html>
Output of the above code is :ANGULARJS
Modules :
Module is a container for different parts of our application like controller, services , filters etc. It is easy to maintain the application if we separate the application into different different module.How to create a module :
// Creating a module
var moduleObject = angular.module("moduleName",[])
// Creating a controller from the module
moduleObject.controller("myController", function($scope){
$scope.Name= "Hello world";
})
<!DOCTYPE html>
<html>
<body>
<!--Assigning the Module name in ng-app directives-->
<div ng-app="moduleName">
<p ng-controller="myController">{{ Name}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
// Creating a module
var moduleObject = angular.module("moduleName",[])
// Creating a controller from the module
moduleObject.controller("myController", function($scope){
$scope.Name= "Hello world";
})
</script>
</body>
</html>
Services:Service is a singleton object which do some specific task.
$http is an AngularJS service for reading data from remote servers.
Lets have a example to read Json data from a server.
The file is present in a server like www.mysite.com/content.php
[{
"Name" : "Name1",
"Address" : "Adress1"
},
{
"Name" : "Name2",
"Address" : "Adress2"
}]
$http.get(url) is the function to use for reading server data.
<html>
<body>
<div ng-app="" ng-controller="usersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Address }}
</li>
</ul>
</div>
<script>
function usersController($scope,$http) {
$http.get("http://www.mysite.com/content.php")
.success(function(response) {$scope.names = response;});
}
</script>
</body>
</html>
In the output we will get all the values from the server likeName1 , Address1
Name2 , Address2 https://angularjs.org/
.jpg)
.jpg)
0 comments:
Post a Comment