Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Mobile Development Ionic

Ionic - Build iOS, Android & Web Apps with Ionic & Angular

Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework (Ionic 4+).
Bestseller
Rating: 4.7 out of 54.7 (13,859 ratings)
58,927 students
Created by Maximilian Schwarzmüller
Last updated 2/2021
English
English, French [Auto], 
30-Day Money-Back Guarantee

What you'll learn

  • Build native apps and progressive web apps from one and the same codebase
  • Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
  • Dive deeper into Ionic to learn more about core and advanced features
  • Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms
Curated for the Udemy for Business collection

Course content

18 sections • 287 lectures • 20h 23m total length

  • Preview02:27
  • What Is Ionic?
    Preview07:44
  • Join our Online Learning Community
    00:20
  • Preview04:28
  • Preview03:59
  • Our First Ionic App!
    Preview13:36
  • The History of Ionic
    Preview04:02
  • Ionic 4+ vs Ionic 3
    Preview03:06
  • Preview03:45
  • Comparing Ionic to Alternatives
    00:08
  • Preview06:23
  • Preview03:02
  • The Course Source Code
    00:22

  • Module Introduction
    00:32
  • What is Angular?
    02:42
  • Angular SPAs & Ionic
    03:09
  • Understanding Components
    01:37
  • Important: Creating an Angular Project with the CLI
    00:53
  • Installing Angular with the CLI
    04:29
  • Installing the IDE
    04:59
  • Understanding the Folder Structure
    08:14
  • The App Component
    07:04
  • Creating Our First Component
    04:05
  • Cross Component Communication with Property Binding
    05:23
  • Understanding Directives & String Interpolation
    04:05
  • Handling User Input
    04:08
  • Understanding Event Binding
    02:13
  • Local References
    01:49
  • Understanding Two-Way-Binding
    05:56
  • Passing Data Around with Custom Events
    03:58
  • Implementing Routing
    07:10
  • Setting Up Services
    03:15
  • Using Services with Dependency Injection
    02:48
  • Working with Angular Lifecycle Hooks
    03:25
  • Adding a Person with Services
    02:44
  • Navigating between Components
    02:03
  • Removing Items Upon a Click
    03:08
  • "Push"ing Data Around with Subjects
    05:34
  • More on RxJS & Observables
    00:03
  • Sending Http Requests
    10:03
  • Showing a Placeholder Whilst Waiting for a Response
    02:05
  • Wrap Up
    01:17
  • Useful Resources & Links
    00:02

  • Module Introduction
    01:20
  • Core App Building Blocks
    04:26
  • Under the Hood of Ionic Components
    06:47
  • Setting Up a Non-Angular Ionic Project
    03:04
  • Where to Learn all about Ionic Components
    02:29
  • Using Basic Ionic Components
    05:11
  • More Basic Components
    03:23
  • Component Categories
    02:27
  • Using the Ionic Grid
    04:51
  • Adding Icons & Using Slots
    06:14
  • Using CSS Utility Attributes
    03:42
  • Using Ionic Elements like "Normal" HTML Elements
    04:12
  • Validating User Input
    02:46
  • Creating Ionic Elements Programmatically
    04:57
  • Finishing Up the Base JavaScript Logic
    03:39
  • Finalizing the Layout
    01:31
  • Use the right Ionic Import
    00:04
  • Using Controller Components
    06:28
  • Practicing Ionic Components
    1 question
  • Why Angular?
    05:29
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:44
  • Why Use Angular?
    02:39
  • Important: Creating a New Project with the CLI
    00:29
  • Creating a New Ionic Angular Project
    05:49
  • Important: CSS Utility Attributes
    00:17
  • Analyzing the Created Project
    05:54
  • How Angular & Ionic Work Together
    03:53
  • Important: Extra Routing Modules
    00:24
  • Adding & Loading a New Page
    07:44
  • Using Angular Features on Ionic Components
    05:28
  • Setting Up Angular Routes
    04:06
  • Managing State with Services
    06:21
  • Extracting and Displaying Route Param Data
    08:34
  • A Potential Bug (+ Fix)
    00:45
  • Navigating Between Pages
    05:32
  • Deleting a Recipe
    04:34
  • There's a Bug!
    00:15
  • Injecting Ionic Controllers
    03:31
  • Angular Components vs Ionic Components
    05:49
  • Wrap Up
    00:37
  • Useful Resources & Links
    00:02

  • Module Introduction
    00:59
  • General Information
    01:28
  • Creating an Android App
    12:33
  • Running the App on a Real Android Device
    00:15
  • Creating an iOS App
    09:10
  • Running the App on a Real iOS Device
    00:12
  • Wrap Up
    01:03
  • Useful Resources & Links
    00:03

  • Module Introduction
    00:44
  • Error Messages & console.log()
    04:02
  • Using the Browser DevTools & Breakpoints
    02:30
  • Using VS Code for Debugging
    00:06
  • Debugging the UI & Performance
    02:53
  • Debugging Android Apps
    04:16
  • Debugging iOS Apps
    04:16
  • Wrap Up
    00:40
  • Useful Resources & Links
    00:03

  • Module Introduction
    01:41
  • How Routing Work In An Ionic + Angular App
    04:37
  • Ionic Page Caching & Extra Lifecycle Hooks
    09:20
  • Planning the Course Project
    04:06
  • Creating Our App Pages
    07:44
  • MUST READ: Ionic 5 and Routing / Lazy Loading
    01:23
  • Adjusting Our Main Routing Configuration
    01:59
  • Understanding Ionic Tabs
    01:29
  • Adding Tabs to the App
    15:22
  • Preparing Data & Services for the Project
    05:53
  • Outputting "Places"
    08:12
  • Adding Forward Navigation
    06:21
  • Going Back with NavController
    07:01
  • Practicing Ionic + Angular
    1 question
  • Navigating via Toolbar Buttons
    03:13
  • A Bug with Ionic
    00:30
  • Extracting the ID of Loaded Places
    05:34
  • More Practicing!
    1 question
  • Optional: Assignment Solution Code
    00:05
  • Adding a SideDrawer
    07:00
  • Opening + Closing the SideDrawer
    04:46
  • Adding Links & Switching Pages
    04:15
  • Adding the Auth Service
    03:28
  • Adding an Auth Guard
    07:47
  • Opening a Modal
    06:26
  • Closing the Modal & Passing Data
    07:21
  • Wrap Up
    01:24
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:52
  • Attributes & Slots
    06:09
  • Ionic Grid Basics
    08:35
  • Controlling Grid Column Sizes
    03:44
  • Controlling Grid Alignment
    05:29
  • Responsive Grid Sizing
    05:10
  • Grid Summary
    02:11
  • ion-list vs ion-grid
    03:06
  • ion-label & ion-item
    07:29
  • ion-text
    02:39
  • Swipeable List Items
    11:08
  • Swipeable Bookings
    10:12
  • Understanding Virtual Scrolling
    03:50
  • Implementing Virtual Scrolling
    05:23
  • Virtual Scrolling Bugs
    00:20
  • Adding Image Elements
    02:45
  • Segmented Buttons
    05:47
  • Adding a Spinner
    04:17
  • Using the Loading Controller
    02:36
  • Using the ActionSheet Controller
    06:50
  • Wrap Up
    01:42
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:12
  • How Styling & Theming Works in Ionic Apps
    06:44
  • Docs & Utility Attributes
    01:13
  • Setting Global Theme Variables
    03:28
  • Setting Global Styles
    01:18
  • Setting All Colors at Once
    02:35
  • Setting Platform-Specific Styles
    03:58
  • Styling Core Components with Variables
    08:13
  • Missing iOS Icons
    00:15
  • Adding Custom CSS Rules
    10:01
  • Component-specific CSS Variables
    04:32
  • Wrap Up
    00:40
  • Useful Resources & Links
    00:05

  • Module Introduction
    01:32
  • User Input Requirements
    01:20
  • Setting Up a Form Template
    05:45
  • Angular 8 & @ViewChild()
    00:14
  • Adding a Template-driven Form
    07:37
  • Handling Validation
    06:02
  • Switching Between Auth Modes
    02:35
  • Finishing the Auth Form
    02:28
  • Starting Work on a New Offer Form
    03:54
  • Finishing the Offer Form Template
    04:22
  • Creating a Reactive Form
    05:21
  • Syncing the Form to the Template
    04:00
  • Finishing the New Offer Form
    04:01
  • Edit Form Challenge
    00:52
  • Adding the Edit Offer Form
    05:36
  • Starting with the Booking Form
    04:33
  • Working on the Book Place Template
    05:59
  • Configuring the Date Controls
    11:44
  • Avoid Errors
    00:08
  • Validating & Submitting the Form
    08:12
  • Wrap Up
    01:26
  • Useful Resources & Links
    00:01

