Category Archives: Angular

ANGULAR 2 VS ANGULAR 4

Angular 2 Vs Angular 4

The year 2015-2017 saw a host of new frameworks from the house of JavaScript. Though several of their offerings were unsuccessful to make a resounding impact, Angular and React survived the test of time to become the go to frameworks for successful Angular development. With several frameworks have made headway in the world of application development, Angular has found a special place as one of the best open-source JavaScript frameworks.

This article focusses on the basic comparison between Angular2 and Angular4 and whether or not it is good enough to make a switch. First, let us explore in detail the various features and highlights of Angular2 to be able to make a practical comparison with its successor.

ANGULAR-2

The Angular version two was primarily aimed at the development of mobile applications allowing developers to create a cross platform environment for their applications. The key highlight of Angular 2 was the removal of various supplementary modules from Angular’s core which simplified the process thus improving the performance. The supplementary modules have now found their way to Angular’s ever-growing library of modules where the users can effectively choose and select the components they want while leaving out the redundant components.

Angular 2 was specifically aimed at ES6 and “evergreen” modern browsers. The advantageous point of these browsers is that these automatically update to the most recent version. While developing for these browsers, Angular 2 provides various hacks and workarounds that allow the developers greater freedom build their code. Angular 2 eliminates several limitations that existed previously.

ANGULAR 2: FEATURES AND PERFORMANCE

Angular 2 was developed on AtScript, which is a superset of ES6. Traceur compiler combined with ES6 was employed to process Angular that enables it to generate ES5 code. It utilizes TypeScript syntax to create runtime type assertions instead of compiling time tests. However, it is not compulsory to use AtScript to compose Angular apps. The user can alternatively use plain JavaScript or ES5 to attain effective results. Let us explore deeper into the various key features of Angular 2.

RENEWED DEPENDENCY INJECTION (DI)

Dependency Injection was one of the important factors that set Angular apart from its primary competitors. Dependency Injection refers to a program design pattern where a specific program commendably gets hold of its dependencies instead of producing them. Dependency Injection is very helpful in cases of modular development and element isolation. Despite that DI has also faced several obstacles since the era of Angular 1.x. Angular 2 finally came with the answers to the problems along with some of the missing features such as child injectors and lifetime/scope control.

ANNOTATION

One of the major advantages of Atscript is that it supplies useful tools that can help functionally link metadata. This eases out the process of building the object instances by supplying the essential material into the DI library. The information entered will check for the relevant metadata when a function is called, or a class instance is created. A developer can also easily override the parameter information by hitting the “Inject” annotation.

CHILD INJECTORS

A child injector has the privileges such that it inherits all the functionalities possessed by its parent injectors, but it also comes with a capacity to override them at the child level. This capability provided by Angular 2 gives the developer a free hand to call out and mechanically override several components under a variety of scopes as the situation would demand.

ANGULAR4

Even though Angular 2 was a significant improvement from its predecessors, Angular 4 takes it forward with some new features and improved capabilities.

Let us study one by one how Angular 4 has secured itself an edge over Angular 2 and how AngularJS development organizations can leverage it.

FASTER AND COMPACT

Angular 4 applications are smaller as they consume less space and run faster than its older versions. The team working behind Angular are constantly making developments on a regular basis to iron out the inconsequential technical glitches that may exist.

SIGNIFICANT VIEW ENGINE IMPROVEMENT

Angular 4 series have come up with several changes which also include several view engine twists to diminish the size of the generated code for various components by as much as 60 percent. This update version has claimed to reduce huge production bundles to mere kilobytes.

ENHANCED *NGIF AND *NGFOR

One of the main features that Angular boasts of are an improved template binding syntax. The improvement of the *ngIf and *ngFor comes after significant criticism for the lack of the “else” and “if-then-else” clause. Developers can employ an if/else design syntax, or introduce local variables such as “if” to unroll an observable.

THE VERDICT

