[PDF] How to Migrate your Angular Projects to Native Mobile with

Template < > NativeScript Renederer createElement setElementProperty u sin ess a s u su a l Shared Project {N} Project Structure Web App ng serve tns run [android ios] bundle githubcom sebawita angular tour of heroes

[PDF] The Django Example Back-End - Techiediaries

how to use the Angular 6 CLI to generate a new Angular 6 project, how to use git clone githubcom techiediaries django crm An Angular application is made of several components forming a tree structure with parent and child

Create Responsive, Fast and Reliable PWAs Using Angular

in this book is available to readers on via the book's product page, located at Service Worker Example Code Build Project with Angular Service Worker boilerplate codes and adding new files into the Angular app structure

Pro Angular 6

on via the book's product page, located at apresscom 9781484236482 What Is the Structure of This Book? Preparing the Example Project

[PDF] AngularJS Essentials - GitHub Pages

The following diagram exhibits the interaction between the AngularJS architecture The only project structure that we may need is the old and good index

Angular 6 form example github

Reload to refresh your sessionio example'> You can also pass the JSON form examples Responsive layout (flex layout module) SASS (most common used Go to project folder and install dependenciesio angular demo Application Starter

[PDF] Angular2UpgradeWebinar (1) - Intersys Consulting

What are the different migration paths from AngularJS 1x to Angular 2+ • What are the pros ▫Component File Structure Gone are the days Event Emitter class ▫Input Output Example Deploying the App via Pages • Linting code

[PDF] angular projects for practice

[PDF] angular projects with source code free download

[PDF] angular routing tutorial step by step

[PDF] angular sample project git

[PDF] angular sample project step by step

[PDF] angular sample projects for beginners

[PDF] angular service interface naming convention

[PDF] angular step by step for beginners

[PDF] angular tutorial for beginners 2020

[PDF] angular tutorial for beginners learn angular from scratch

[PDF] angular tutorial for beginners learn angular from scratch mosh

[PDF] angular tutorial for beginners step by step

[PDF] angular tutorial for beginners step by step javatpoint

[PDF] angular tutorial for beginners step by step youtube

[PDF] angular tutorial for beginners youtube

Conquer Web and Mobile

with a Single Project #Angular #NativeScript sebawita

Sebastian Witalec

Senior Developer Advocate

@Progress @sebawita an open source framework for building truly native mobile apps with JavaScript.

Use web skills, like:

TypeScript, Angular, Vueand CSS,

and get native UI &performance on iOSand Android.

NativeScriptis...

The Goal

AndroidiOS

Web

One project -two...

One project -two... erm... dogs

-rchitecture .-%/+"#(0+,*()12-(

3*&'+"#

Data Binding

{{value}} [property] = "value" (event) = "handler" [(ng-model)] = "property"

Dom \Native

Component

Template

Component

MetadataProperty

BindingEventBinding

Renderer

Component

Template

Renederer

Dom createElement setElementProperty attachViewAfter invokeElementMethod

Element

Renderer

Mobile UI

Layer

Component

Template

NativeScript

Renederer

createElement setElementProperty attachViewAfter invokeElementMethod

Element

Component

export class

PlayerComponent{

name= 'Sebastian'; twitter= '@sebawita'; sayHelloTo(name){ alert( 'hi '+ name);

Template

name: {{ name}} twitter: {{ twitter}}

StackLayout>

Dependency#$%&'()*$

Http

Http callHttp call

HttpClientModule

import {

HttpClientModule}

from ' @angular/common/http'; @NgModule({ imports: [

HttpClientModule,

NativeScriptHttpClientModule

import {

NativeScriptHttpClientModule}

from ' nativescript-angular/http-client'; @NgModule({ imports: [

NativeScriptHttpClientModule

HttpClient

import {

HttpClient} from '@angular/common/http';

@Injectable() export class

MyHttpService{

constructor(private http: HttpClient) { getData(url: string) { return this.http.get(url);

How to do code splitting?

my-http.service.ts my.module.ts (Web)

HttpClient

my.module.tns.ts (Mobile)

HttpClientModule

NativeScriptHttpClientModule

/)"0$12%&2)3123)$

Shared Project Structure

Monorepo

ServicesNavigation

Style Variables

Directives

Web Style{N} Style

Pipes

Modules

Components

Web ngModule

{N} ngModule

Navigation

Components

Web HTML

{N} HTML

TS Class

Build Process

Shared Project Structure

Monorepo

ServicesNavigation

Style Variables

Directives

Web Style

Pipes

Modules

Components

Web ngModule

Navigation

Components

Web HTML

TS Class

Build Process

{N} Style {N} ngModule {N} HTML

Shared Project Structure

Monorepo

Style Variables

Modules

Components

{N} ngModule

Navigation

Components

{N} HTML

TS Class

Build Process

Web Style

Web ngModuleWeb HTML

ServicesNavigation

DirectivesPipes

{N} Style

How to do code splitting?

Components

HTML

TS Class

NameComponent

name.component.html name.component.ts

How to do code splitting?

Components

Web HTML

TS Class

{N} HTML

NameComponent

name.component.html name.component.ts name.component.tns.html

HTMLname.component.html

How to do code splitting?

Components

Web HTML

TS Class

{N} HTML

NameComponent

name.component.html name.component.ts name.component.tns.html

Web Style

{N} Style name.component.css name.component.tns.css

4.56(75(8(9:9;<=

Install Nativescript Schematics

> npm i-g @nativescript/schematics

Web + Mobile Shared Project

> ng new -c=@nativescript/schematics --name=my-app --shared

NativeScript Schematics

Webpack build

How does it work?

Mobile app

Business as usual

Shared Project

{N} Project

Structure

Web App

ng servetns run [android/ios] --bundle Web Files

NativeScript

Build 7->1 /)"0$12%4*,)(2*"+ 5*2' &1'$6(2*17%

Project Migration -web to shared

0&,

12*%&'(

0&, ��ng new myApp ��ng add @nativescript/schematics ��ng serve ��tns run [ios | android] --bundle +*,)-&34553

6'7&84()'

9742&5

12*%&'(

0&,3455

6'7&84()'

12*%&'(

Project Migration

-mobile to shared* .//0&,

9742&5

12*%&'(

��tns create myApp--ng ��ng g add-web ��ng serve ��tns run [ios | android] --bundle *under development

HomeComponent

Project Migration: Convert Component

HomeComponent

home.component.html home.component.ts home.component.scss home.component.html home.component.ts home.component.tns.html ng g migrate-component --name=home

Menu Module

MenuComponent

Menu Module

MenuComponent

Project Migration: Convert Component

menu.component.html menu.component.ts menu.component.scss menu.component.html menu.component.ts menu.component.tns.html menu.component.scss menu.component.tns.scss ng g migrate-module --name=menu menu.routes.ts menu.module.ts menu.routes.tsmenu.common.ts menu.module.ts menu.module.tns.ts ng add@nativescript/schematics ng g migrate-component --name=cmp-name ng g migrate-module --name=mod-name

Migration commands

@1%$,+1"3 https://nstudio.io/xplat/ https://nstudio.io/xplat/

Thank you

quotesdbs_dbs20.pdfusesText_26

[PDF] [PDF] How to Migrate your Angular Projects to Native Mobile with