/nativescript-ng2-magic

Magically turn your Angular2 web app into a NativeScript app.

Primary LanguageJavaScriptMIT LicenseMIT

Angular 2 Style Guide MIT license Dependency Status devDependency Status

nativescript-ng2-magic

Magically drop a NativeScript app into your existing Angular2 web application and reuse all your code.*

You will be adding NativeScript views, but you already knew that.

Install

npm i nativescript-ng2-magic

Usage

  1. Use Component from nativescript-ng2-magic instead of @angular/core. Why?
  2. Create NativeScript views ending with .tns.html for each of your component's templates. How?
  3. Run your truly native mobile app with NativeScript!

Example

A sample root component, app.component.ts:

import {Component} from 'nativescript-ng2-magic';

@Component({
  selector: 'app',
  templateUrl: './client/components/app.component.html'
})
export class AppComponent {}

What if using the router?

  • If using the new @angular/router:

You will want to use MagicService.ROUTER_DIRECTIVES from nativescript-ng2-magic. Here's an example of the root component:

import {Component, MagicService} from 'nativescript-ng2-magic';
import {Routes} from '@angular/router';

import {HomeComponent} from './components/home';
import {AboutComponent} from './components/about';

@Component({
  selector: 'app',
  templateUrl: './client/components/app.component.html',
  directives: [MagicService.ROUTER_DIRECTIVES] // <-- Notice this!
})
@Routes([
  { path: '/home',       component: HomeComponent },
  { path: '/about',      component: AboutComponent }
])
export class AppComponent {}
  • If using @angular/router-deprecated:

You will want to use MagicService.DEP_ROUTER_DIRECTIVES from nativescript-ng2-magic. Here's an example of the root component:

import {Component, MagicService} from 'nativescript-ng2-magic';
import {RouteConfig} from '@angular/router-deprecated';

import {HomeComponent} from './components/home';
import {AboutComponent} from './components/about';

@Component({
  selector: 'app',
  templateUrl: './client/components/app.component.html',
  directives: [MagicService.DEP_ROUTER_DIRECTIVES]  // <-- Notice this!
})
@RouteConfig([
  { path: '/home',       component: HomeComponent,        name: 'Home', useAsDefault: true },
  { path: '/about',      component: AboutComponent,       name: 'About' }
])
export class AppComponent {}

Run for first time!

You will need to have fully completed steps 1 and 2 above.

Run your app in the iOS Simulator with:

npm run start.ios

Run your app in an Android emulator with:

npm run start.android

Welcome to the wonderfully magical world of NativeScript!

How to create NativeScript views

Based on our example above, assume ./client/components/app.component.html looks like this:

<main>
  <div>This is my root component</div>
</main>

You would then create a new file in ./client/components/app.component.tns.html like this:

<StackLayout>
  <Label text="This is my root component"></Label>
</StackLayout>

You can learn more about NativeScript view options here.

You can also install helpful view snippets for VS Code here or Atom Editor here.

You can learn more here about how this setup works and why.

Supported Projects

Why different Component?

Component from nativescript-ng2-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

The library provides a custom Decorator under the hood. Feel free to check it out here and it uses a utility here.

You can see more elaborate use cases of this magic with angular2-seed-advanced.

Requirements

License

MIT