AngularJS :
Version 1,1,1.2,.....1.5
Beta Version 2.0
1. It is an open source java scripts framework helps build web application .
2. It is developed by google to create single page application or one-page web applications that only require HTML,CSS and java script on the client side.
3. 1.5 latest version use in production.
HTML <------> AngularJS <-------> JavaScripts Objects
(View) (Binding) (Model)
4. It is light weight and bind html and java scripts.
5. There are three different AngularJS file
A. Angular.js
Does have comment, intension.
B. min.js
Does not have comment ,intension.
C. Angular-mocks.js
It is use mocks testing use
Following screen shows how to add AngularJS in your application.
Module and Controller in AngularJS
What is Module and how to create it?
1. Module is a kind of Main () method in AngularJS which contains
controllers, services, directives etc.
2. Module in AngularJS can be created by using following syntax.
3. Module is used with ng-app.
$scope is an object to which the data is attached and it is then retrieved and displayed.Here message is attached to $scope object. So in the Html page which is using this controller by using double curly braces {{message}} the message will be displayed.The controller needs to be registered with a module like this
Version 1,1,1.2,.....1.5
Beta Version 2.0
1. It is an open source java scripts framework helps build web application .
2. It is developed by google to create single page application or one-page web applications that only require HTML,CSS and java script on the client side.
3. 1.5 latest version use in production.
HTML <------> AngularJS <-------> JavaScripts Objects
(View) (Binding) (Model)
4. It is light weight and bind html and java scripts.
5. There are three different AngularJS file
A. Angular.js
Does have comment, intension.
B. min.js
Does not have comment ,intension.
C. Angular-mocks.js
It is use mocks testing use
Following screen shows how to add AngularJS in your application.
6. It is a structural framework for dynamic Web apps.
7. It is easy to update
and get information from your HTML document.
8. Using Angular does not mean not to use Jquery we can also use Jquery in our application.
9. Angular also internally uses lite version of jquery "JQLite".
Angular Componets :
1. View
2. Controllers
3. Models
4. Services
5. Filters
6. Directives
Why ng-bind, ng-int,ng-module "-"
Ans :- When you define a tag using "-" browser does not parse it as html.
10. Controller will take care of all communication between server and client these Controller and views are communicates by using a shared object called $scope
Advantages of AngularJS :
1. Data Binding
2. Customize & Extensible
3. Code Reusability
4. Support
5. Compatibility
6. Testing
7. Dependency Injection
8. Two way Data-Binding
9. Model,View Controller,Directives,Filters.
Module and Controller in AngularJS
What is Module and how to create it?
1. Module is a kind of Main () method in AngularJS which contains
controllers, services, directives etc.
2. Module in AngularJS can be created by using following syntax.
3. Module is used with ng-app.
A
Module can be dependent on another module like ngRoute,
ui.bootstrap.
What is a controller and how to create a controller?
What is a controller and how to create a controller?
- Controller is a function which defines the data for view to display.
- It can retrieve data from the database by calling a service. Controller is used with ng-controller.
- The syntax to create controller is,
$scope is an object to which the data is attached and it is then retrieved and displayed.Here message is attached to $scope object. So in the Html page which is using this controller by using double curly braces {{message}} the message will be displayed.The controller needs to be registered with a module like this
myApp.controller("myController",
myController);
Steps
to Create Application,
Now
add one html page and just drag and drop angular.min.js in your HTML
page. It will look like this.
Now
add one Javascript file and just drag and drop angular.js in your JS
file. It will look like this.
Following
is the code for the Javascript file .
var
myApp = angular.module("myModule",
[])
.controller("myController",
function
($scope) {
var
friend = {
FirstName:
"smith",
LastName:
"Loin",
Gender:
"Male"
};
var
country = {
Name:
"India",
Capital:
"Dehli",
};
$scope.message
= "Wel
Come India";
$scope.country
= country;
$scope.friend
= friend;
});
Following
is the code for html file.
<!DOCTYPE
html>
<html>
<head>
<title></title>
<meta
charset="utf-8"
/>
<script
src="scripts/angular.js"></script>
<script
src="DemoScript.js"></script>
</head>
<body
ng-app="myModule">
<div
ng-controller="myController">
{{message}}
<br
/>
<br
/>
</div>
<hr
/>
<div
ng-controller="myController">
<div>
Country
Name : {{country.Name}}
<br
/>
<br
/>
Country
Capital: {{country.Capital}}
</div>
<hr
/>
<div>
Friend
FirstName : {{friend.FirstName}}
<br
/>
Friend
LastName : {{friend.LastName}}
<br
/>
Friend
Gender : {{friend.Gender}}
</div>
</div>
</body>
</html>
No comments:
Post a Comment