AngularJS is it javaScript framework for rich application. AngularJS is used for single page (SPA) application. AngularJS is written on javaScript. AngularJS Framework is nothing but a javaScript library .AngularJS , instead of changing inner HTML, it manipulate DOM. This makes AngularJS responsive and faster.
Before you learn AngularJS , you need a basic knowledge about
Feature of Angular JS
Instead of several advantages, AngularJS has several disadvantage also
AngularJS need JavaScript library to add each page , here is the link of this library.
Output:
The above example is a simple application of AngularJS. This application bind input with span. When a text is entered in the input , as the Span is bind with input, the span value automatically change. You will observe that no need to write code for this purpose.
In such a way , writing very less code is required for AngularJS. You can also do the following with AngularJS.
HTMl valid ,you have to add "data-" string before the directives.
For example
Before you learn AngularJS , you need a basic knowledge about
- Javascript
- HTML
- CSS
Feature of Angular JS
- AngularJS is cross browser compatible. It automatically handle browser specific javaScript to handle a task.
- AngularJS start with </script> .
- AngularJS is free and open source framework.
- For each page AngularJS library need to be incorporated before using AngularJS .
- AngularJS follows MVC architecture. It is actually client side MVC architecture with two way data binding.
- AngularJS is unit testable.
- AngularJS provide reusable component.
- You can communicate with server by XHR/JSONP.
- AngularJS load automatically , when a web page is load.
Instead of several advantages, AngularJS has several disadvantage also
- AngularJS framework is complicated implement and learn .
- As it was written on javascript ,this is not safe and secure.
- AngularJS is written on javascript, if user disable JavaScript, AngularJS stop working.
AngularJS need JavaScript library to add each page , here is the link of this library.
<script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Below is a sample AngularJS application
Example
Below is a sample AngularJS application
Example
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
<title>AngularJS
Eaxmple 1</title>
</head>
<body>
<h1>Eaxmple
1</h1>
<div
ng-app
=
"">
<p>Enter
a String: <input
type
=
"text"
ng-model
=
"name"></p>
<p>Here
is your string : <span
ng-bind
=
"name"></span></p>
</div>
</body>
</html>
Output:
The above example is a simple application of AngularJS. This application bind input with span. When a text is entered in the input , as the Span is bind with input, the span value automatically change. You will observe that no need to write code for this purpose.
In such a way , writing very less code is required for AngularJS. You can also do the following with AngularJS.
- Filter : Formatted data can be filter.
- JQLight: AngularJS does not depend on jQuery, JQLight is embedded in the Angular JS.
- Routing : ngRoute provides routing and deeplinking services.Navogate between page without page loading.
- Validation : AngularJS has library to validate data in the client end. Validation can be customised also.
- Service : Angular services carry out some sort of task.
- databinding : Binding of data between two object of AngularJS. AngularJS follow MVC structure, model and views are AngularJS together.
HTMl valid ,you have to add "data-" string before the directives.
For example
- data-ng-model
- data-ng-app
- data-ng-controller
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtrl",
function
($scope)
{
$scope.firstString
= "I
am Learing ";
$scope.secondString
= "
AngularJS ";
});
</script>
</body>
<div
data-ng-app="myApp"
data-ng-controller="myCtrl">
{{
firstString + " " + secondString }}
</div>
No comments:
Post a Comment