Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can build mobile, web, and desktop applications with one shared code. In this getting started with Ionic article we will talk about Ionic project structure and installation.

  1. Prerequisites

    • Download & Install node from https://nodejs.org/en/
    • Download & Install XCode from https://developer.apple.com/xcode/ and Android Studio from https://developer.android.com/studio/index.html
    • Install Code Editor (like Visual Studio Code) from https://code.visualstudio.com
    • You should be familiar with HTML, CSS, and JavaScript
    • Familiarity with Ionic and Cordova will make it easier, but it’s not necessary
  2. Install Ionic

    $ npm install -g ionic cordova

    Note: The -g means this is a global install, so for Window’s you will need to open an Admin command prompt. For Mac/Linux, you’ll need to run the command with sudo.

  3. Create a new Ionic 2 App

    Syntax : $ ionic start [<name>] [<template>]

    Example : $ ionic start testDemo blank

    This will start a new app with the “blank” template.

    Input Description
    name The name of your project directory
    template The starter template to use (e.g. blank, tabs; use –list to see all)
    Option Description
    –list, -l List starter templates available
    –type Type of project to start (e.g. ionic-angular, ionic1)
    –display-name, -n Human-readable name (use quotes around the name)
    –cordova Include Cordova integration
    –no-deps Do not install npm/yarn dependencies
    –no-git Do not initialize a git repo
    –no-link Do not ask to connect the app with the Ionic Dashboard
    –pro-id Specify an app ID from the Ionic Dashboard to link
    –bundle-id Specify the bundle ID/application ID for your app (reverse-DNS notation)
  4. To run your app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser

    $ cd testDemo$ ionic serve

  5. Project Structure

    Let’s walk through the anatomy of an Ionic app. Inside of the folder that was created, we have a typical Cordova project structure where we can install native plugins, and create platform-specific project files.

    File Path Description
    ./src/ Inside of the src directory we find our code. This is where most of the work for an Ionic app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

    src/app/app.module.ts is the entry point for our app.

    ./src/index.html src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won’t spend much of our time in this file.

    For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

    <ion-app></ion-app>

    And the following scripts near the bottom:

    <!– Ionic’s root component and where the app will load –>

    <ion-app></ion-app>

    <!– The polyfills js is generated during the build process –>

    <script src=”build/polyfills.js”></script>

    <!– The vendor js is generated during the build process

    It contains all of the dependencies in node_modules –>

    <script src=”build/vendor.js”></script>

    <!– The main bundle js is generated during the build process –>

    <script src=”build/main.js”></script>

    src/app/app.html Here’s the main template for the app. This template is an ion-nav component to act as the main content area

    <ion-nav [root]=”rootPage”></ion-nav>

    src/app
    /app.component.ts
    This is the first component that gets loaded in our app, and typically it’s an empty shell for other components to be loaded into.

    Every app has a root module that essentially controls the rest of the application. This is very similar to ng-app from Ionic 1 and AngularJS. This is also where we bootstrap our app using ionicBootstrap.

    In this module, we’re setting the root component to HomePage, in src/app/app.component.ts. This is the first component that gets loaded in our app, and typically it’s an empty shell for other components to be loaded into. In app.component.ts, we’re setting our template to src/app/app.html, so let’s look in there.

    src/app

    /app.module.ts

    Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.

    While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

    An NgModule, whether a root or feature, is a class with an @NgModule decorator.

    NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:

    declarations – the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.

    exports – the subset of declarations that should be visible and usable in the component templates of other modules.

    imports – other modules whose exported classes are needed by component templates declared in this module.

    providers – creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.

    bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

    src/app/app.scss It is used to declare any styles that will be used globally throughout the application. Although it is the “main” .scss file, you won’t likely use it often – most of the styling will happen in the component specific .scss files.
    src/app/main.ts Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts
    config.xml This configuration file is used by Cordova and includes settings which are relevant for building your application for the iOS and Android platform.
    package.json This file contains all dependencies (NPM packages) of our application. You can add new packages or update the version of packages already included. By executing the command npm install in the project directory the dependencies listed in package.json are downloaded and added to the project automatically.

    Project Structure

    project/

    ├─ ionic.config.json # Ionic project config file

    ├─ package.json

    ├─ src/

    │  ├─ app/

    │  │  ├─ app.component.ts # root component for your app

    │  │  ├─ app.html # app component template

    │  │  ├─ app.module.ts # NgModule for app component

    │  │  ├─ app.scss # global SCSS

    │  │  └─ main.ts # bootstrap file

    │  ├─ assets/ # put your images, etc. here

    │  ├─ pages/ # contains the page components for your app

    │  ├─ theme/

    │  │  └─ variables.scss # see https://ionicframework.com/docs/theming

    │  └─ index.html # main html file

    └─ www/ # build output directory

  6. Ionic Generate

    Syntax : $ ionic generate [<type>] [<name>]

    Example : $ ionic generate component foo

    Example : $ ionic generate page Login

    Input Description
    type The type of generator (e.g. component, directive, page, pipe, provider, tabs)
    name The name of the component being generated
    Option Description
    –no-module Do not generate an NgModule for the component
    –constants Generate a page constant file for lazy-loaded pages
  7. Ionic Info

    Syntax : $ ionic info

    Print system/environment info

  8. Ionic Serve

    Syntax : $ ionic serve

    By default, ionic serve boots up a development server on all network interfaces and prints the external address(es) on which your app is being served. It also broadcasts your app to the Ionic DevApp on your network. To disable the DevApp and bind to localhost, use –local.

    Try the –lab option to see multiple platforms at once.

    Option Description
    –consolelogs, -c Print app console logs to Ionic CLI
    –address Use specific address for the dev server
    –port, -p Use specific port for HTTP
    –livereload-port, -r Use specific port for live-reload
    –dev-logger-port Use specific port for dev server communication
    –no-devapp Do not publish DevApp service
    –no-open Do not open a browser window
    –local Disable external network usage
    –no-proxy Do not add proxies
    –browser, -w Specifies the browser to use (safari, firefox, google chrome)
    –browseroption, -o Specifies a path to open to (/#/tab/dash)
    –lab, -l Test your apps on multiple platform types in the browser
    –platform, -t Start serve with a specific platform (android, ios)
  9. Ionic Build

    Syntax : $ ionic build

    Syntax : $ ionic build –prod

    ionic build will perform an Ionic build, which compiles web assets and prepares them for deployment. For Ionic/Cordova apps, the CLI will run cordova prepare, which copies the built web assets into the Cordova platforms that you’ve installed. For full details, see ionic cordova prepare –help.

    Option Description
    –prod Build the application for production
    –aot Perform ahead-of-time compilation for this build
    –minifyjs Minify JS for this build
    –minifycss Minify CSS for this build
    –optimizejs Perform JS optimizations for this build
  10. Config.xml

    Config.xml is a global configuration file that controls many aspects of a cordova application’s behaviour. This platform-agnostic XML file is arranged based on the W3C’s Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.

  11. RC Folder Structure

    Name Description
    app All Ionic 2 apps will have a root component. This is not all that different to all the other components in your application, one obvious difference you will notice though is that it is in its own app folder, and is named app.component.ts.

    This folder will contain all SCSS files which contain styling on application level. If you take a look into that folder you’ll find a core SCSS file as well as platform specific SCSS files. Another SCSS file is containing SCSS variables. It is used to declare any styles that will be used globally throughout the application. Although it is the “main” .scss file, you won’t likely use it often – most of the styling will happen in the component specific .scss files.

    It is used to declare any styles that will be used globally throughout the application. Although it is the “main” .scss file, you won’t likely use it often – most of the styling will happen in the component specific .scss files.

    assets The assets folder can be used to store any static files you want to include in your project like images, or JSON data files. Anything in this folder will be copied over to your build folder each time the application is built. i.e images, font, icons ,etc
    components Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. Ionic comes with a number of components, including modals, popups, and cards.
    pages This folder is containing all pages of your application. Within pagesyou’ll again find subfolders. Each page is implemented as an Angular 2 component (you’ll learn more about Angular 2 components later on). As each component implementation can consist of multiple files, the files belonging to one component are kept in folder of pages.
    theme variables.scss is used to modify the apps shared variables. Here you can edit the default values for things like the $colors map which sets up the default colours for the application, $list-background-color, $checkbox-ios-background-color-on and so on. For a list of all the variables that you can overwrite, take a look at this page
    pipes Pipes are super useful to have in your application – in general they are used to manipulate data before displaying it to the user (think date conversions, formatting and so on).
    providers Providers allow you to create a self-contained service that provides functionality to your application. The role of a provider might include things like fetching data from a server, performing operations on data, sharing data, providing a set of complicated mathematical operations, and so on.

    In general, we use providers to do the heavy lifting in our applications. By using a provider, we abstract the functionality it provides away from a specific component, which makes the codebase more maintainable and allows us to reuse that same provider in multiple different places in the application (or even in a completely different application).

    So, as you can see a page in Ionic is just an Angular component which itself a TypeScript class decorated with @Component decorator imported from @angular/core.

    The component/page gets the information about its view using the templateUrl which points to a path of an HTML page, in this case home.html which resides in the same folder.

    You use pages to build apps, an app is a collection of pages, in two ways: 1) By declaring and importing them when the app is starting and 2) By lazy loading them.

    Components are the basic constructs of Angular and since Ionic 2 and Ionic 3 are based respectively on Angular 2 and Angular 4, they are also the basic buildings of Ionic apps. In Ionic every page is a component.

    A component is an independent construct which encapsulates the controller code, the view and styles, and has inputs and outputs.

    An Ionic app is a bunch of components (an app component + page components) and providers organized together using Angular modules.
    An Ionic app is a bunch of components(an app component + page components ) and providers organized together using Angular modules.

Interested in Angular? Click here to read more Angular articles in Code4Developers

Pratik Maniar
Pratik Maniar on FacebookPratik Maniar on Linkedin