Overview of AngularJS

Prerequisite

• Basic knowledge of HTML
• Basic knowledge of CSS
• JavaScript Implementation

Why AngularJs?

• Two-way data binding - This feature provides the most convenient aspect of Angular. You no longer need to query DOM each time to update it.
• Dynamic HTML generation - The best of all
• Makes tasks like binding, templating, routing, and unit testing etc. much simpler
• Lightweight (< 36KB compressed and minified)
• Supported by IntelliJ IDEA and Visual Studio .NET IDEs
• Dependency injection: In Angular, you can inject as many dependencies as you want into a particular segment. You no longer need to create instances and initiate the dependency instances for using them.
• Less Coding
• Reusable Components
• There are multiple useful features, but these features above increase the preference for Angular over other JS frameworks.
• An Introduction
• Developed in 2009 by Misko and Adam Abrons
• Is open source and completely free
• Licensed under Apache and maintained by Google
• Powerful JavaScript Framework
• Used to create SPA projects

Features of AngularJs

• Used to create RIA
• Helps to write application using MVC Architecture
• Application in AngularJS is cross-browser complaint
• Automatically handles JavaScript code as per browser
• Data-binding
• Scope - Scope is a special JavaScript object, which plays the role of joining controller with the views.
• Controller - AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive.
• Services - AngularJS supports the concepts of "Separation of Concerns" using services architecture. Services are JavaScript functions and are responsible to do a specific task only. This makes them an individual entity, which is maintainable and testable.
• Filters - Filters are used to change and modify the data and can be clubbed in expression or directives using pipe character. Some basic filters are: uppercase, lowercase, currency, order by
• Directives
• Routing
• Model View Controller

Advantages of AngularJs:

• Unit Testing Ready
• Built by Google
• Great MVC
• Comprehensive
• Intuitive

AngularJs Popular Examples :

• Video Streaming Apps
• YouTube’s app for Sony PS3
• Netflix.com
• User-Review Applications
• GoodFilms offers movie reviews to the users
• Travel Apps
• JetBlue’s flight booking travel app
• Weather Apps
• Weather.com
• User Generated Content Portals
• Freelancer.com - Offers user-generated content
• Mobile Commerce
• MallZee
• e-commerce
• Amazon
• Social Apps
• LinkedIn

Top 5 Frameworks for the Future:

• Angular.js
• Vue.js
• React.js
• Aurelia.js
• Ruby

References

https://angularjs.org/

https://alternativeto.net/software/angularjs/

https://builtwith.angularjs.org/

ECMAScript 2015 (ES6) – New Features – PART 1

Constant:

We heard many times about Constant variables in Object Oriented Programming like C++, Java etc. now JavaScript also introduces the concept of constant variables in ES6(better late than never). Constant variables cannot change their values as they cannot be reassigned and their scope restricted to the block in which they declared. Also these variables declare using const must be initialized while declaration.

Example: const myVar = 5;

Default Parameters: 

Before ES6, we were setting hard coded values to the variables such as 0 (by default false in JS) or by using logical OR (||) operator which is not the good practice to code. But now we can set the default values of variables inside signatures of functions.

For example:

Now:

var myVar = function (val1 = 50, myColor = 'red', defaultUrl = 'http://www.google.com') 

{ 

    //code block

}

Before:

function myFuntion (x, y) {

x = x || 10;

y = y || 11;

console.log(x + y );

}

Block-Scoped Variables: 

Like “Orange is the new black” a well-known tv-series, In JS “let” is a new “var” which allows to scope the variable into the code blocks. You can differentiate between var and let here. let scope is only there till the scope of the block in which they defined as well as in any contained sub-blocks while scope of a var variable is the entire enclosing function. You can found the best example here.

function varTest() {

var x = 1;

if (true) {

var x = 2; // same variable!

console.log(x); // 2

}

console.log(x); // 2

}

function letTest() {

let x = 1;

if (true) {

let x = 2; // different variable

console.log(x); // 2

}

console.log(x); // 1

}

Block-Scoped Functions:

Earlier developers were bound to follow the IIFE (Immediately invoked function expressions) because of unavailability of global vs local scope proper differentiation but now with the ES6 new feature block scoped functions and variables situation is better now. This also avoids the hoisting situation, though hoisting is still existing but with the better error expression which are helpful for developers.

Example of hoisting in ES5:

(function(){

console.log(a); //undefined

var a = 10;

})();

Example of hoisting in ES6:

{

function foo(){

console.log(a); //reference error, a is not defined

var a = 10;

}

}

Example of block scope functions:

{

function test(a, b){

return a + b;

}

console.log(test(2, 3)); // print

{

function test(a, b){

return a * b;

}

console.log(test(2, 3)); // print 6

};

Advantage of block scoped functions is 1) we don’t need to write complex IIFE syntax and 2) we don’t need to store functions into variables instead we can pass parameters directly into function signature.

Such as: function (p1, p2….) {};

For more reference visit.

Arrow Functions: 

Also known as “fat arrows” because of its shorter syntax for writing function expression i.e. =>. Arrow function also changes the way of writing typical function expressions. If using an expression after an arrow, the return is implicit, so no return is required.

For example:

var myNumber = [1, 2, 3, 4];

Before...

var getOddNum = myNumber.filter(function(number) {

return number % 2;

});

console.log(getOddNum);

Now...

var getOddNum = myNumber.filter(number => number % 2);

console.log(getOddNum);

The major advantage of arrow function is that it changes the binding of “this” value.

In ES5, we have to store parent “this” value into another variable to use them further else they create their own “this” reference.

Example:

function exampleES5() {

this.seconds = 0;

window.setInterval(function() {

this.seconds++;

}.bind(this), 1000);}.bind(this), 1000)

}

var counterA = new exampleES5();

window.setTimeout(function() {

console.log(counterA.seconds);

}, 1200);

After...

lexical scope:

function exampleES6() {

this.seconds = 0;

window.setInterval(() => this.seconds++, 1000);

}

let counterB = new exampleES6();

window.setTimeout(() => console.log(counterB.seconds), 1200);

And while looking for few example I found very easy and best example here.

As I want to write about each and every new feature of ES6, I will continue this series in next parts.