+91 9875642702
+91 8583959528

Ionic App Development

image
image
image
image
image
image
  • Home -
  • Ionic Angular Hybrid Mobile Apps Development Course Kolkata

IONIC ANGULAR HYBRID MOBILE APPS DEVELOPMENT COURSE

Angular 5 (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?

The Ionic 2/ 3 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 2/ 3 will handle the rest and compile your code for you. 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!

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

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

This course takes your from zero to published app, taking a very practice-orientated route. You'll build four major apps throughout the course, learning about the basics of Ionic 2/ 3, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

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 (yes, it's like magic!), on an emulator or on your own device!.

    • Module Introduction
    • A different Way of Creating a New Project
    • Other available Project Templates
    • Understanding the Structure of an Ionic 2 Project
    • How an Ionic 2 App Works
    • Pages vs Components
    • How Navigation works in an Ionic 2 App
    • Initializing Navigation in the AppComponent
    • ionic generate page XY Problems
    • Creating a Page and how to Navigate to it
    • First Summary
    • An Alternative Way of Creating Pages
    • Passing Data between Pages
    • Popping Pages - Going Back
    • ime to Practice - Pages & Navigation - Problem
    • Time to Practice - Pages & Navigation - Solution
    • Saving Time with helpful Navigation Directives
    • onfiguring Page Transitions
    • Understanding the Lifecycle of a Page
    • The Page Lifecycle in Action
    • How to use the Ionic 2 Documentation
    • Styling the App and Setting a Theme
    • Using Utility Attributes
    • Module Summary
    • Section Source Code & Links
  • Course Introduction
  • What Is Ionic?
  • What is Angular?
  • Our First Ionic App!
  • Ionic 4+ vs Ionic 3
  • How to Build Native Mobile Apps with Ionic
  • Module Introduction
  • What is Angular?
  • Angular SPAs & Ionic
  • Understanding Components
  • Installing Angular with the CLI
  • Installing the IDE
  • Understanding the Folder Structure
  • The App Component
  • Creating Our First Component
  • Cross Component Communication with Property Binding
  • Understanding Directives & String Interpolation
  • Handling User Input
  • Understanding Event Binding
  • Local References
  • Understanding Two-Way-Binding
  • Passing Data Around with Custom Events
  • Implementing Routing
  • Setting Up Services
  • Using Services with Dependency Injection
  • Working with Angular Lifecycle Hooks
  • Adding a Person with Services
  • Navigating between Components
  • Removing Items Upon a Click
  • "Push"ing Data Around with Subjects
  • More on RxJS & Observables
  • Sending Http Requests
  • Module Introduction
  • Core App Building Blocks
  • Under the Hood of Ionic Components
  • Setting Up a Non-Angular Ionic Project
  • Where to Learn all about Ionic Components
  • Using Basic Ionic Components
  • More Basic Components
  • Component Categories
  • Using the Ionic Grid
  • Adding Icons & Using Slots
  • Using CSS Utility Attributes
  • Using Ionic Elements like "Normal" HTML Elements
  • Validating User Input
  • Creating Ionic Elements Programmatically
  • Finishing Up the Base JavaScript Logic
  • Finalizing the Layout
  • Using Controller Components
  • Practicing Ionic Components
  • Module Introduction
  • Why Use Angular?
  • Creating a New Ionic Angular Project
  • Analyzing the Created Project
  • How Angular & Ionic Work Together
  • Adding & Loading a New Page
  • Using Angular Features on Ionic Components
  • Setting Up Angular Routes
  • Managing State with Services
  • Extracting and Displaying Route Param Data
  • Navigating Between Pages
  • Deleting a Recipe
  • There's a Bug!
  • Injecting Ionic Controllers
  • Angular Components vs Ionic Components
  • General Information
  • Creating an Android App
  • Running the App on a Real Android Device
  • Creating an iOS App
  • Running the App on a Real iOS Device
  • General Information
  • Creating an Android App
  • Running the App on a Real Android Device
  • Creating an iOS App
  • Running the App on a Real iOS Device
  • Module Introduction
  • Error Messages & console.log()
  • Using the Browser DevTools & Breakpoints
  • Using VS Code for Debugging
  • Debugging the UI & Performance
  • Debugging Android Apps
  • Debugging iOS Apps
  • Module Introduction
  • How Routing Work In An Ionic + Angular App
  • Ionic Page Caching & Extra Lifecycle Hooks
  • Planning the Course Project
  • Creating Our App Pages
  • Adjusting Our Main Routing Configuration
  • Understanding Ionic Tabs
  • Adding Tabs to the App
  • Preparing Data & Services for the Project
  • Outputting "Places"
  • Adding Forward Navigation
  • Going Back with NavController
  • Practicing Ionic + Angular
  • Navigating via Toolbar Buttons
  • Extracting the ID of Loaded Places
  • More Practicing!
  • Adding a SideDrawer
  • Opening + Closing the SideDrawer
  • Adding Links & Switching Pages
  • Adding the Auth Service
  • Adding an Auth Guard
  • Opening a Modal
  • Closing the Modal & Passing Data
  • Module Introduction
  • Attributes & Slots
  • Ionic Grid Basics
  • Controlling Grid Column Sizes
  • Controlling Grid Alignment
  • Responsive Grid Sizing
  • Grid Summary
  • ion-list vs ion-grid
  • ion-label & ion-item
  • ion-text
  • Swipeable List Items
  • Swipeable Bookings
  • Understanding Virtual Scrolling
  • 03:50
  • Implementing Virtual Scrolling
  • Virtual Scrolling Bugs
  • Adding Image Elements
  • Segmented Buttons
  • Adding a Spinner
  • Using the Loading Controller
  • Using the ActionSheet Controller
  • Module Introduction
  • How Styling & Theming Works in Ionic Apps
  • Docs & Utility Attributes
  • Setting Global Theme Variables
  • Setting Global Styles
  • Setting All Colors at Once
  • Setting Platform-Specific Styles
  • Styling Core Components with Variables
  • Missing iOS Icons
  • Adding Custom CSS Rules
  • Component-specific CSS Variables
  • User Input Requirements
  • Setting Up a Form Template
  • Adding a Template-driven Form
  • Handling Validation
  • Switching Between Auth Modes
  • Finishing the Auth Form
  • Starting Work on a New Offer Form
  • Finishing the Offer Form Template
  • Creating a Reactive Form
  • Syncing the Form to the Template
  • Finishing the New Offer Form
  • Edit Form Challenge
  • Adding the Edit Offer Form
  • Starting with the Booking Form
  • Working on the Book Place Template
  • Configuring the Date Controls
  • Validating & Submitting the Form
  • Canceling Bookings
  • What is State?
  • Adding New Places
  • Using RxJS Subjects for State Management
  • Passing Data via Subjects & Subscriptions
  • UI State in Action
  • Updating Places
  • UI State with Bookable Places
  • Filtering & Navigation
  • Booking Places
  • Fixing a Bug
  • Canceling Bookings
  • Finishing Touches
  • How To Connect to a Backend
  • Setting Up Firebase
  • Sending Data via Http
  • Using Response Data
  • Fetching & Displaying Data
  • Updating Places
  • Fetching Data in Multiple Places
  • Loading Data in a Single Place
  • Updating Places Correctly
  • Error Handling
  • Fetching Single Places
  • Adding a Booking
  • Fetching Bookings By User
  • Deleting Bookings
  • API Setup
  • Adding a LocationPicker Component
  • Opening the Map Modal
  • Adding the Google Maps SDK
  • Rendering a Map
  • Picking Locations via a Click on the Map
  • Finding the Address for a Place
  • Fetching a Static Image URL
  • Displaying a Place Preview
  • Changing the Selection
  • Removing the Click Listener
  • Submitting the Location
  • Outputting Address & Map
  • Re-using the Maps Modal
  • Understanding Capacitor & Cordova
  • Using the Docs
  • Using Capacitor Plugins
  • Getting the User Location
  • Testing the Location Feature
  • Starting With the Image Picker
  • Taking Pictures
  • Avoid Distorted Pictures
  • Detecting the Platform Correctly
  • Adding a Filepicker Fallback
  • Getting the Picked Image
  • Converting the Image String to a File
  • Storing the Image in the Form
  • Using PWA Elements
  • Improving the ImagePicker Component
  • Adding Server-side Image Uploading Code
  • Adding Image Upload
  • How Authentication Works
  • Adding User Signup
  • Refactoring the Authentication Code
  • Adding User Login
  • Managing the User with a Subject
  • Storing the Token in Memory
  • Using the ID Observable Correctly
  • More userId Usage
  • Fixing the Subscription
  • Using the userId Everywhere
  • Storing Auth Data in Device Storag
  • Adding Autologin
  • 06:48
  • Using Autologin
  • Adding a Reactive Logout System
  • Adding Autologout
  • Requiring the Auth Token on the Backend
  • Sending the Auth Token to the Backend
  • More Token Usage
  • Optional: Check Auth State When App Resumes
  • Preparing App Configs
  • Custom Icons & Splash Screens
  • Android Deployment
  • iOS Deployment

Course Features

  • Course Duration: 4 Months
  • Class: 3 Days In A Week
  • Mode Of Training:

    Classroom

    Online

    WeekEnd

Course Features

  • Course Duration: Months
  • Class:
  • Fees: Rs-
  • Mode Of Training:

    Classroom

    Online

    WeekEnd

    QUICK CONTACT