In HTML attribute required is to tell that field must be required in order for the form to be valid.
And it is not possible to write condition like required=”true” or required=”false”. It gives you a HTML error. This can be solved using Angular.
While, Using Angular attribute ng-required=”MyCondition” means ‘RequireFun(MyCondition)’ and sets the HTML attribute dynamically for you depending on your condition.
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.
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.
In cases where you have multiple directives on a single DOM element and where the order in which they’re applied matters, you can use the priority property to order their application. Higher numbers run first. The default priority is 0 if you don’t specify one. The key was to remove the attribute: element.removeAttr(“common-things”); and also element.removeAttr(“data-common-things”); (in case users specify data-common-things in the html).
See working solution with html below:
angular.module(‘plunker’)
.directive(‘commonThings’, function ($compile) {
return {
restrict: ‘A’,
replace: false,
terminal: true,
priority: 1000,
compile: function compile(element, attrs) {
element.attr(‘tooltip’, ‘{{dt()}}’);
element.attr(‘tooltip-placement’, ‘bottom’);
element.removeAttr(“common-things”);
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
} }; } }; );
<html ng-app=”plunker”>
<div ng-controller=”DatepickerDemoCtrl”>
<hr/>
<select ng-options=”s for s in selects” ng-model=”el” common-things>
<option value=””></option>
</select>
</div>
</html>
Explanation why we have to set terminal: true and priority: 1000 (a high number):
When the DOM is ready, angular walks the DOM to identify all registered directives and compile the directives one by one based on priority if these directives are on the same element. We set our custom directive’s priority to a high number to ensure that it will be compiled first and with terminal: true, the other directives will be skipped after this directive is compiled.
When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).
If we don’t set terminal:true and priority: 1000, there is a chance that some directives are compiled before our custom directive. And when our custom directive uses $compile to compile the element => compile again the already compiled directives. This will cause unpredictable behavior especially if the directives compiled before our custom directive have already transformed the DOM.
$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches
We use it very rarely. AngularJS actually calls almost all of your code within an $apply call. travel Events like ng-click, controller initialization, $http callbacks are all wrapped in $scope.$apply(). So you don’t need to call it yourself, in fact you can’t. Calling $apply inside $apply will throw an error.
Reinvention of working tools instead of sharpening them, however, remains a contentious issue.
Alright! So teams from Google and Facebook have met to discuss about their JS Frameworks. Yes, Angular and REACT team members had recently met to explore possible scopes of collaborations.. The decision to take on NPM as package manager was also discussed. Although this meeting between two significant JavaScript frameworks indicates an alliance in the making, an actual collaboration seems to be on the cards.
Christopher Chedeau (representing ReactJS) had visited Google Headquarters along with the React team to witness Igor Minar share Angular’s plans of building a Common Language Infrastructure (CLI) that comprises of several JavaScript tools. The intention behind CLI , according to Igor, was to “provide a good default experience out of the box”. He said that it was also due to their belief that the existing, prevalent JavaScript tools did not fulfil Angular team’s expectations. In addition to possible coverage of deployment, the CLI shall cover aspects ranging from scaffolding, skeleton files, setting up the build and testing environments.
The teams have also discussed about:
Animations: where ReactJS team shared the concern about their framework’s interruptible animations which makes state transitions stop and how their framework needs to a way to abstract things multiple levels deep. Angular team mentioned that they have moved to declarative Animations format and demonstrated to ReactJS team.
Renderers: ReactJS team shared about how their rendering concept started – by building a canvas rendered first. They shared how they have much more granular control over state/memory usage. They also shared about ReactNative and how it would to let you write native code and so long as the interface is async with Image decoding on another thread. They opened up to Angular Team that if Angular could try to implement on top of our same primitives, they could go in together.
Immutable JavaScript data structures: Teams discussed about having extensible records/objects that spreads value from original ones. However, the concern of immutability was brought up. Angular Team pointed out that Angular 2.0 (A2) could support mixed immutable and observables/streams. ReactJS agreed with such mix of immutable with observables that would let control better about reusability and object-changes notifications.
Web Workers: Angular team discussed that their goal is to build a non-blocking UI thread. Angular did a first prototype with a React-like virtual DOM and had good performance results. They are looking into handling asynchrony of events. In A2, they have a View Tree instead of Virtual DOM and marshal on the level of Views and not DOM elements. ReactJS team shared that they originally ran React all in Web Worker. In ReactNative they had to provide a different API and do an async wrapper around UIKit APIs. Both the teams shared the dissatisfaction with performance of web workers given the overhead between environments. In order to address the technical concerns, both the teams would start with describing their API surfaces and work on solution/protocol to position it in front of standards committees.
Sharing Performance Tips:
Both the teams from Angular and React shared their thoughts freely. They compared their expectations from each tool and feature. BenchPress could be used as a potential framework for an E2E performance testing. Angular Team explained that upon analysis of measuring performance in a predictable manner, it was found that micro-benchmarks weren’t conducive to framework code which was why their team had tried to move to macro-benchmarks. Angular Team further more discussed the technical aspects of running BenchPress, quantum of Garbage Collection (GC) and also about how WebDriver is being used to control the browser during GC evaluation..
The React team expressed their interest in testing the React’s internals and their performance in a manner contrary to Angular’s way of using browser front-end build system (to run comparisons with previous builds).
Both the teams agreed that performance was indeed a good area to collaborate on despite differences voiced about React not having done anything significant yet about locking down of the kernel and turning extensions off.
This is not the first time that these team have met, however this meeting is being considered as a significant one because of in-depth architectural discussions. The teams have met on earlier occasions as well. Team Angular was seen at the React.js conference at Facebook’s Headquarters in January.