Building the Foundation: Setting Up Your First Angular-15 Ionic-7 App with Bottom App Navigation

To begin a new ionic app, I started off with an external terminal ‘Windows Powershell’ to write initial commands.

First I started off by making sure I have the right NodeJS version. I used the node -v command to check my node version which is: v18.15.0. If I didn’t have node, I would’ve gone to Download | Node.js (nodejs.org) website to download and install the recommended stable version.

 

Also, I made sure I have NPM (Node package manager) installed by npm -v command which gives a version of 9.5.0. If I didn’t have npm, I would’ve referred to Downloading and installing Node.js and npm | npm Docs (npmjs.com) and used the npm install -g npm command to install npm to allow me to install various packages from the npm library.

Then I referred to How to Install The Ionic Framework CLI to Build Mobile Apps to install the ionic command line interface via the following command in terminal.

npm install -g @ionic/cli 

Also I referred to Angular - CLI Overview and Command Reference to install the angular CLI globally using the following command. I’m using angular cli version 15.0.0.

 npm install -g @angular/cli 

I’ve realized that it’s very important to install the right versions of all node packages since they’re all dependent on each other and the documentations keep on changing from time to time. It is better to read the documentation instead of following through outdated tutorial videos.

After installing globally, I changed my directory to where I wanted my app to be stored on the drive by using cd E:\\Tutorials command in the terminal. If I had a folder with space between the names, the terminal doesn’t recognize it as a proper path name so it’s better to create a folder with small strings. Also, long string paths create issues in build and deployment.

To start an ionic app, I entered:

ionic start grange-mobile-app tabs --type=angular 

This is in the format: ionic start <app-name> <template> --type=<framework>.

I could’ve also just entered ionic start which would’ve asked me this Use the app creation wizard? to which if I answered yes, it would’ve taken me to app creation wizard Create your Ionic App (ionicframework.com) and if answered no, it would’ve taken me through the following step by process with options for framework (React, Angular & Vue), starter templates (tabs, list, blank) and to choose between NgModulesor standalone components:

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.

? Project name: grange-mobile-app

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: tabs
? Would you like to build your app with NgModules or Standalone Components?
 Standalone components are a new way to build with Angular that simplifies the way you build your app.
 To learn more, visit the Angular docs:
 <https://angular.io/guide/standalone-components>

<!-- I could've selected Ng Modules which would've given me the old way of working in angular with routing-module and module files for each page and component but the new standalone component way is cleaner. -->

 Standalone
√ Preparing directory .\\my-app in 1.53ms
√ Downloading and extracting tabs starter in 397.34ms
> ionic integrations enable capacitor --quiet -- my-app io.ionic.starter
> npm.cmd i --save -E @capacitor/core@latest

It takes about 3-5 mins to download and extract the necessary files and packages to the folder. Once it is done, I change the directory to the app by command cd grange-mobile-app and open it by command code . which opens the app in VS code editor. I could’ve also navigated to the app in my file browser and opened it directly in VS code.

I check the multiple files in src/app where I have main.ts which holds all the modules and providers, index.html which holds the meta tags and <app-root></app-root> which is the container for all the content on the app. Since I’ve used angular framework, a component based framework, every component has a typescript file which holds the component logic, a template file which holds the HTML markup for the display and an SCSS file which holds the styling.

There is also a page.spec.ts file that is used for testing purposes which is not of any concern right now. The theme folder contains a variable.scss file which contains all the ionic styling.

The environment.ts file in environment folder holds the API keys and any other URLs for API calls. The assets folder holds all the local images or logos or icons.

The app.route.ts file holds all the links to all the pages. Since I’m using a tabs starter template all my route links are located within pages folder ⇒ tabs page folder ⇒ tabs.route.ts. Whenever I create a new page, I have to shift the page from app.route.ts to the tabs.route.ts such that the bottom tabs appear on all pages.

It is also important to keep track of the package.json file and make sure correct versions of all packages are installed. All my installed packages are listed here and I can use ionic repair command to uninstall and reinstall all the packages from this file at any later time. I can also uninstall individual packages using npm uninstall <package-name> command.

Building the Bottom Tab Navigation

With the tabs starter template, I got three separate tabs with their routing links in tabs.route.ts and their icon with text in tabs.page.html template file. The three tabs are also created as pages with their respective typescript, html, scss and spec.ts files. I have replaced the existing tabs text and their respective icons on the tabs.page.html file in the following way:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" #tab1>
      <!-- The icon is set to the school icon if the tab is selected and the school-outline icon if the tab is not selected. -->
      <!-- Icon source: <https://ionic.io/ionicons>  -->
      <ion-icon [name]="tab1.selected ? 'school' : 'school-outline'"></ion-icon>
      <ion-label>Modules</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" #tab2>
      <!-- The icon is set to the person icon if the tab is selected and the person-outline icon if the tab is not selected. -->
      <ion-icon [name]="tab2.selected ? 'people' : 'people-outline'"></ion-icon>
      <ion-label>Classroom</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="diary" #diary>
      <!-- The icon is set to the calendar icon if the tab is selected and the calendar-outline icon if the tab is not selected. -->
      <ion-icon [name]="diary.selected ? 'book' : 'book-outline'"></ion-icon>
      <ion-label>Diary</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4" #tab4>
      <ion-icon
        [name]="tab4.selected ? 'person-circle' : 'person-circle-outline'"
      ></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

After the tabs are modified, I run the app on my local server using the command ionic lab which opens the Android and iOS versions of the app. I can also use ionic serve to open the web version and open the console to view it on a mobile screen. Now I’ll begin building the individual screens and features alongside using SQL and NoSQL databases with their scripts in Part 2 of this series.