Category Archives: Angular

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.