Angular JS – A New Era of Front End Programming
Angular JS is an open source java-script MVC framework developed by Misco Hevery/Adam Abrons and maintained by Google and individual developers Community.
It is being described by Angular Team as the “Structural framework for dynamic web applications”. Its main motive is to make the development and testing of Single Page Applications(SPA) easier and effective by providing a client side MVC architecture.
It basically extends and adapt HTML vocabulary with some additional declarations that are useful for web applications. With the concept of Two way data binding using scope it facilitates the automatic synchronization of views and models.
The design goals of Angular JS includes the following points :
1. To decouple the Application logic with the DOM manipulation.
2. To decouple the server side of the application with the client side. It makes the development of both run in parallel.
3. To provide a complete package starting from designing the UI through writing business logic, to testing.
Lets see the Architectural Pattern Diagram which is self explaining :
Just a simple example how to start with Angular JS
<!DOCTYPE html>
<html lang=”en”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script>
</head>
<body ng-app=”myapp”>
<div ng-controller=”HelloController” >
<h2>Hello {{hello}} !</h2>
</div>
</body>
<script>
angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.hello = “World, AngularJS”;
} );
</script>
Example Explained :
1. Here ng-app is a built-in directive of Angular JS which is needed to be defined to auto bootstrap the angular js application.
And ng-app contains the name of our module which we created in our JS code.
2. After that ng-controller attribute is used which tells Angular JS that which controller to use with this view.
3. Also you can see the {{hello}} text. This is a part of AngularJS’s template system which tells Angular to write the “model” value named hello (given by $scope.hello = “World, AngularJS”;) to the HTML at this location.
4. $scope is the an object that refers to the application model. It holds the data to display in the view.
5. Its better to place HTML and JS code on different files to make MVC effective.
“ Just give a start you will really start loving it.”
