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

[PDF] Développement dune application WEB, client- serveur vs AngularJSjs

Développement d'une application WEB ; client-serveur vs AngularJS js LABARBE cette structure, découle un modèle à n niveaux On multiplie la première version du projet a été mise à disposition sur GitHub le 30 juin 2011 tandis tutorial angularjs » affiche 1'380'000 résultats (la recherche a été effectuée dans une

bbm:978-1-4842-2044-3/1pdf

angular-seed project , 197–198 description , 197 template expanding , 115– 117 “version” , 114 Git bash_profile, configuration , 5–6 customization and configuration , 3–4 “gitexcludes” file , test folder structure, WebStorm , 65 test stubs 

[PDF] Getting Started with Angular - Second Edition

related projects, such as angular-seed, the Angular style guide, and tools for static analysis of Angular He is an open source enthusiast and has created a series of projects in GitHub After daily directory structure of the samples repository

[PDF] Angular website templates github - Squarespace

An e-commerce site template using Angular 7 and Bootstrap 3 This project was Structure of the highest level /bower_components /build /node_modules /src 

[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 github com/sebawita/angular-tour-of-heroes  

[PDF] Development of a front-end application using AngularJS - Theseus

The thesis starts by introducing the company and the project background Then the Object Diagram, Component Diagram, Composite Structure Diagram, Package Dia- gram In Git, every developer's working copy of the code is also a re-

[PDF] Structuring modern web applications - DiVA

2 fév 2014 · A study of how to structure web clients to achieve modular, maintainable and long in Angular JS which is a JavaScript framework developed by Google Inc The Example of such a technique is defined in Microsoft Application Architecture Projects and companies using backbone https://github com/

[PDF] Web and Mobile Code Sharing with NativeScript and Angular

30 mai 2018 · Template < > https://github com/NativeScript/web-mobile-project {N} Project Structure Web App ng serve tns run android -- bunle

[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

StackLayout>

Hello Mobile

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

Thank you

quotesdbs_dbs20.pdfusesText_26