Angular has come a long way since Angular 1.x to reach the version that prevails today. This evolution of Angular is expected to continue to bring in more revolutionary features to make the development team’s job easier. Even though Angular can be slight challenging to adapt at first, but those who are familiar with the functioning of Angular 2, will find it simpler to adopt Angular 4.

WHAT IS NAMESPACING AND WHY IS IT IMPORTANT?

What is namespacing and why is it important?

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. Its Important for helping organized blocks of functionality in the application into easily manageable groups which can be uniquely identified.
 
 
 
 
 
 
 
 
 
 
 

ANGULAR 4.2

Angular 4.2

The Angular team continues to publish new versions of Angular according to the Semantic versioning. Angular version 4 was released on March 16, six months’ later version 2 was released. In the last three months two minor versions and a lot of patch versions were born with new stuff. Angular 4.2 is already here and we have a huge number of new features added for making animations easier and powerful. Part of them are defining the reusable animations, querying for inner elements, animating when routes change and building/controlling an animation using AnimationBuilder. So, let’s dive deep-in and know about the new features in Angular 4.2.

Angular 4.2

WHAT’S NEW?

  • Angular Forms now includes validators for min and max attributes.
  • Developer can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef.
  • Enhanced i18n tooling including MissingTranslationStrategy and location notes in xliff2 files.
  • New compiler flag alwaysCompileGeneratedCode is available in opt-in, and will be turned on by default in the future.

NEW FEATURES IN ANGULAR 4.2
Forms

Two new validators joins the existing requirement, minLength, maxLength, email, and pattern. Min and Max helps the developer to validate whether the input is at least or at most the value specified or not.

<input type=”number” [(ngModel)]=”user.age” min=”0″ max=”130″>

Update (2017-06-17): The min and max validators have been temporarily removed from Angular in version 4.2.3, as they are a breaking change. They’ll return in a major version, maybe 5.0.0.

Angular Animations

There are huge number of new features to make working with Animations easier and more powerful. Some of the new feature are:

  • Configure options and set input variables within animations.
  • Define reusable animations using animation().
  • Stagger multiple elements within an animation using stagger().
  • Enable queried elements to trigger their own animations.
  • Orchestrate a full-blown animation when routes change.
  • Programmatically build/control an animation using AnimationBuilder

A new query function has been introduced in the animation DSL, allowing to query the elements in the template. It uses querySelectorAll behind the scene, so the developer can use an element or a class as parameter. It also supports pseudo-selectors, and that opens a few interesting possibilities!

For example, you can now easily animate elements in a NgFor:

<div [@races]=”races?.length”>

<button class=”btn btn-primary mb-2″ (click)=”toggle()”>Toggle</button>

<div *ngFor=”let race of races | slice:0:4″>

<h2>{{race.name}}</h2>

<p>{{race.startInstant}}</p>

</div>

</div>

WITH THE FOLLOWING ANIMATION

trigger(‘races’, [

transition(‘* => *’, [

query(‘:leave’, [

animate(1000, style({ opacity: 0 }))

], { optional: true }),

query(‘:enter’, [

style({ opacity: 0 }),

animate(1000, style({ opacity: 1 }))

], { optional: true })

])

])

Now, every time an element is removed from the races array, it will slowly fade out. And when an element enters, it will slowly fade’s in.

Animation has also been added to build reusable animations. The syntax allows to have dynamic parameters with default values. The developer need to use a reusable animation, they can call useAnimation, and override the default parameters if they want to.

FINAL WORD

That’s all for this release! The focus was mainly on animations and tests, and the team is also working on reducing the bundle size of the applications, with the help of the Google Closure Compiler. We think we are going to learn more about that very soon!

ANGULAR 1 Vs ANGULAR 2

Angular 1 Vs Angular 2

AngularJS is a structural framework for dynamic web apps. It lets the user to use HTML as their template language and extends HTML’s syntax to express their application’s components clearly and concisely.

There are many conceptual and syntactical differences between Angular 1 and Angular 2. In this article, we are going to explain you the major differences between the above frameworks.

