Angular JS
Points to remember about angular js
1. This angularjs is mostly used for single page website
2. It handles all of the DOM and AJAX glue code you once wrote by
hand and puts it in a well-defined structure
3. Everything you need to build a CRUD app in a cohesive set:
data-binding, basic templating directives,
form validation, routing,deep-linking, reusable
components, dependency injection.
4. Angular simplifies application development by presenting a higher
level of abstraction to the developer.
5. AngularJS is open source, completely free, and used by
thousands of developers around the world.
AngularJS Directives
The AngularJS framework can be divided into three major parts:
1. ng-app : This Declares angularjs starts in this part.
2. ng-model : This directive binds the values of AngularJS application data to HTML input controls.
3. ng-bind : This directive binds the AngularJS application data to HTML tags.
AngularJS Example
This is first example of AngularJS.
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body>
Name:<input ng-model="name"
type="text" />
Hello {{name}}
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
In the above example ng-app is the directory indicates that
angularjs code is here to execute.
ng-model is assigned to textbox means that value entered in
textbox is assigned to name variable and for
displaying this name you use expression in format of two
brances(i.e. {{name}})
2.
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body>
First Name:<input ng-model="firstname"
type="text" />
<br />
Last Name:<input
ng-model="lastname" type="text" />
<br />
Hello {{firstname}}{{lastname}}
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
In the abolve example you can assign multiple values to model and
bind together as expression
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="FullName">
First name:<input ng-model="firstName"
type="text" />
<br />
Last name:<input ng-model="lastName"
type="text" />
<br />
Hello {{firstName}} {{lastName}}
<br />
Reverse First Name {{
reversedMessage(firstName) }}
<br />
<script>
function FullName($scope){
$scope.firstName = '';
$scope.lastName = '';
$scope.reversedMessage = function(Name) {
return Name.split("").reverse().join("");
};
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
In the above example we have used controller. Controller is same
like MVC controller.
You can define function in that and also member declaration.
you can call server side method from this. and execute any logic in that.
You can call controller method from your html directly like above.
4.
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="FullName">
First name:<input ng-model="firstName"
type="text" />
<br />
Last name:<input ng-model="lastName"
type="text" />
<br />
Hello {{firstName}} {{lastName}}
<br />
Reverse First Name {{ reversedMessage(firstName)
}}
<br />
<input ng-click="message()"
text="Click Me!" type="button" />
<br />
Mathematical Expression evaluation {{
100*100 }}
<br />
<script>
function FullName($scope){
$scope.firstName = '';
$scope.lastName = '';
$scope.reversedMessage = function(Name) {
return
Name.split("").reverse().join("");
};
$scope.message = function() {
alert("button clicked")
};
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
You can handle click event button. And also you can evaluate
mathematical expression in {{}}. And your click event is in controller.
5.
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyctrl">
<div>
<li ng-repeat="spice in spices">
{{spice.name}} and its spiciness
{{spice.spiciness}}
</li>
</div>
<script>
function spicyctrl($scope){
$scope.spices =
[{"name":"pasilla",
"spiciness":"mild"},
{"name":"jalapeno", "spiciness":"hot
hot hot!"},
{"name":"habanero", "spiciness":"LAVA
HOT!!"}];
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Like in the above example by using ng-repeat you can for looping
purpose. This
Ng-repeat can loop through for every element in object provided. And
this object is defined in controller.
