Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects.
Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and
decide which view is to be updated to show the updated model based data.
AngularJS come with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.
Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.
Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets.
AngularJS has built-in directives (ng-bind, ng-model, etc)
In the MVC pattern, the different aspects of the application are broken into components to separate responsibilities. The Model contains the data and logic, the View contains the visual layout and presentation is following :
Model : It is the lowest level of the pattern responsible for maintaining data.
View : It is responsible for displaying all or a portion of the data to the user.
Controller : It is a software Code that controls the interactions between the Model and View.
Andularjs directives are used to extend the functionality of HTML. Most of the directives in AngularJS are starting with ng- where ng stands for Angular.
The most common angularjs directives are Following :
ng-app : This directive starts an AngularJS Application.
ng-init : This directive initializes application data.
ng-model : This directive binds the value of HTML controls (input, select, textarea) to application data.
ng-repeat : This directive repeats html elements for each item in a collection.
The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.
The ng-init directive defines initializes an AngularJS application. It defines the initial values for an AngularJS application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.
The ng-model directive binds the value of HTML controls (<input>, <select> or <textarea>) to application data. In following example, we've defined a model named "name".
The ng-model directive binds the value of HTML controls (<input>, <select> or <textarea>) to application data. In following example, we've defined a model named "name".
The ng-repeat directive repeats HTML elements for each item in the specified array collection. In following example, we've iterated over array of countries
The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.
The Following directives in AngularJS who add/remove classes :
In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "showBtn">Free Time Learn
In below example, we've added ng-hide attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "HideBtn">Free Time Learn
It is an application object. And behaves as the owner of the apps variables and functions. Scope object has access to both View and controller. Thus it works as a medium of communication between both of them. This object contains both data and functions. We can use it to access model data of the controller.
Following are the key characteristics of the scope object.
It provides observers to watch for all the model changes.
Provides the ability to propagate model changes through the application as well as outside the system to other associated components.
Scopes can be nested in such a way that they can isolate functionality and model properties.
Provides an execution environment in which expressions are evaluated.
Every AngularJS application has a “$rootScope” that is the topmost scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope we can set the value in one controller and read it from the other controller.
In AngularJS you can make your own service, or use one of the many built-in services. AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the application.
Because it is loosely couped with the backend, so any type of backend rest services can be called out from the angular services, where as the spring MVCs tightly coupled compare to angular js where view also should be in JSP/JSF/ any Java supported technologies.
As this is a great single page application framework, it provides awesome next generation user experience.
As angular js is a widely used for mobile end application developments, it beats other frameworks and stay front for many reasons including this.
