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.

Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf...

Importance of choosing website layout

While making websites responsive we heard many terms like fixed, fluid, responsive and adaptive. All these terms have different meaning and cannot be interchangeable. Depends on the usability we can decide which layout design suits best for website requirement.

As a web developer or web designer it is a considerable point that how your website will look like on different devices. So we have to keep the layout matching with the devices on which websites will display.

Fixed:
Fixed layouts are made of set width and height and elements inside the fixed width/height container also have a set height and width weather in pixels or percentages. Fixed or static layout designs remain same on different devices because it is set to not move on any resolution. But the web pages requires horizontal and vertical scroll to fit in the browser window or any other devices.

Fluid:
Fluid aka Liquid designs are created using percentage widths so that it can adjust according to the user’s device resolution. As the container’s width and height are in percentages hence child elements also adjust themselves proportionally because columns are relative to each other. On any device the look of fluid design will be same as elements width and height are set in parentage or em’s i.e. it will take “n%” of page width whichever is mention.

Responsive:
Responsive designs are created using media queries that are considered as breakpoints of general screen resolutions from extra small (mobile) to large (large desktop). This scale up images, wrap texts and adjust layout accordingly. Responsive design is mostly considered as mobile friendly approach to design layouts. Responsive design ensures that user will get best user experience of website while browsing on Desktops, Tablets, and Phone etc.

As said
"A fluid site is responsive, but not all responsive sites are fluid." --Sam.

In fluid layout suppose if element is set 50% of the page width then it will expand according to the screen size. This will look better on mobile devices but on desktop it will look unpleasant. So here comes the part of Responsive design where we can set target widths using media queries [@media screen only and (min-width:600px)] and reset width to be a smaller percentage, making it responsive.

Adaptive:
Adaptive layouts are same as responsive layout only difference between them is adaptive layouts changes according to the device only once when it is loading on browser. Adaptive layouts are not smooth as compared to Responsive layout. Adaptive layout always looks for points from where to adapt the change, this is neither fixed nor fluid.

To know more about the difference between Responsive Vs Adaptive.

while i was researching content i found an nicely written article which can help readers a lot to make their decision easy.