NativeScript Navigation

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

93 notes

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

93 notes

Cours 4 sur 5 dans Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

À partir de la leçon

Hybrid Mobile App Development Frameworks: NativeScript: An Introduction

This module introduces you to hybrid mobile application development. You will learn about the NativeScript framework and explore some of the features of the NativeScript framework to implement a mobile app based on the Angular application that was implemented in the previous course on Angular.

NativeScript Navigation13:36

Exercise (Video): NativeScript Navigation Part 143:33

Exercise (Video): Telerik Progress NativeScript UI SideDrawer41:24

Exercise (Video): NativeScript Navigation Part 226:36

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

I am sure many of you are familiar with the Angular router and

how the Angular router supports navigation among the various components

within your Angular application.

NativeScript leverages the Angular router and

provides its own extensions to the Angular router in order to enable more

mobile app-like navigation within our NativeScript application.

Let's look at some of the details of NativeScript navigation in this lecture.

To give you an idea of the kind of navigation that we would see

in a typical mobile application, let me show

that variation of our mobile app at the end of this lesson.

So in this mobile app, you will see that I have a side java based navigation

here Where we have links to various pages that we will have in our application.

So I can go to their home page and

then go to an about page like this here and then go to the menu page.

And from the menu page, I can click on each item in the menu and

go to the details of the specific dish,

including details about the comments submitted by users here.

So this is a typical navigation from a root page to a child page.

And so you will have a back button here which will enable me to

navigate back to the root page.

So I can click on this button to go back to the root page.

Similarly, navigating to another child page,

I can navigate back to the root page by using the back button on my device.

So these are the biggest navigation patterns that you will see

being supported in NativeScript navigation.

As I mentioned, NativeScript leverages the Angular router support for

navigation among the components.

So, if you are familiar with the angular router,

you are already familiar but you need to import the router module.

And then you use the router-outlet at that point in your template of a component.

Where you want to leverage the router for providing navigation

Among radius views that are attached to this RouterModule.

And also we saw how we can use the routerLink to

specify the URL to which you want to navigate.

URL, in this case, the route to the specific component to which

you want to navigate With the Angular router.

Native script itself takes the Angular router and then provides extensions

to the Angular router in the form of the native script router module.

So within you native script application you will be importing the native script

router module.

Together with this,

NativeScript RouterModule provides the <page-router-outlet>,

which supports a page-like navigation, the typical mobile app navigation features.

And the corresponding nsRouterLink,

which is also valuable for supporting mobile app-like navigation.

</page-router-outlet> Written the pages of our NativeScript application.

Talking further about NativeScript navigation,

in NativeScript, the NativeScript apps are built around pages.

Pages are nothing but angular components, so

each page enables us to define separate application scripts.

So if you're familiar with Android development, what an activity supports in

Android is similar to what a page supports in NativeScript application.

So this is an instance of a page class.

Although you don't explicitly create pages in NativeScript,

when you create a component and attach it to the page router outlet

It automatically becomes a page in a NativeScript application.

The page navigation is integrated

with the native navigation elements of our mobile application.

So, this is where the back button in an Android device is supported for

navigating back to the previous view within our Android application.

So, now, if you are familiar with Android

navigation with fragments and so on, so that is also supported in NativeScript.

Similarly the navigation bar in iOS is leveraged to provide the back

button support within the navigation bar to

navigate back to the previous page In our NativeScript application.

So this way NativeScript integrates very well with the typical mobile app

navigation patterns that we are used to with native applications,

be it in Android or be it in iOS.

So this is where,

when we look at the typical mobile navigation we start with the Root Page.

And from the root page when you navigate to a child page of the root page so

you have a navigation stack to which the child page is added.

The root page is of course at the bottom of the stack and

the child page is added on top of it.

So that when you use the back button or the back button in the navigation

bar of iOS you'll be taken back to that previous page.

So this is where you will be navigating down to your child page or

then from a child page to a grandchild page, and

the back button brings you back In the history, back to the root page.

So you can pop and go back to the child page from the grandchild

page by using the back button in Android or the back navigation

