In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.
This Angular 2 course assumes a solid understanding of the fundamentals.
We have Intermediary Angular 2 courses including topics on Dependency Injection, Components, Directives, Forms, Router, and Animating Web Apps
We can run our app in the iOS Simulator using the
tns command line utilities. Also learn how to target specific simulator devices and versions. You must have a Mac to develop apps for iOS. Ensure you have XCode installed via the Mac App Store, and ensure you have opened it at least once to agree to the terms and install the additional components it may prompt about.
We can run our app in an Android emulator using GenyMotion, which provides flexible options and great performance. Let’s learn how to set one up and run our app in it. First install the Android SDK by installing Android Studio here: https://developer.android.com/studio/index.html. Then register for a GenyMotion account here: https://www.genymotion.com/account/create/. Once created and logged in, you will see a ‘Download’ button in the header where you can download the free tools.
This is the fundamental building block for native views. Let’s understand the syntax and some of the options available to us to construct our views starting with Layout Containers. StackLayout and GridLayout containers are the most commonly used. Also learn about helpful snippets for a few popular IDE’s.
Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like
horizontal-align that are unique to native platforms.
The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common
btn classes for Buttons,
h2, etc. Label classes and convenient
m-10 (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme
Let’s build a new Angular component and use NativeScript for Angular’s ModalDialogService to open it in a native modal. We will also look at special considerations with handling the close action in addition to passing data between the modal and the caller.
Learn how to extend the SASS that ships with the nativescript-theme-core plugin to create your very own custom app theme. The setup takes advantage of common styling across iOS and Android as well as how to handle platform specific css. You can find a full list of SASS variables that can be overridden here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss You can also find a full list of baseline variable sets to base custom stylesheets within this section on the docs: http://docs.nativescript.org/ui/theme#color-schemes
Learn how to programmatically change the status bar text color on iOS and Android as well as the background color. The lesson also covers how to adjust the text color to be dark on Android in cases where the status bar color may be light.
Learn how use the nativescript-themes plugin to swap out entire stylesheets on the fly to provide theme switching for your app's users. Also covers how to ensure your app remembers which theme the user chose last before the app closed to apply their preferred theme next time they open it.