Requirements

  • Angular fundamentals are required, though a brief refresher is also provided in the course
  • Basic HTML, JS and CSS knowledge is required
  • NO advanced Angular knowledge is required

Description

Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed.

Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn't it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time.

The Ionic framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful components (which you'll learn about in this course) that can be used to compose native-like user interfaces.

Capacitor (another tool provided by the Ionic team) will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web).

No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!

My name is Maximilian Schwarzmüller and I'm a freelance web developer as well as creator of many 5-star rated courses here on Udemy - including my "Angular - The Complete Guide" course, the bestselling Angular course on Udemy!

I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!

This course takes your from zero to published app, taking a very practice-orientated route. You'll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

You'll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

  • A brief refresher on Angular

  • How to set up your Ionic projects

  • The basics about Ionic - How navigation works, how your project is structured and you use its rich component library

  • How to use the many beautiful components Ionic ships with

  • How to use different kinds of navigation concepts: "Back"-Button-Navigation, tabs and sidemenus

  • How to show modals, alerts, toasts and many, many more useful UI components

  • How to test the app in the browser, on emulators or real devices

  • How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.

  • How to authenticate users and access web servers to store + load data

  • How to access the local device storage and native device features like the camera or geolocation

  • So much more ... like styling and theming your app

  • Finally, you'll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)

Does this sound great?

I can't wait to welcome you in this course! :)

Who this course is for:

  • This course is for students who want to use their Angular knowledge to build native mobile apps & web apps with one codebase
  • This course is for everyone interested in diving into the development of native mobile apps for iOS and Android

Featured review

Fabricio Simoncelli
Fabricio Simoncelli
398 courses
13 reviews
Rating: 5.0 out of 52 months ago
Very concise course, Max dedicates time to the important topics. For the rest of them he indicates where to continue with the official doc. So in the end, you get a really nice course that you can keep going over to reinforce the important concepts.

Instructor

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.7 Instructor Rating
  • 594,292 Reviews
  • 1,411,819 Students
  • 36 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.