In this article we will understand the basic fundamentals of AngularJS.
What is AngularJS?
- Angular is JavaScript library.
- It is a MV* framework, where MV * means:
M- Model : where you store data and state of application.
V- View : which actually renders to user the information they want to see.
* : Controller /Presenter/View-model
Features of AngularJS
- It is an open source library.
- It is comprehensive which means it handles AJAX communication with your server so that you can send and receive data from back-end.This data is stored as plain JavaScript object.
- It supports two way binding, which means that the user input from fields is instantly updated in angular models.
- AngularJS also employees technique called Dirty Checking which means that you don’t have to put data in special structures and call getter and setter methods to read and write to your data . You can simply put data in plain old JavaScript object and Angular will respond whenever your data changes and update your view.
- AngularJS is built on Dependency Injection.This lets you encapsulate pieces of your application better and also improves test ability.
- AngularJS also handles routing for moving from one view to another .This is the key piece in building Single Page Application or SPA.
- AngularJS not only supports unit test but also integrates end to end testing.
Directives :
AngularJS extends HTML by providing its own elements and properties called Directives.These are used to interact with your HTML DOM. It teaches your HTML new tricks.It is an extended HTML vocabulary.
Angular Components:
Everything starts with controller, it is a central player.
Let us take a very basic example to understand working of AngularJS. Here I am writing a small code for displaying Hello World message.
<html ng-app=”app”>
<body>
<h1 ng-controller=”HelloWorldController”> {{helloMessage}}</h1>
</body>
</html>
<script>
angular.module(‘app’, []).controller(‘HelloWorldController’, function ($scope) {
$scope.helloMessage = “Hello World”;
});
</script>
ng-app : Tells the AngularJS to be active in this particular html page .
ng-model : This links the form and the model.This means that any change in control will change the model and vice-versa.
{{}} : It is declarative way of specifying data binding locations in the HTML. AngularJS will automatically updates the text whenever there is change in “helloMessage” property.
ng-controller : Behaviour of the content under this element will be managed using the “HelloWorldController” that is defined in script tag.
$scope : Scope is an object that refers to application model.It is a glue between controller and view.
In the script tag ,we created an angular module,” app", for our application. Then we add the controller’s constructor function to the module using the.controller() method. This keeps the controller’s constructor function out of the global scope.
Try this code by yourself and write your query to the comment box.
Happy Coding!!!…