1) AngularJS 1 is easy to setup. All you need to do is to add a reference to the library and you are good to go. Whereas AngularJS 2 is dependent on other libraries and it requires some efforts to set up.

2) Angular 2 provides more choice for languages. The developer can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Whereas, Angular 1 supports only ES5, ES6, and Dart.

3) Angular does not have in-built with mobile support, whereas Angular 2 is mobile oriented.

4) In Angular 1 there is no usage of controllers and $scope, whereas in Angular 2 con-trollers has been replaced with components. Angular 2 is component based.

ANGULAR 2 COMPONENTS USING TYPESCRIPT

import { Component } from ‘angular2/core';

@Component({

selector: ‘prodsdata’,

template: `

<h3>{{prods.name}}</h3> `

})

export class ProductComponent {

prods = { name: ‘Prod1′, quantity: 1 };

}

* Angular 1 consists of two ways to bootstrap angular. One is using ng-app attribute and other through code.

<script>

angular.element(document).ready(function() {

angular.bootstrap(document, [‘myApp’]);

});

</script>

SAY GOODBYE TO NG-APP

Angular 2 doesn’t support ng-app. Say goodbye to ng-app. The only way to support angular is through code.

import { bootstrap } from ‘angular2/platform/browser';

import { ProductComponent } from ‘./product.component';

bootstrap(ProductComponent);

The bootstrap is a function; it takes starting component which is also a parent component of the angular application.

* The Structural directives syntax is changed. ng-repeat is replaced with *ngFor in Angular 2.

ANGULAR 1 STRUCTURAL DIRECTIVES

<ul>

<li ng-repeat=”technology in technologies”>

{{technology.name}}

</li>

</ul>

<div *ngIf=”technologies.length”>

<h3>You have {{technologies.length}} technologies.</h3>

</div>

* In Angular .2 local variables are defined using a hash (#) prefix.

* In Angular 1, ng-model is used for two-way data binding, but in Angular 2 it is replaced with [(ngModel)].

* One of the major advantages of Angular is Dependency Injection. Angular 2 consists of DI but, there is a different way to inject dependencies. As everything is a class in Angular, so DI is achieved through a constructor.

THE VERDICT

Though the above two frameworks are similar, there are some essential differences in these two processes. Angular 2 is a really big step forward. And it certainly requires some efforts to migrate from Angular 1 to Angular 2. Both the tools have equal importance when compared with each other on the basis of functionality. The choice is always depends on the need and the requirements of the project.

HOW TO CONVERT ANGULAR JS1.X FILTER TO ANGULAR JS 2.0 PIPES?

How to convert angular js1.x filter to angular js 2.0 pipes?

Create pipe class
import { Pipe, PipeTransform } from ‘@angular/core';
@Pipe({name: ‘filter1′})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
return exponent; // do something with your vallue
}
}
After that in your component add and include pipe
import { Component } from ‘@angular/core';
import { ExponentialStrengthPipe } from ‘./exponential-strength.pipe';
@Component({
selector: ‘power-booster’,
template: `

<h2>Power Booster</h2>

<p>Super power boost: {{2 | filter1}}</p>
`,
pipes: [ExponentialStrengthPipe]
})
export class PowerBoosterComponent { }

ANGULAR MATERIAL DESIGN

Angular Material Design

Material Design is a language developed by Google. It aimed to make a persistent experience across all Google applications & platforms such as YouTube, Android, Google Play, Inbox, and Gmail. Google has announced Material Design at the 2014 Google I/O conference.

Angular Material Design

In this article we’re going to explore about Angular Material Design and its importance.

ANGULAR MATERIAL IS ABOUT:

Angular Material is a UI component library for Angular JS developers. Angular Material components help the user in constructing attractive, steady, and functional web pages and web applications while complying with modern web design principles such as browser portability, device independence, and graceful degradation. It helps the user in creating faster and responsive websites and it is inspired from Google Material Design.

