Skip to content

ionic-angular

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

ionic-angular

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.devcontainer
.devcontainer
 
 
.vscode
.vscode
 
 
README.md
README.md
 
 

README.md

⚡ Ionic Angular Development Container

Cross-platform mobile development with Ionic Framework and Angular

📋 Overview

This development container provides a complete Ionic Angular development environment with:

  • ✅ Node.js 20 LTS
  • ✅ Ionic CLI latest version
  • ✅ Angular CLI
  • ✅ Cordova for native builds
  • ✅ TypeScript support
  • ✅ Live reload development server

🚀 Quick Start

  1. Open in VS Code

    code .

  2. Reopen in Container

    • Press F1 → Dev Containers: Reopen in Container

  3. Create your first Ionic app

    ionic start myApp tabs --type=angular
cd myApp
ionic serve --external

  4. Access your app

    • Open browser at http://localhost:8100

🛠️ Included Tools

Runtime & CLI Tools

  • 📦 Node.js 20 - Latest LTS version
  • ⚡ Ionic CLI - Ionic command-line interface
  • 🅰️ Angular CLI - Angular tooling
  • 📱 Cordova - Native app builds
  • 🏃 Native Run - Run on devices

Code Quality

  • ✨ ESLint - Linter
  • 💅 Prettier - Code formatter
  • 📘 TypeScript - Type safety

📦 VS Code Extensions

  • ionic.ionic - Ionic extension
  • angular.ng-template - Angular language service
  • johnpapa.angular2 - Angular snippets
  • dbaeumer.vscode-eslint - ESLint integration
  • esbenp.prettier-vscode - Prettier formatter
  • nrwl.angular-console - Angular Console

🎨 Customization

Multi-Stage Dockerfile

  1. base - Node.js 20
  2. build-tools - npm, yarn
  3. ionic-angular - Ionic CLI, Angular CLI, Cordova
  4. dev-tools - Linting, formatting
  5. android-tools - Android SDK (optional)
  6. tools - Additional utilities
  7. development - Dev environment
  8. builder - Build stage
  9. production - Nginx runtime

Enable Android Development

Uncomment the Android SDK stage in .devcontainer/Dockerfile.

💡 Usage Examples

Create New App

# Tabs template
ionic start myApp tabs --type=angular

# Sidemenu template
ionic start myApp sidemenu --type=angular

# Blank template
ionic start myApp blank --type=angular

# With Capacitor
ionic start myApp tabs --type=angular --capacitor

Development

# Start dev server
ionic serve --external

# Start on specific port
ionic serve --port 8200 --external

# Lab mode (iOS & Android preview)
ionic serve --lab

# Build
ionic build

# Build for production
ionic build --prod

Generate Components

# Page
ionic generate page my-page
ionic g page my-page

# Component
ionic generate component my-component

# Service
ionic generate service my-service

# Module
ionic generate module my-module

Capacitor (Native Apps)

# Add Capacitor
ionic integrations enable capacitor

# Add platforms
ionic cap add android
ionic cap add ios

# Sync web assets
ionic cap sync

# Open in native IDE
ionic cap open android
ionic cap open ios

# Run on device
ionic cap run android
ionic cap run ios

Cordova (Native Apps)

# Add platforms
ionic cordova platform add android
ionic cordova platform add ios

# Build
ionic cordova build android
ionic cordova build ios

# Run on device
ionic cordova run android --device
ionic cordova run ios --device

# Add plugins
ionic cordova plugin add cordova-plugin-camera

📚 Popular Ionic Plugins

# Camera
npm install @capacitor/camera
ionic cap sync

# Geolocation
npm install @capacitor/geolocation

# Storage
npm install @capacitor/storage
npm install @ionic/storage-angular

# HTTP
npm install @capacitor/http

# File System
npm install @capacitor/filesystem

# Network
npm install @capacitor/network

# Push Notifications
npm install @capacitor/push-notifications

# Social Sharing
npm install @capacitor/share

🎨 UI Components

Ionic provides rich UI components:

// Import in your module
import { IonicModule } from '@ionic/angular';

// Use in templates
<ion-button>Click Me</ion-button>
<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Card content
  </ion-card-content>
</ion-card>

🧪 Testing

# Unit tests
ng test

# E2E tests
ng e2e

# Test coverage
ng test --code-coverage

🐛 Debugging

Press F5 to launch Chrome debugger with your Ionic app.

🌐 Ports

  • 8100 - Ionic dev server default
  • 4200 - Angular dev server

📚 Resources

Happy Coding! 🎉