Category Archives: Angular

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.