Hybrid angularjs app: Consuming angular 2 components in angular 1.x

Uncategorized

Syntax for using angular 2 components inside angular 1 views.

Using ng-upgrade we can downgrade angular 2 components and services and use those inside our existing angular 1 app, before that we need to make changes.

There are excellent documentation on how to configure our existing application to do that, but once we have it running there are several things that we need to figure out.

TL;DR

  • use ng2 notation for model and event bindings, such as () [] or [()]
  • use ng1 notation (kebab-casing) for input or output variables, so if we declare @Input() parameterId, we should pass it over as [parameter-id]
  • bindings from ng1 controller use ng1 naming, i.e. if using controllerAs syntax, [parameter-id]=”vm.parameterId” or (on-custom-event)=”vm.doSomething()”

Model Binding

We know that in angular2, property bindings are done through [attr.title] while event bindings are (click), lastly for two-way bindings, we can do a [(ngModel)] or banana-in-a-box. These are different in angular 1.x where we use specific directives, such as ng-model, ng-click, ng-value …

 

TO be continued…

 

 

Javascript window.open on Safari browser

Javascript, , ,

I’ve been working on a simple component in AngularJS which makes a call to an API which would return a URL. The component would then open the response URL in another tab.

Safari blocks through it’s popup blocker, and it seems to be doing it for quite a long while, as posted in this post from 2009 .

After about a day looking for answers, I managed to find a somehow easy hack. Open a new tab, and then set the URL of the tab once the API response is returned. Easy!

The code below is written in AngularJs, but it’s very similar in plain old Javascript.

var newTab =  this.$window.open();

myService.getUrl(function(result) {
	newTab.location = result.url;
});

Why Safari is blocking this in the first place?
The user click would trigger the call to the API, which is async. The call to set the location is “from a different thread” and is not a direct result of the original click.

So how did this work?
First we open a new window and assign a reference of it to a variable. This is an instance of the window where we can still allowed to set it’s location. Once we have this variable, it’s just a matter of setting the location once the promise has resolved.

Hope this works for you.