Tuesday, 29 September 2015

Introduction To AngularJs


AngularJs is a JavaScript web system intended to make web applications basic and simple to keep up.

It was initially created in 2009 by Misko Hevery and Adam Abrons. It is presently kept up by Google. Its most recent rendition is 1.3.14.

What is AngularJS?

HTML is extraordinary for pronouncing static records, yet it wavers when we attempt to utilize it for announcing element sees in web-applications. AngularJs gives you a chance to broaden HTML vocabulary for your application. The subsequent environment is exceptionally expressive, discernable, and speedy to create.

AngularJs develops HTML characteristics with Directives and ties information to HTML with Expressions.

It is a library written in javascript.

AngularJs is disseminated as JavaScript document and can be added to a site page with a <script>.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


AngularJs a toolset for building the system most suited to your application development. It is completely extensible and functions admirably with different libraries. Each component can be changed to supplanted to suit your extraordinary improvement work process and highlight needs.

AngularJs is taking into account the MVC example (Model View Control). Along these lines, AngularJs isolates your RIA application into models, perspectives, and controllers. The perspectives are indicated HTML + AngularJs's own format dialect.

The Models and controllers are determined by means of JavaScript items and JavaScript capacities. In this manner, the perspectives are determined decisively, as HTML ordinarily may be, and the models and controllers are indicated essentially, as JavaScript typically may be.

AngularJs develops HTML with ng-directives.

The ng-app directive characterizes an AngularJs application.

The ng-model directive ties the estimation of HTML controls (info, select and text area) to application information.

The ng-bind directive ties application information to the HTML view.

Center Features

  •   Data-binding: -

It is the programmed synchronization of information in the middle of model and perspective segments. There are different procedures for data-binding.
Binding with brackets

We have a variable set up that we can give information to, we should tie our aseum variable perspective. We can do this straightforwardly into our perspective by utilizing the twofold wavy bracket syntax: {{aseum}}.
<div ng-app="">
  <input type="text" ng-model="aseum">
  <p>{{ aseum }}</p>

Binding with ng-bind directives
Another approach to utilizing tying in Angular applications is to utilize the ng-bind directive. The ng-bind directive binds the innerHTML of the <p> component to the application variable aseum.
<div ng-app="">
  <p>Aseum: <input type="text" ng-model="aseum"></p>
  <p ng-bind="aseum"></p>

One time binding
The last approach to tie information is one-time binding. As the name proposes, this implies the information is just perused once from the source, then the information between the source and the perspective are no more synchronized.

  •    Scope: 

These are questions that allude to the model. They go about as a paste in the middle of controller and perspective. The extension is an exceptional JavaScript object which assumes the part of joining a controller with the perspectives. Degree contains the model information. In controllers, model information is gotten to by means of $scope object.

  •   Controller:

These are JavaScript capacities that are sure to a specific degree. AngularJS applications are controlled by controllers. The ng-controller directive characterizes the application, controller. A controller is a JavaScript Object, made by a standard JavaScript object constructor.
<div    ng-app="myApp"  ng-controller=”myCtrl”>
            Aseum: <input type="text" ng-model="Aseum">
InfoTech: <input type="text" ng-model="InfoTech">
Aseum_InfoTech: {{Aseum + " " + InfoTech}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Aseum = "Aseum";
    $scope.InfoTech = "InfoTech";

  •    Services: 

AngularJS accompany a few implicit administrations for instance $http to make an XMLHttpRequests. These are singleton objects which are instantiated just once in an application.

  •    Filters: 

These select a subset of things from an array and returns another new array.
Adding filters to your Angular application is finished by conjuring the filter technique on angular.module like so: angular.module('app', []).filter('filterName', filterFunction);
Angular.module(‘app’, [])
.controller(‘TestCtrl’, TestCtrl)
.filter(‘capitalize’, CapitalizeFilter);

  •   Directives: 

Directives are markers on DOM elements (for example, components, traits, CSS, and the sky is the limit from there). These can be utilized to make custom HTML labels that serve as new, custom gadgets. AngularJS has assembled in orders (ngBind, ngModel...)

  •   Dependency Injection:

The dependency injection in AngularJS permits you to decisively portray how your application is wired. This implies that your application needs no main() which is typically an unmaintainable wreckage. Dependency injection is likewise a center to AngularJS. This implies that any part which does not fit your needs can without much of a stretch be supplanted.

Favorable circumstances: -

  •   AngularJs gives the ability to make single page application in a perfect and viable way.
  • AngularJS gives information tying capacity to HTML in this way giving the client a rich and responsive experience.
  • AngularJS code is unit testable.
  • AngularJS utilizes dependency injection and makes utilization of the partition of concerns.
  • AngularJS gives reusable segments.
  • With AngularJS, engineer composes less code and get more usefulness.
  • In AngularJS, perspectives are immaculate HTML pages, and controllers written in JavaScript do the business handling.
  • AngularJS applications can keep running on every single significant program and advanced mobile phones including Android and iOS based telephones/tablets.

Weaknesses: -

· Not Secure: Being JavaScript just system, application written in AngularJS are not safe. Server side validation and approval is must to keep an application secure.
·  Not degradable: If your application client cripples JavaScript then client will simply see the fundamental page and nothing more.