AngularJS is an open-source JavaScript framework, maintained by Google that assists with running single-page applications.
• So it makes both development and testing easier.
• AngularJS' two-way data binding is its most notable feature.
Single-page application:
- Is a web application that fits to a single web page.
- Basically all HTML, JavaScript and CSS are retrieved in single page load.
- Page does not reload at any time or does not transfer to another page.
Two-way data
binding:
- Which means it synchronize the data between model and view:
- It update the view component when the model get change and vice versa.
AngularJS Process:
- First the HTML document is loaded into the browser. At this time the AngularJS JavaScript file is loaded.
- Then AngularJS scans through the HTML to look for AngularJS apps and views and connect them to controllers.
- Then AngularJS executes the controller functions and update (render) the views with data from the model populated by the controller.
- It will then wait for incoming browser events – button clicks, mouse events, etc.
- If any of these browser events require a view to change, AngularJS will update the view correspondingly.
- If the event requires a function to be called, the corresponding controller function is called.
Directives
- Angular uses directives to attach its action into the page.
- They are prefaced with ng- are placed as html attributes.
- Bellow are few directives:
•
ng-app
•
ng-model
•
ng-controller
•
ng-repeat
•
ng-click
Full directive list: http://docs.angularjs.org/api/ng/directive
ng-app
- This is the most important directive.
- Basically this directive tells:
- That this application is a AngularJS application and
- Angular to be active in this portion of the page
ng-app
Ex 01:
<html ng-app>
<body>
<div id=‘div01’>Test 1</div>
<div id=‘div02’>Test 2</div>
</body>
</html>
*In this case whole html body act as
a AngularJS application.
Ex 02:
<html>
<body>
<div id=‘div01’ ng-app>Test 1</div>
<div id=‘div02’>Test 2</div>
</body>
</html>
*In this case only div tag
with id=‘div01’ will start acting as AngularJS application.
Code Sample:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 01 : ng-app</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app>
<h1>{{1+1}}</h1>
</div>
</body>
</html>
ng-model
ng-model is responsible for:
- Binding the view into the model, which other directives such as input, textarea or select require.
- Providing validation behavior (i.e. required, number, email, url).
- Keeping the state of the control (valid/invalid, dirty/pristine, validation errors).
- Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine) including animations.
Code Sample:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 02 : ng-model</title>
<script type="text/javascript“ src="../angular.min.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="data.message">
<h1>{{data.message + " world!!"}}</h1>
</div>
</body>
</html>
ng-controller
- Just JavaScript functions that we add in an Angular application to add some business logic and bind the view with model.
- The ng-controller directive defines which controller will be in charge of your view.
$scope:
- When we write controllers we need to use the $scope.
- Scope is nothing but an object that connects the View with Controller.
- They hold the Model data that we need to pass to view.
Code Sample:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 04 : ng-controller</title>
<script type="text/javascript" src="../angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<div ng-app>
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
</div>
</div>
</body>
</html>
Controller.js
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
View is this part:
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
</div>
Controller is this part:
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
ng-repeat
- The ng-repeat directive instantiates a template once per item from a collection.
ng-repeat
Code Sample:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 05 : ng-repeat</title>
<script type="text/javascript" src="../angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<div ng-app>
<div ng-controller="FirstCtrl">
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
</div>
</body>
</html>
Controller.js
function FirstCtrl($scope){
$scope.contacts =
[
“dinithi.desilva@pearson.com", "sameera.jayalath@pearson.com"
];
} ng-click
- The ngClick directive allows you to specify custom behavior when an element is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 08 : ng-click</title>
<script type="text/javascript" src="../angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<div ng-app>
<div ng-controller="FirstCtrl">
<a ng-click="showMessage()" href=“#">Load Data</a>
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html> function FirstCtrl($scope){
$scope.showMessage = function() {
$scope.data = {message: "Hello World !!"};
};
} - A filter formats the value of an expression for display to the user.
- Also selects a subset of items from array and returns it as a new array.
Code Sample:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 07 : Filters</title>
<script type="text/javascript" src="../angular.min.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="data.message">
<h1>{{data.message | uppercase}}</h1>
<h1>{{data.message | lowercase}}</h1>
</div>
</body>
</html> Hope you got a basic idea about what AngularJS and what it does !!! :)
Add a comment