NativeScript with Angular code sharing

Name: NativeScript with Angular code sharing
Rating: 3.9 (18 reviews)

One project that will build mobile apps on Android and iOS and web Angular app

Created byKrystian Czekalski

Last updated 6/2019

English

English [Auto],

What you'll learn

Will be able to create one codesharing project for all platforms
Will be able to make a cross platform mobile app
Will be able to create web app with Angular

Course content

3 sections • 24 lectures • 3h 39m total length

Installation9:24
Learn to share code between web and native script mobile apps using angular and native schematics in a single repository.
Angular App11:39
Create and run an Angular app alongside NativeScript, using Visual Studio Code and npm to install dependencies, manage node_modules, and configure environments with live reload on localhost:4200.
Nativescript App15:30
learn to create a NativeScript app using the Angular template, set up in Visual Studio Code, add Android and iOS platforms, and run on emulators with Android Studio tools.
Using Tools to create apps9:51
Explore two visual tools to build NativeScript apps with Angular: NativeScript Sidekick for automated project creation, and Angular Console for GUI-based commands and live reload.
Code Sharing App6:24
Discover how to build a single shared code base for web and mobile apps using native script schematics in an Angular project.
Preview Code Share on mobile2:13
Preview code share on mobile demonstrates how the app renders on Android and iOS simulators, with platforms added automatically. The run shows the title 'Welcome to movies' on both devices.
Exercise files3:20
Learn to work with exercise files for NativeScript with Angular code sharing by cloning the repository, installing dependencies with npm install, and navigating branches to access section-specific source code.
Included API6:52
Learn to connect your NativeScript app to a provided api by setting up a Python Django rest framework backend, serving dynamic json data from a local server.

Custom content9:15
Replace the starter content in the home component with a movies array and render titles on web and native templates, then enable dynamic data from a server via an API.
Get Dynamic Data14:27
Replace the static movie list with data from the API by building an API service, using the http client, and subscribing to an observable.
Create Component and routes9:25
Create a detail component and configure routes to display movie details, generate the component with Angular schematics, enable routing, and pass and read the movie id through the router.
Get Detailed Data9:37
Pass the movie id to the API to fetch detailed data, then render title, year, and description in a dynamic movie detail view.
Mobile dynamic data8:29
Port web movie lists to mobile by fetching API data and wiring navigation to detail views. Resolve Android localhost issues with platform checks and a production server.
Solving problem web vs mobile import11:22
Solve web vs mobile import problems in native script by introducing a global service that centralizes shared api logic; use a single api service across web and mobile.

Adding Images10:25
Learn to display movie images in a NativeScript with Angular app by loading posters from a media base URL through a shared service, and render them in lists and details.
Images on mobile5:31
Display web images on mobile by using the NativeScript image tag, update the home and detail components, and align content across web and mobile.
Styling overview6:01
Explains how styling works in NativeScript with Angular, detailing global styles and component-specific styles, and how imports and platform-specific CSS files control appearance across home and detail components.
Applying Styles9:45
Applies styling across a NativeScript with Angular app by setting a global background, defining reusable colors, and styling components, images, headings, and hover effects to create a cohesive UI.
Mobile theme13:39
Learn to style mobile applications with native script by applying predefined themes and using the theme builder to tailor light and dark layouts for mobile and web components.
Mobile styles11:42
Style the action bar with a custom color and white text, then use absolute and stack layouts wrapped in a scroll view for vertical scrolling.
Enable Navigation9:07
Enable navigation in a NativeScript with Angular app by configuring the action bar and back icons, using the rotary extension to return to the previous page.
Solving navigation for web7:57
Learn to share navigation code across web and mobile by replacing the rotor extension with the location service from @angular/common, enabling a back button and consistent navigation.
Web different Layout14:51
Demonstrates web and mobile layout differentiation in NativeScript with Angular by dynamically creating a movie detail component using view container ref and templates.
Bunus2:19
See how NativeScript with Angular enables one codebase to share across web and mobile apps, with backend API insights and guidance on publishing to Apple Store and Google Play.

Requirements

Basic knowledge od Javascript, HTML and CSS
Computer with Internet

Description

This tutorial focus on the code sharing between mobile NativeScript and and Angular web app. I will show how we can have one single repository to handle the both projects and code sharing maximum code in-between the project.

We will start from scratch with a blank new project. I will start showing how to create Angular app and NativeScript separately and we will go through the content for each of them. Then we will create our code-sharing application. We will create classic master-detail view. List of items with images will be displayed and you can click on the item to load new page with more detailed information in. We will do styling the component and I show you how to communicate to external API with http requests. (I also provide that API for you). We will finish with having 3 working applications on different platforms (web, iOS and Android).

All that will be done using one source code and share maximum code between web app and mobile app using Angular and NativeScript.

Who this course is for:

People who would like to know hot to create one project code sharing for both web app and mobile app
People who would like to know how to build NativeScript apps on Android and iOS
People who would like to know how to build Angular web app

NativeScript with Angular code sharing

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 1hr 5min

Dynamic Data6 lectures • 1hr 3min

Working with content10 lectures • 1hr 31min

Requirements

Description

Who this course is for: