Welcome to FindNerd. Today we are going to discuss angularJS. AngularJS is nothing but a javascript framework. It is open-source and managed by the Google. AngularJS works for dynamic web applications and mostly used to develop the single page applications. It uses as client and server side framework. AngularJS added extra and useful features in simple HTML. It makes the development as well as testing easy and well maintain.
Now a days most of the web applications are using this wonderful framework. This framework reads HTML page and interprets the additional tags added by this framework. It plays with javascript variables and uses their values in dynamic process. This framework improves the testability as well as performance.
Now we will discuss the basic features of AngularJS. Please have a look.
A) Data-binding : It is synchronization of data between the model and view.
// data model
var findnerd = angular.module('myFindnerd', []);
findnerd.controller('findnerdCtrl', function($scope) {
$scope.question = "What is angular";
$scope.answer = "Javascript framework";
});
// HTML view with ng-bind directives
<p ng-bind="question"></p>
// HTML view with double braces
<p>Answer: {{answer}}</p>
In above example we are binding data with model and views. There are two different ways to access the variable values. one is using ng-bind directive and other is using double braces.
B) Scope : It is nothing but a application object.
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/findnerd.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container" ng-controller="FindnerdCtrl">
<h1>Findnerd</h1>
<ul>
<li ng-repeat="airport in airports">{{airport.code}}
- {{airport.city | uppercase}}</li>
</ul>
</div>
</body>
</html>
In above example we have attached the required angularJS library files as well as controller files to bind the data. We have set the scope for div.container. Inside this div we can access the data from findnerd controller.
C) Services : There are many in-built services available such as http, timeout etc. You can also build your own services as well.
D) Filters : Useful to format the data. There are different filters available such as uppercase, json, orderBy etc.
E) Dependency Injection : It is helpful for the developer to build the application in easy and manage way.
There are many more features available as well. We will discuss the concepts of angularJS in more details in our upcoming blogs. Continue reading...
Thank you for being with us!
0 Comment(s)