button in iOS and go back to the root page.

To support this mobile like navigation this is where the Page Router Outlet,

that NativeScript router module provides, comes to our rescue.

The Page Router Outlet, as defined by the tag page-router-outlet,

which is corresponding to that router outlet that we are used to in Angular.

The Page Router Outlet is usually defined by itself in a template.

So in your app composing your HTML page,

you would normally define the page around an outlet.

And then you'll be attaching pages to

this page router outlet in your native script publication.

So if you attach components and navigate to the components From the page

router outlet, automatically treats each of these components as pages.

And the page-based navigation is supported in your data script application.

So the content outside the page router outlet

Will not be included in the new page.

So that is why we use the pageRouterOutlet as the single route element

in the appcomponent.html file.

And so when you navigate forward that current page and

its history will be saved in the native navigation stack and so

the component that you create for the page will not be destroyed and will be written.

Unlike the way the Angular treats it components.

So when you navigate away from one component,

that current component gets destroyed in Angular.

In NativeScript the component is preserved in order

to support the mobile app-like navigation features.

And so that's why when you navigate back using the back button or

the back button in the navigation bar in iOS.

You can go back to the previous page and

still be in the same state as it was when you navigated away from it.

In addition we saw the use of the NsRouterLINK which I briefly mentioned.

In an early slide.

The nsRouterLink is the baby specified in a navigation within our templates.

Wherever we need to specify navigation to end that page.

So for example you will see me using a nsRouterLink

just like we use the RouterLink in Angular application.

So we will specify nsRouterLink and

then specify the link of the page to which you want to navigate.

As in this example, we specify NsRouterLink is equal to /Menu here,

so, meaning that you want to navigate to the Menu page in this case.

This navigation is also supported in code using the router extensions service.

So, the RouterExtensions enables navigation through code.

The RouterExtensions, when you include all input within your

native script component and inject that into your constructor.

It provides you with various matters, like the back back to

previous page navigate, navigatebyUrl and a few more methods.

In particular the back method goes back to the previous router location.

So inside the pageRouterOutlet within the tie components you can

define additional router outlets.

The Angular router outlets if you prefer to in order to

provide Sub navigation inside child components.

So for example if you are coming from the Android world,

you are familiar with fragments and

how fragments enable you to navigate even without moving your activity.

Similar kind of behavior can be leveraged that inside a child component

by using the Angular's router outlet within your templates.

So navigation within the router objects,

if you navigate to another view within that router outlet, you can navigate back.

Still using the router extensions back [INAUDIBLE] but

if you use the backToPreviousPage method that RouterExtensions supports.

Then you're navigating back to the previous page

that is attached to the page router outlet, so.

Note the distinction between the two.

Depending on which kind of navigation you want to implement,

you would use either the back method or the back to previous page method.

Within your quote native script router module also supports

route parameters just like the way the Angular router supports.

So you can define router parameters so for example you can say NG the outer link and

then say slash dishdetail within an array and

then second element of the array could be a.

A value, for example dish.id to specify a route parameter in your navigation.

And we have seen how we can include the route parameters

just like the way the Angular suppose route parameter.

So the same approach is also used in Data script.

Now, we will see an example of the use of this in the very next exercise.

We're able to create a child component and navigate from the main component to

the child component using an ngRouterLink with a route parameter there.

You can also use this within your code by using this.router.navigate,

or even this router extensions dot navigate as we saw Not

with the router extensions in the previous slide.

Together with this, we take advantage of the activated router service

that can angular provides for us so the activated router service.

Enables us to access the route parameter values within our child component,

and so, then we can react to changes in the route parameters.

We can even retrieve the route parameters and use them within our child component.

So you saw a use of this in Angular course, we will use a similar approach

also in the very next exercise where we need to retrieve the ID of the dish

from the router URL, using the ActivatedRoute Service.

And then be able to fetch the specific dish from our service and

through the service, from our servers.

With this quick understanding of native script support for navigation,

let's go ahead in this lesson with three different exercises where we will see.

The use of native script navigation,

together with the angular support for routing to implement radius

navigation features within our native script application.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play