Angular 2.0 Running in a native mobile app using NativeScript
IMPORTANT: This article was written in early 2015, when we had just started working with the Angular team to make Angular in NativeScript a reality. Today NativeScript allows you to build production-ready iOS and Android apps with Angular. If you’d like to see how, go through our NativeScript & Angular Getting Started Guide.
If you are a developer with web background there is no doubt you know AngularJS. AngularJS is one of the most popular libraries used on the web and also in hybrid mobile apps. The Angular team has been working for about a year on their next major release- Angular 2.0. One of the major goals of this release is to make AngularJS a first class framework for mobile developers.
There is a big challenge in achieving this. The current version of AngularJS - 1.x is implemented to work inside a browser and depends a lot on the browser's DOM implementation. In order to support browser and non-browser environments (like Native mobile iOS, Android or NativeScript apps) the way AngularJS works internally must be changed. That's why with Angular 2.0 a lot of new interfaces and abstractions has been introduced to the core framework to enable this transition.
These new abstractions in Angular 2.0 have enabled the NativeScript team to initiate the work on a compatibility layer which would allow developers who want to use AngularJS to simply drop it to their NativeScript apps and start using what they already know.
One of the major goals of NativeScript is developers to reuse as much existing code and skills as possible. We believe that adding the AngularJS library as an option is a good continuation of our efforts to support CSS, JavaScript and TypeScript. By having the ability to reuse native iOS and Android libraries I think that the arsenal of tools a NativeScript developer can use is the biggest advantage of our framework.
If you are new to NativeScript please read our Getting started with NativeScript article.
Not only this but with the use of Angular directives you can share most of the code between your mobile app and your web site. The entire business logic is written in ECMAScript compatible JavaScript (or TypeScript if you prefer), the styling is CSS and many of the the UI declarations can be shared if you use Angular 2.0 for your mobile app and your website. Just imagine a shared UI between NativeScript and Kendo UI!
Now let see where we are with this integration.
We created a very simple application which shows how the UI is being build and how the property and event binding is done with Angular 2. The sample app source code is published in GitHub. The repository is here - https://github.com/NativeScript/sample-Angular2. The good thing is that you do not need a different flavor of NativeScript in order to run it. With the today’s release of NativeScript v1 you can run the sample and enjoy running Angular 2.0 in a native application!
Now let’s dig a little bit inside the code. The starting page of the application is the main-page.js. There you can see how the Angular 2.0 app is being bootstrapped:
var TodoApp = (function () {
/*
Perform the initial binding of the Label element. Binding is specified like this
<Label [text]="message" />
*/
function TodoApp() {
console.log("TodoApp constructor");
this.message = "NativeScript <3 AngularJS 2!!";
}
/*
This is the function which is binded to the Button tap event like this
<Button text="TAP" (tap)="onTap()" />
*/
TodoApp.prototype.onTap = function () {
console.log("onTap");
this.message = "AngularJS <3 {N} on " + new Date();
};
TodoApp = __decorate([
Component({ selector: 'Todo-App' }),
Template({ inline: '<Label [text]="message" /><Button text="TAP" (tap)="onTap()" />' })
], TodoApp);
return TodoApp;
})();
As you can see we have a Label and a Button element. The Label element is bound to the “message” property of the data model using the following syntax:
<Label [text]="message" />
The Button’s tap event is bound to the onTap() function using the following syntax:
<Button text="TAP" (tap)="onTap()" />
Inside the onTap() function the “message” property is updated and the Label’s Text property is automatically updated without any more plumbing. You can see a video of the running application here.
This integration glue between Angular and {N} is implemented in the NativeScriptDOMAdapter.js where we are “bridging” the calls AngularJS executes to the underlying NativeScript logic.
In closing - this is our first attempt to show Angular 2.0 in a NativeScript app and we would like to hear your feedback. We are very excited to see how Angular 2.0 will evolve and we believe that you will find a lot of value by combining AngularJS with NativeScript.
Please leave comment in our GitHub discussion about Angular2.0 support and if you are interested in working with us on this integration please let us know!