3 of 14

Supported Platforms

Electron

Build cross platform desktop Apps using web technologies.

Ionic

Build Hybrid Mobile Apps using web technologies.

Nativescript

Build truly Native mobile apps using Angular, Typescript and Javascript.

React Native

Build Native mobile apps using Angular and react-native-renderer in React-Native.

Angular 2 Supported Platforms

4 of 14

React Native as a platform

Interfacing JS with the Native Bridge.

5 of 14

Angular 2 and React Native Architecture

6 of 14

Typescript

Static Typing for Javascript.

7 of 14

// Named function

function add(x, y) {

return x + y;

}

// Anonymous function

let myAdd = function(x, y) {

return x+y;

};

// Named function

function add(x: number, y: number): number {

return x + y;

}

// Anonymous function

let myAdd = function(x: number, y: number): number {

return x+y;

};

8 of 14

Why Typescript?

Better Classes and Modules.
Static type checking.
Supports all ES6 features.
Has Great Tools.
Makes Abstractions Explicit.
Simple to reason with.
Works with js NPM modules.

9 of 14

Setting up your Dev Environment

Installation

Clone Angular2 React Native Seed

https://github.com/mlaval/angular2-react-native-seed.git

> npm install -g gulp react-native-cli typings

> cd angular2-react-native-seed && npm install

> gulp init

> gulp start.ios (or) gulp start.android

Install a TS friendly text editor

10 of 14

Angular 2

Modules
Components
Services

11 of 14

Modules

An NgModule is a class decorated with @NgModule metadata.

Modules are a great way to organize an application and extend it with capabilities from external libraries.

Many Angular libraries are modules (such as FormsModule, HttpModule, and RouterModule). Many third-party libraries are available as NgModules

Every Angular app has at least one module class, the root module. You bootstrap that module to launch the application.

12 of 14

Components

Component is a class decorated with @Component metadata.

Components are the main way we build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components.

In react-native Router uses Component as the main Identifier.

13 of 14

Services

Services are JavaScript functions that are responsible for doing a specific task.

Angular services are injected using Dependency Injection mechanism and include the value, function or feature which is required by the application.

Services are like the ‘Redux’ part of your React Native application.

14 of 14

Thank You!

Connect with me on:

in.linkedin.com/in/daniakash

@DaniAkashS

Source Code for the todolist app - https://goo.gl/1wW2Ic