Router and navigation

[hdeshev]

Figure out if we can integrate with the Angular Router.

If the above isn't possible/feasible, offer a similar API.

[tjvantoll]

IMO integration with the router, or some alternative API, is an absolute necessity. I ran into this limitation about 30 minutes into trying to build a serious app, and others will as well.

[MiroValchev]

@hdeshev is there any work-around? I am new to Angular and maybe its me, but can't think of a way to have two pages and navigate between them without router. This won't do topmost().navigate("views/calendar") :)

We have a native app in the stores and want to re-write it from scratch with {N} + Angular 2. Not really complicated but still will have more than a single view.

[hdeshev]

We're working on something that seems promising, but has some issues on iOS. I'll probably document it, push it to master this week and improve it later.

[NathanWalker]

Very exciting! :)

On Wed, Jan 13, 2016 at 3:30 AM Hristo Deshev [email protected]
wrote:

We're working on something
https://github.com/NativeScript/qsf-angular-nativescript/blob/hdeshev/page-route/app/app-page.ts#L29-L161
that seems promising, but has some issues on iOS. I'll probably document
it, push it to master this week and improve it later.

—
Reply to this email directly or view it on GitHub
#18 (comment)
.

[tjvantoll]

@MiroValchev I have a workaround in my Groceries sample as well, but it’s definitely a bit hacky for now, so I’m also anxiously awaiting @hdeshev’s magic too 😀

[vjoao]

Totally +1. Any progress on this?
I personally really like the $stateProvider way, which is how Angular ui-router (Angular 1.x) does the routing. I'm completely new to Angular 2, but I think routing is a must and the Angular guys made some great progress on this aspect.

[matt4446]

There was a merge today into mater related to the router:

f0768cb

nsRouterLink directive looks interesting. It should be all there to set up the route config + base now.

[anhoev]

When I change page, angular destroys all components , and renders them again .
Is it possible to change page without destroying the components .

[vakrilov]

@anhoev Can you share some more info. Are you using the page-router-outlet?
Btw, there is already a working sample here for reference on how to use the page navigation.

[anhoev]

@vakrilov I am using page-router-outlet . I 've tried the qsf example but that one has the problem too.
I wrote two logging line in ExamplePreviewComponent 's constructor :
console.log('Example Preview Component'); console.log('Rerender here');

and every time , when i click back and click the example again, it shows two logs in console.
The root page seems to work ok , only child-page.
If you write only one time console.log, it shows the log after 6-7 times.

In common usage nobody would recognise this problem because angular 2 works very fast. However, in some complicated case, the re-rendering time takes too long.

[matt4446]

I have encountered the same issue as @anhoev on the page double loading components after the navigation changes (in my own project) and have put some workarounds for some observable subscriptions to understand that the controls are being destroyed... I could just dispose of it.... but laziness :) (and it doesn't stop the double HTTP requests to get data).

I have some odd styling artifacts after navigation as well. Stack Panels in one of my components will get some extra padding (only after the first navigation, when the action bar jumps in). Navigating somewhere and back again fixes it to look like normal again.

[vakrilov]

I think some more clarification about the navigation in NativeScript is needed.
When navigating to a new page, the old page is put in the navigation stack. Under the hood, the navigation uses the corresponding native APIs: UINavigationController(IOS) and FragmentManager(Android). So, the old page still lives in the navigation stack. That's why, when you navigate back to it, no constructors for the NG components are called - only the activate method.
On the other hand, when navigating back, the current page is not saved anywhere - it is discarded. That's why when you navigate forward to the same route a new host page is created and also a new instance of the component.

That should explain why the constructor for your start component is called only once , but when navigating forward and back to a second page - it is created every time.

One thing you can do, is to use the DI and a service to cache your data to avoid unneeded HTTP requests.

[vakrilov]

@matt4446 About that styling issue - it looks like a bug, Can you share some code so that we can reproduce it.

[matt4446]

@vakrilov If I can.
I changed my CSS rules (and containers) about a week ago so that it didn't reproduce on navigation, but I think that I remember what caused it (it's in github's history as well). Stack Panels seemed to inconsistently choose margin / padding based on if the nav bar was present on the page. That is a little presumptuous, however... I'll see if I can create it again.

[vakrilov]

@matt4446 Can you open another issue if you manage to reproduce it? Also we made some changes in the Page layout when showing/hiding the action bar so it is possible that this issue is fixed with the newer version of the NativeScript modules.

Closing the issue - there is an example with nested navigation here and we will start working on the docs soon.