In this Blog Post we are going to some really a interesting topic i.e Angular Js . Angular is one of the Pretty Good framework to design a single page applications quickly and more flexibly. what are single page applications ? a simple example is Gmail, you can see the Gmail it is a single page only the content can change . When i heard angular js, i see lot of keywords which is really a new keywords i.e is never heard before, when i go through the concepts it is very clearly seen that using angular we can create applications with all complex design.
what is Angular ?
Angular is a js , which is developed as Framework to build web applications. using angular we can create a web app with data binding in two way, importantly we can manipulate the dom at runtime, It is designed like supporting MVC , MVVM pattern in code standard.
In a Single Page Applications we have a single page as container and change the Views based on the requirement. like master page and child page in aspx.
In angular we have a cool separation of View and Code Logic, using angular we can do the following things.
1. Data Binding
2. Routing
3. Cahcing
4. Ajax/Promises
5. Dom manipulation
6. Resource Handling
7. Directives
8. Factory
9. Service
10. Provider
11. Templates
12. Controllers
13. Testing
14. Filters
15. Module
Angular uses the Dependency Injection to invoke the code logic.we have the model-view-controller concept.
First download the angular js from the following link.Angular Js
Add the script in the page <script src="angular.min.js" />
Let see some basic syntax to use the angular. Here we have to learn some new concept directives
First we have to define a module and mention in the single page application. For example now our module name is sampleModule , This module has to be defined as ng-app="sampleModule" in the html
create a separate file sampleModule.js and wrote the following code "ng-app"
Example
var sampleModule = angular.module('sampleModule',[]);
Here [] is used to inject the dependents like ['$compile']
in HTML ng-app="sampleModule" have to mention
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="ang/sampleModule.js"></script>
</head>
<body ng-app="sampleModule">
</body>
</html>
a page can only have a single Module.So now we have to see the controller. controller are used to write the code logic. and then refer that controller in the HTML, that controller objects can only be scope that element, "ng-controller"
JS:
***
var sampleModule = angular.module('sampleModule',[]);
sampleModule.controller('sampleController', function ($scope) {
});
HTML:
********
<body ng-app="sampleModule">
<div>
<div ng-controller="sampleController">
</div>
</div>
</body>
Here we are injecting the $scope to the controller, to get the scope of the element.Another important directive is "ng-model"
ng-model:
*********
<div ng-controller="sampleController">
<input type="text" ng-model="name" /> {{name}}
</div>
From the above sample we can see that ng-model directive is used in the input text control, what ng-model directive do, actually it creates a variable in that name in the memory and copies the value of that control to that variable , if you heard about Viewmodel concept before then this ng-model do the same thing hear, when ever there is a change in the variable it will reflects the controls value, or when ever there is a change in the control it will change the value of the variable, Two way binding
From this post we can see some of the basic introduction to the angular.
what is Angular ?
Angular is a js , which is developed as Framework to build web applications. using angular we can create a web app with data binding in two way, importantly we can manipulate the dom at runtime, It is designed like supporting MVC , MVVM pattern in code standard.
In a Single Page Applications we have a single page as container and change the Views based on the requirement. like master page and child page in aspx.
In angular we have a cool separation of View and Code Logic, using angular we can do the following things.
1. Data Binding
2. Routing
3. Cahcing
4. Ajax/Promises
5. Dom manipulation
6. Resource Handling
7. Directives
8. Factory
9. Service
10. Provider
11. Templates
12. Controllers
13. Testing
14. Filters
15. Module
Angular uses the Dependency Injection to invoke the code logic.we have the model-view-controller concept.
First download the angular js from the following link.Angular Js
Add the script in the page <script src="angular.min.js" />
Let see some basic syntax to use the angular. Here we have to learn some new concept directives
First we have to define a module and mention in the single page application. For example now our module name is sampleModule , This module has to be defined as ng-app="sampleModule" in the html
create a separate file sampleModule.js and wrote the following code "ng-app"
Example
var sampleModule = angular.module('sampleModule',[]);
Here [] is used to inject the dependents like ['$compile']
in HTML ng-app="sampleModule" have to mention
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="ang/sampleModule.js"></script>
</head>
<body ng-app="sampleModule">
</body>
</html>
a page can only have a single Module.So now we have to see the controller. controller are used to write the code logic. and then refer that controller in the HTML, that controller objects can only be scope that element, "ng-controller"
JS:
***
var sampleModule = angular.module('sampleModule',[]);
sampleModule.controller('sampleController', function ($scope) {
});
HTML:
********
<body ng-app="sampleModule">
<div>
<div ng-controller="sampleController">
</div>
</div>
</body>
Here we are injecting the $scope to the controller, to get the scope of the element.Another important directive is "ng-model"
ng-model:
*********
<div ng-controller="sampleController">
<input type="text" ng-model="name" /> {{name}}
</div>
From the above sample we can see that ng-model directive is used in the input text control, what ng-model directive do, actually it creates a variable in that name in the memory and copies the value of that control to that variable , if you heard about Viewmodel concept before then this ng-model do the same thing hear, when ever there is a change in the variable it will reflects the controls value, or when ever there is a change in the control it will change the value of the variable, Two way binding
From this post we can see some of the basic introduction to the angular.
No comments:
Post a Comment