Ionic Angular: Project Structure Suggestion

Tom Fong — Mon, 06 Jun 2022 06:13:49 +0000

I would like to share how I manage Ionic Angular project generally.

By using ionic generate command, we can get what Angular features are available in an Ionic Angular project:

> page 
  component 
  service 
  module 
  class 
  directive 
  guard 
  class 
  directive 
  guard 
  pipe 
  interface 
  enum

I usually divide and group them according to their type (component, service, guard etc.) rather than use case. It can make the project structure cleaner and simplify the syntax of importing exported declarations or modules.

Here is an example of the structure I usually apply

src
├── app
    ├── components
        └── search
            ├── search.component.html
            ├── search.component.scss
            └── search.component.ts
    ├── directives
        ├── disable-click.directive.ts
        └── highlight.directive.ts
    ├── enums
        ├── colors.ts
        └── genders.ts
    ├── guards
        └── auth.guard.ts
    ├── modals
        └── student-info
            ├── student-info.module.ts
            ├── student-info.page.html
            ├── student-info.page.scss
            └── student-info.page.ts
    ├── models
        └── student.ts
    ├── pages
        └── home
            ├── home-routing.module.ts
            ├── home.module.ts
            ├── home.page.html
            ├── home.page.scss
            └── home.page.ts
        └── login
            ├── login-routing.module.ts
            ├── login.module.ts
            ├── login.page.html
            ├── login.page.scss
            └── login.page.ts
    ├── pipes
        └── date.pipe.ts
    ├── services
        ├── auth.service.ts
        └── env.service.ts
    ├── utils
        ├── animations.ts
        └── validators.ts
├── assets
├── environments
├── theme
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

Key Points

components: This folder consists of all non-page components that is without module.

directives: This folder consists of all Angular directives.

enums: This folder consists of all enums.

guards: This folder consists of all Angular guards.

modals: This folder consists of all page components that is not used for routing but for Ionic modal.

models: This folder consists of all classes that is used to represent MVC's model or so-called DTO (Data Transfer Object).

pages: This folder consists of all page components that should be used for routing.

pipes: This folder consists of all Angular pipes.

services: This folder consists of all Angular injectable services.

utils: This folder consists of all helper classes or functions.

Example

I did not create an example project to demonstrate this structure, but you can take my Ionic app - Simple QR as a real-world reference.

Hope this can help you. Happy coding!

Simple QR - open-source app to scan, create and store QR codes

Tom Fong — Sat, 04 Jun 2022 16:14:50 +0000

I've been developing an open-source app called Simple QR that provides a simple UI and experience to scan, create and store QR codes. Here is the source code:

tomfong / simple-qr

Simple and lightweight app to scan, create and store QR codes.

Simple QR

Simple QR

Simple and lightweight app to scan, create and store QR codes

About

Simple QR is a FOSS app to scan, create and store QR codes with a simple UI and experience. No backend service connected. No data collected. No ads.

It's now available on the following platforms.

App Store	Google Play	GitHub	IzzyOnDroid

Features

By using the app, you can

Scan QR Code and other barcodes in a second, including UPC, EAN, Code 39/128, ITF, Codabar, Aztec, Data Matrix, PDF417, MaxiCode and GS1 DataBar.
Import image files and scan the QR Code on it.
Create QR code from templates, which includes Free Text, URL, vCard Contact, Phone Number, Message, Email and Wi-Fi.
Automatically log results that you scan, create or view again. These logged records can be bookmarked for quick access, and also backupable.
Do tasks on the result content with a tap, including but not…

View on GitHub

What can I do with Simple QR?

By using the app, you can

Scan and read various barcodes by using camera.
Import image to read QR code.
Generate QR code from different templates.
Customize the QR code, e.g. color, margin, error correction level.
Do various tasks on the result content with a tap.
Log the result content from scanning, creating or viewing again.

What makes Simple QR?

To make it hybrid, I use ionic, capacitor and angular to develop Simple QR. If you are a beginner of ionic or angular, I think this project is a good reference to you.

Where can I download from?

Simple QR is available on both App Store and Google Play.

If you don't want to access to both stores, you can also download it from GitHub or IzzyOnDroid.

Any kind of discussion, feedback or idea sharing is welcomed!

DEV Community: Tom Fong