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.
npm i nativescript-ng2-magic
- Use
Component
fromnativescript-ng2-magic
instead of@angular/core
. Why? - Create NativeScript views ending with
.tns.html
for each of your component's templates. How? - Run your truly native mobile app with NativeScript!
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 {}
- 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 {}
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!
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.
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.