Sunday, July 30, 2017

Advantages of AngularJS

  • Open source JavaScript MVC framework.
  • Supported by Google
  • No need to learn another scripting language. It's just pure JavaScript and HTML.
  • Supports separation of concerns by using MVC design pattern.
  • Built-in attributes (directives) makes HTML dynamic.
  • Easy to extend and customize.
  • Supports Single Page Application.
  • Uses Dependency Injection.
  • Easy to Unit test.
  • REST friendly.

Following are the advantages of AngularJS over other JavaScript frameworks:
  • Dependency Injection: Dependency Injection specifies a design pattern in which components are given their dependencies instead of hard coding them within the component.
  • Two way data binding: AngularJS creates a two way data-binding between the select element and the orderProp model. orderProp is then used as the input for the orderBy filter.
  • Testing: Angular JS is designed in a way that we can test right from the start. So, it is very easy to test any of its components through unit testing and end-to-end testing.
  • Model View Controller: In Angular JS, it is very easy to develop application in a clean MVC way. You just have to split your application code into MVC components i.e. Model, View and the Controller. Directives, filters, modules, routes etc.
at No comments:

Module in Angular

  • A module is a container for component of angular - controllers, directives, services, filters etc.
  • It supports separation of concern using modules.
  • It is an entry point. Using module we can decide how the AngularJS application should be bootstrapped.

We can create a simple module using the following code.
 Example: 
           var myAppModule = angular.module('myApp', []);

In the above example, the angular.module() method creates an application module, where 
  1. First parameter is a module name which is same as specified by ng-app directive.
  2. Second parameter is an array of other dependent modules [ ]. 
In the above example we are passing an empty array because there is no dependency.

Type of Bootstrapping –
1.Automatic bootstrapping – In tag of html page
   Example: 
          <html ng-app=“module Name”>

2.Manual bootstrapping– In JS by fetching DOM element.
Example: 
                          var app = angular.module('myApp', [])

                                                   .controller('NameController', function ($scope) {
                                                                     $scope.StdName = 'Amit';
                                                            });
                           //manual bootstraping 
                           angular.element(document).ready(function () {
                                          angular.bootstrap(
                                             document.getElementsByTagName(‘html’),[‘myApp’]);
                                  });
Angular initializes automatically when DOM content is completely loaded or when the angular.js script is evaluated.

 Why Manual Bootstrap
  • Asynchronously loaded data that need to perform an operation before Angular compiles a page.
  • To create App build with Cordova. Cordova is a platform that is used for building mobile apps using HTML, CSS and JS.
IMPORTANT: 
  • Not mix up the automatic and manual bootstrapping your app.
  • No need use the ng-app directive when manually bootstrapping your app.
  • Define the modules, controller etc. before manually bootstrapping .

at No comments:

About AngularJS

  • Initially it was developed by Misko Hevery and Adam Abrons.
  • It is being developed by Google in 2009
  • Open source at GitHub
  • Angularjs.org (new version angular.io)


at No comments:

What is AngularJS

  • AngularJS is an open source JavaScript MVC framework for web applications.
  • AngularJS extends Html behavior by creating custom tags or adding attributes in tags.
  • AngularJS can be used to create Single Page Applications (SPA).
  Some of the reasons  would prefer AngularJS:
  • You can create a template and reuse it in application multiple times.
  • You can bind data to any element in two ways, where two-way actually means changing data will automatically change element and changing element will change the data.
  • You can directly call the code-behind code in your html.
  • You can validate forms and input fields before submitting it without writing a single line of code.
  • Allows you to control complete DOM structure show/hide, changing everything with AngularJS properties.
  • AngularJS allows you to write basic flow end-to-end testing, unit-testing, UI mocks.
AngularJS provides all the features you need to build a CRUD application like data-binding, data validation, url routing, reusable HTML components and most importantly dependency injection.

at No comments:
Subscribe to: Comments (Atom)