GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - khalla/nativescript-angular: Proof of concept for Angular 2 and NativeScript intergration

BranchesTags
Open more actions menu
 
 

Latest commit

 

History

44 Commits
44 Commits

Folders and files

NameName
Last commit message
Last commit date
deps
deps
 
 
ng-sample
ng-sample
 
 
src/nativescript-angular
src/nativescript-angular
 
 
.ctags-exclude
.ctags-exclude
 
 
.gitignore
.gitignore
 
 
.gitmodules
.gitmodules
 
 
DEVELOPERS.md
DEVELOPERS.md
 
 
README.md
README.md
 
 
gruntfile.js
gruntfile.js
 
 
package.json
package.json
 
 

Repository files navigation

Integrating NativeScript with Angular 2.

Running locally

Get submodule code

The project bundles the NativeScript modules and Angular as source code dependencies set up as git submodules. You need to get them by running:

$ git submodule update --init

Install dependencies

You will need the Android SDK to build this project. Install it manually.

Then install the NativeScript tools according to: this article.

Then install the needed NPM packages:

$ npm install

Compile and prepare NativeScript and Angular

$ (cd deps/angular/modules/angular2 && tsd reinstall)
$ grunt prepare

Initialize the test NativeScript app (ng-sample)

$ grunt shell:ngSampleInit

Compile the app and update its ./src dir:

$ grunt ng-sample

Developer workflow:

  1. Make some changes to the app or src/nativescript-angular
  2. Navigate to the ng-sample subdir: $ cd ng-sample
  3. Compile app: $ grunt app
  4. Run in emulator $ tns emulate android --avd <YOUR-AVD>

Protip: combine #2 and #3 above in a single command run from the project root directory (works only on Unixy shells):

$ (cd ng-sample && grunt app && tns emulate android --avd nexus4-x64)

On Windows, you can wrap those commands in a BAT file.

Finding your way around

  1. The ./src/nativescript-angular folder holds the integration source code.
  2. The sample app below ng-sample is assembled by copying typescript dependencies in its src folder:
    • angular2 source code
    • nativescript-angular code
    • NativeScript typings: typings/nativescript
  3. All required JavaScript packages (including compiled NativeScript modules) are copied to ng-sample/app/tns_modules

How the integration code works

  1. Use the Angular Parse5DomAdapter to parse component markup.
  2. Provide a custom renderer (NativeScriptRenderer) that works with the parsed DOM and creates NativeScript UI elements. Only limited number of visual elements supported so far.

Known issues

  1. The renderer code needs to be cleaned up and made extensible, so that people can register new visual elements.
  2. There are certain issues with the Parse5DomAdapter and we'll likely need to provide our own later on:
  • Element and attribute names always get lowercased.
  • Self-closing elements (<Label text="Name" /><Button text="Save" />) get parsed wrong (in this case Button gets parsed as a Label child.
  1. The renderer implementation is by no means complete: we are still need to support view (de)hydration, DOM text updates, event dispatching, actions, etc.

About

Proof of concept for Angular 2 and NativeScript intergration

t.co/6PRfmyUkJd

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.