[PDF] Web and Mobile Code Sharing with NativeScript and Angular PDF share-code-between-web-and-mobile.pdf

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

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

Web and Mobile Code Sharing with NativeScript and AngularSebastian WitalecSenior Developer Advocate30-May-2018

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.NativeScript is:an open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular, Vueand CSS, and get native UI and performance on iOS and Android.

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.RendererComponent{ }Template< >RenedererDom!createElementsetElementPropertyattachViewAfterinvokeElementMethod...Element

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.RendererMobile UI Layer!Component{ }Template< >NativeScriptRenederercreateElementsetElementPropertyattachViewAfterinvokeElementMethod...Element

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Componentexport class MyComponent{name= 'Sebastian';twitter= '@sebawita';sayHelloTo(name){alert('Hi '+ name);}}

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

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.HttpClientModuleimport { HttpClientModule}from '@angular/common/http';@NgModule({imports: [HttpClientModule,...]

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.NativeScriptHttpClientModuleimport { NativeScriptHttpClientModule} from 'nativescript-angular/http-client';@NgModule({imports: [NativeScriptHttpClientModule,...]

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.HttpClientimport { HttpClient} from '@angular/common/http';@Injectable()export class MyHttpService{constructor(private http: HttpClient) {}getData(url: string) {return this.http.get(url);}}

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Shared Project StructureMonorepoServicesPipesSASS VariablesDirectivesWeb Style{N} StyleNavigationModulesComponentsWeb ngModule{N} ngModuleNavigationComponentsWeb HTML{N} HTMLTS ClassBuild Process

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Shared Project StructureMonorepoServicesPipesSASS VariablesDirectivesWeb StyleNavigationModulesComponentsWeb ngModuleNavigationComponentsWeb HTMLTS ClassBuild Process{N} Style{N} ngModule{N} HTML

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Shared Project StructureMonorepoServicesPipesSASS VariablesDirectives{N} StyleNavigationModulesComponents{N} ngModuleNavigationComponents{N} HTMLTS ClassBuild ProcessWeb StyleWeb ngModuleWeb HTML

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Webpack buildHow does it work?Mobile appBusiness as usualShared Project{N} Project StructureWeb Appng servetnsrun android --bunletnsrun ios--bundle

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.How to do code splitting?ComponentsWeb HTMLTS Class{N} HTMLNameComponentname.component.htmlname.component.tsname.component.tns.html

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Common Angular Data Service InterfaceCommon Service AbstractionWebPlugin{N}PluginWebData ServiceComponentsComponentsBusiness LogicWebData ServiceBusiness Logic

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Common Plugin InterfaceCommon Plugin Abstraction{N}PluginWebPlugin Wrapper{N}Plugin WrapperComponentsComponentsData ServiceBusiness LogicWebPlugin

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Project MigrationMobileAppWebProjectWebApp•ng new myApp•ng add @nativescript/schematics•ng serve•tnsrun [ios| andoird] --bundleMobile add schematicSharedProject

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Web addschematicMobileProjectProject MigrationMobileAppWebAppSharedProject•tnscreate myApp•ng g add-web•ng serve•tnsrun [ios| andoird] --bundle

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.HomeComponentProject Migration: Convert ComponentHomeComponenthome.component.htmlhome.component.tshome.component.scsshome.component.htmlhome.component.tshome.component.tns.htmlhome.component.scsshome.component.tns.scssng g migrate-component --name=home

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Menu ModuleMenuComponentMenu ModuleMenuComponentProject Migration: Convert Componentmenu.component.htmlmenu.component.tsmenu.component.scssmenu.component.htmlmenu.component.tsmenu.component.tns.htmlmenu.component.scssmenu.component.tns.scssng g migrate-module --name=menumenu.routes.tsmenu.module.tsmenu.routes.tsmenu.common.tsmenu.module.tsmenu.module.tns.ts

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.New Project:ng new --collection=@nativescript/schematicsmyAppMigrate web to sharedng add @nativescript/schematicsConvert module/componentng g migrate-module --name=module-nameng g migrate-component --name=component-nameRun {N} from Angular CLIng run nativescript:iosng run nativescript:debug-android

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.ResourcesArticle:https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-nativescriptTalk from {N} Dev Day:https://www.youtube.com/watch?v=HMPkXk_vXDwGithub:https://github.com/sebawita/pet-bros-litehttps://github.com/nativescript/nativescript-schematics

© 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.Sebastian WitalecThank You!sebastian.witalec@progress.com@sebawitaYou might also like to attend:Session TitleSpeakerYou might also like to attendBeautiful Native Mobile Apps with NativeScript and OpenEdgeEdsel Garcia

quotesdbs_dbs20.pdfusesText_26

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