SALIENT FEATURES OF ANGULAR MATERIAL DESIGN:

  • In-built responsive designing.
  • It also includes new versions of common user interface controls such as, buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
  • Standard CSS with basic essential footprint.
  • It enhances the specialized features like cards, toolbar, speed dial, side navigation, and swipe.
  • Cross-browser can be used to create reusable web components.

RESPONSIVE DESIGN

Angular Material has an in-built responsive designing so that, the website which is created using Angular Material will be recreated depending on the device size. The Angular classes are created in such a way that the website has to fit in any screen size. The websites which are created using Angular Material is fully compatible with PC, tablets, and mobile devices.

PROTRACTILE

  • Angular Material is by design is very minimum and flat.
  • It is designed by considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
  • It supports bold colors.
  • The colors and shades remain constant across various platforms and devices.

Usage of Angular Material
There are two ways to use Angular Material, they are as follows:

  • Local Installation
  • CDN Based Version

Local Installation: A user can download the Angular Material libraries using npm, jspm, or a bower on a local machine and can include it in HTML code.

CDN Based Version: A user can include the angular-material.min.css and angular-material js files into their HTML code directly from the Content Delivery Network.

Local Installation:

  • Firstly, the user has to install Node.js.
  • Use the following command to install Angular material libraries
  • npm install angular-material
  • The Output will be as shown below
  • angular-animate@1.5.2 node_modules\angular-animate
  • angular-aria@1.5.2 node_modules\angular-aria
  • angular-messages@1.5.2 node_modules\angular-messages
  • angular@1.5.2 node_modules\angular
  • angular-material@1.0.6 node_modules\angular-material
  • npm will download the files in node_modular > angular-material folder.

CDN Based Version:

A user can include the angular-material.css and angular-material.js files into HTML code directly from the CDN.

YEOMAN ANGULAR GENERATOR

YEOMAN ANGULAR GENERATOR

A MODERN DEVELOPMENT KICKSTARTER

yeoman

What is YEOMAN – A quick summary:

Yeoman is an open-source client-side (MVC-MODEL VIEW CONTROLLER) platform to create Development Stack, which consists of tools and frameworks designed to help the developers to build high quality web applications. Yeoman runs as a command-line interface which is written in node.js. Yeoman provides a local development server and optimizes the production code for deployment.

YEOMAN Architecture:

Yeoman is a collection of three tools: YO, GRUNT, BOWER. These 3 tools provide everything for a developer to get started on a project.

YO

Is a tool that generates essential assets for a project like style sheets, JavaScript, and views.

GRUNT

Is a task runner that will automate things like converting sass files to css, and optimising images. Grunt performs repetitive tasks like minifying, and compilation process of running an application instead of doing it manually.

BOWER

To develop any application it needs basic requirements like widgets, Framework, assets, and Library files. Bower is a package Manager, It will find and download all required files for our application. Bower requires GIT.

Prerequisites for YEOMAN:

Node, npm, Git, compass (If application needs sass compilation). Compass in-turn requires Ruby and Ruby gems.

Getting started with YEOMAN:
1.Go to command prompt, and install Npm install -g grunt-cli bower yo generator-angular.
2. Create a folder in local drive, move to that folder in command prompt.
Execute the command yo angular <>
e.g. yo angular sampleApp
Now, Everything will be taken care of by, Yeoman generator.
Generator will create the following files and folders with default and basic configurations.
Application will be generated with app and bower components as illustrated bellow:

Starting Your Application:
The generated gruntfile has an inbuild task that will create a simple webserver so that we can preview our app.
We can start running the application by using this command.

Grunt serve
Once the server is started, grunt will automatically launch our application with default port 9000.

OTHER YEOMAN GENERATORS:
With Yeoman, below generators can also be created:
Backbone.js – generator-backbone
Ember.js – generator-ember
Jquery – generator-jquery
Wen-app- generator-webapp
These generators are installed through npm globally.
Npm install –g [generator-name]

