CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
majcheee
majcheee

Reputation: 41

Angular 2 Nativescript web/mobile application

I'm new to the angular 2 and nativescript. I would like to create application that can run on web and on mobile. I read that you can share code using this frameworks and just to switch templates, but there is no tutorials or documentation. So, if anyone could give me some directions for start, how can I do this.

Thanks!

Upvotes: 4

Views: 1838

Answers (3)

Sandeep Gosavi
Sandeep Gosavi

Reputation: 640

To reuse the code you can refer this blog. Blog contains Github link, you can refer this too. I have downloaded the project and it works fine for me. You can also refer screenshot. I didn't change anything in the project.

You can also check out my repository, it may help.

I Hope it will help you.

enter image description here

Upvotes: 1

Matthew
Matthew

Reputation: 500

I'll skip past what Akash has already covered as it's all useful for the angular 2 project. Good pointers. I'll stick to the Nativescript-Angular side mostly.

I would recommend looking at some starter templates which are actively tackling the problem you describe. This would leave you to follow their conventions but overall the conventions are good and on top of google's recommendations. Effectively you end up with one project space where the same services run on web / mobile / desktop and the UI is described specifically for the desired environments:

Two projects by Nathan Walker:

Angular2 magic is probably an easier starting point. Angular 2 advanced seed is more flexible, but it does and that does mean it has a larger learning curve if you are unfamiliar with the technologies and included projects. It has documentation and quite a few people are using it so help will be more available.

Nativescript documentation and tutorial make sure you don't miss:

If your IDE is VS Code there are also some tools that would be worth installing: https://marketplace.visualstudio.com/search?term=nativescript&target=VSCode&sortBy=Relevance

Great for Nativescript-angular templates:

The angular2 code templates currently designed for the angular2-beta over RC3 which Angular2 is currently running on. The view templates are still a good time saver.

Running NativeScript:

I mostly only use this to start the debugger off (and debug on the TypeScript inside VS Code). The majority of the time I still use the command line for developing livesync.

Upvotes: 3

Akash
Akash

Reputation: 5221

tl;dr: Try not to put any platform specific or UI code in your services. These services can then be shared between platforms.

The first thing you need to understand is that in native views, you can't use the same markup (div, span, table etc.) as in normal browsers. So all your UI needs to be coded individually for web and mobile.

If you follow the best practices of Angular 2, you'd have divided your apps into components, directives and services. Ideally, services are where most of the logic of your app goes. They should handle http, caching, common helper methods, global constants etc.

You can reuse these services with minor to no changes between web and mobile if they don't contain any platform specific code. For instance, the http exposed by angular and nativescript-angular have the same api. So if you're doing something via http as service, and that service doesn't juggle any UI elements (it shouldn't), that service should work on both web and browser. You can share the directory of services between web and mobile projects and override anything you want to customise for platform.

Example: Suppose you want to get a list of users from backend and display them as list. Ideally, you'll have a User service which has a get method returning promise of a json list of users from BE.

  1. For mobiles, your nativescript component will probably use ListView, import the User service and use the promise from get method to populate it.
  2. For web, everything is same except that your component will probably have <li> in its template.

It's all about keeping your services as free of platform specific code as you can.

Hope this helps you get started on how to structure your application for maximum code reuse.

Upvotes: 3

Related Questions