In this video, Alex Ziskind shows how native page transitions can be used with a special NativeScript router outlet that is expressed as an Angular outlet, yet retains its native functionality and page caching.
- [Instructor] We've done a lot of work and have built…many parts of our RPS Project Tracker application,…but there is one very important thing missing.…We can't navigate from page to page…passing data back and forth.…We also don't have the ability to log in properly…and be redirected to our list of backlog items…on successful login.…That's what this chapter's all about.…We're going to add different types…of navigation to our application,…as well as a couple of other item-related…views that we'll navigate between.…There are two types of navigation available…in NativeScript with Angular,…Native navigation, which registers routes…using the NativeScript router module.…
You'll define routing placeholders using…the page router outlet directive here…and angular routing navigation which…registers routes using Angular's router module.…For this type of navigation, you'll define…the routing placeholders using…the router outlet directive.…In this lesson, I want to show you how…we can set up a simple master detail navigation scenario…
Author
Alex Ziskind
Released
6/6/2017- Setting up the development environment
- Using the NativeScript CLI
- Using Angular with NativeScript
- Angular bootstrap
- Application architecture
- Components
- User interface
- NativeScript widgets
- Application lifecycle
- Data and event binding
- Navigation
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome1m 24s
-
What you should know1m 23s
-
Touring the demo application2m 33s
-
-
1. Getting Started and Tooling
-
Using the NativeScript CLI6m 17s
-
2. Introduction to NativeScript with Angular
-
Angular bootstrap2m 24s
-
3. Application Architecture
-
Components5m
-
Component template2m 58s
-
Component styles2m 25s
-
Template variables3m 41s
-
Handling Listview tap2m 33s
-
Backlog item template4m 9s
-
Nested layouts4m 50s
-
Directives: ngIf6m 52s
-
Directives: ngFor3m 48s
-
Dependency injection: Part 14m 26s
-
Dependency injection: Part 26m 31s
-
Application lifecycle9m 56s
-
Modules3m 40s
-
Barrels2m 6s
-
-
4. User Interface
-
NativeScript widgets3m 38s
-
Details component3m 57s
-
Segmented bar5m 35s
-
Scroll view2m 40s
-
Layouts2m 7s
-
Layout example3m 11s
-
Containers7m 34s
-
Side drawer setup2m 32s
-
Style overrides2m 44s
-
Dynamic styling4m 45s
-
Styling main content5m 49s
-
Themes5m 40s
-
Images5m 14s
-
File system images4m 32s
-
Base64 images2m 29s
-
Gestures2m 45s
-
Animating button state3m 2s
-
Login animation setup3m 48s
-
Declarative animation4m 58s
-
Imperative animation9m 45s
-
-
5. Data and Event Binding
-
Setting up the Faker library3m 15s
-
Generating users12m 42s
-
Property binding4m 20s
-
Event binding5m 15s
-
ngModel basics7m 3s
-
ngModel forms9m 45s
-
Component communication 1015m 29s
-
Component output3m 49s
-
Component input8m 3s
-
List component filtering5m 14s
-
Angular pipes14m 7s
-
-
6. Navigation
-
Native navigation10m 57s
-
Master detail4m 39s
-
AuthGuard10m 28s
-
Angular style navigation8m 27s
-
Back navigation6m 31s
-
-
Conclusion
-
Next steps1m 21s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Native navigation