ANGULAR AUTHENTICATION PROCESS WITH OAUTH

Angular Authentication Process with OAUTH

OAuth is an open protocol that allows secure authorization in a simple and standard method from web, mobile and desktop applications. The OAuth 2.0 authorization framework enables a third party application to obtain limited access to HTTP service”. OAuth in angular refers to authentication process for resource owners to authorize third party access to server without sharing their credentials. It is tailor made to work with Hypertext Transfer Protocol and it is commonly used as a way for internet citizens to log into third party accounts using their Microsoft, Google, or Facebook account. Concept of ‘secure delegated access’ differentiates OAuth from other major authentication standards. This open standard for authentication allows access tokens to be issued to third party clients with the server custodian’s prior permission.

Secure Authentication Redefined and Reloaded

Some obvious similarities exist between OAuth and OpenID (an open standard protocol that allows users to be authenticated by third party sites). OAuth 2.0 specification defines OAuth as a delegation protocol which is highly useful for conveying authentication decisions across a network of web enabled applications and APIs. It is a well known fact that OAuth 2.0 is used for providing mechanisms for user authentication. Many web developers and API providers mistakenly refer OAuth as an authorization protocol. This confusion comes from the fact that OAuth is used inside of authentication protocols and newbie web developers reach the wrong conclusion that they can accomplish user authentication by simply using OAuth.

Authentication tells an application who the current user is and whether or not they are present. A full authentication protocol will probably indicate a number of attributes about a user like email address.

OAuth is recognized as the best tool for client authorization and there exists lot of authentication events in OAuth. Some web entities can be used along with OAuth to create an authentication and identity protocol. Even in this situation, the core functionality of OAuth remains intact and the client application turns out to be a sub category of identity API.

One best advantage of angular authentication process with OAuth is that it allows management of end user consent. Needless to say, end user consent is very important in cross domain identity federation at internet scale. It’s another amazing benefit is that a user can delegate access to other protected APIs alongside their identity at the same time using the one and only OAuth. OAUTH 2.0 is the second evolution of OAuth protocol and it is not compatible with OAuth 1.0. analysis of a website New version of OAuth will provide authorization flows for web applications, mobile applications, mobile phones and living room devices.

In OAuth, token as a proof of authentication is designed to be opaque to the client and the client should be able to derive some information from the token in user authentication. Client is the authorized presenter of token and audience is the protected resource in a typical OAuth model.

Angular Authentication Process

Boon for Web and Mobile Developers

Since access token can be traded for user attributes in newest versions of OAuth, we may think that possession of a valid access token is the credential to prove that a user is authenticated. Using OAuth, refresh tokens and assertions can be used to get access tokens in the absence of user. Because OAuth is a delegation protocol, the principle “access token is usable along after the user is no longer present” is fundamental to its design. Issue of injection of access tokens in OAuth can be tackled by using the authorization code flow and by only accepting tokens from authorization server’s token end point.

OAuth handles injection of invalid user information by getting the authentication information directly from identity provider and by providing authentication information with verifiable signature.

As OAuth 2.0 is portrayed as a framework than a defined protocol, it is not interoperable with any other OAuth 2.0 implementations. OAuth is pretty popular for its role as an authorizing mechanism to consume secured RSS/ATOM feeds. Amazon, Daily Motion, Deviant Art, Dropbox, Facebook, Flickr, Foursquare, Google, Google App Engine and Instagram are major service providers of OAuth.

Open ID Vs Authentication Using OAuth

In Open ID, the process starts with the application asking user for their identity (In most cases, it will be the login request to which the user provides Open ID rather original login information). As far as OAuth is concerned, the application specifically requests a limited access OAuth token. Application Program Interface provider in OAuth token allows application access because it trusts valet keys. It is an undeniable fact that OAuth has redefined secure authentication in an innovative way. OAuth will be of immense use in building webpage widgets, JavaScript based apps, and browser based apps.