Rob Ferguson

Ionic Style Guide

Rob Ferguson -

AngularJS is the toolset that underpins the Ionic Framework.

This means that if you want to use the Ionic Framework to develop hybrid mobile applications then you will need to understand how Angular web applications are built and structured. A great place to start is to take a look at the Angular project structure template's created by popular Yeoman generators and projects like ng-boilerplate

Yeoman

Yeoman provides a generator ecosystem that helps you to kickstart new projects. A generator is basically a plugin that can be run with the yo command to create the scaffolding for a new project:

generator-ionic

In a previous post, I wrote about using generator-ionic (which is based on the Yeoman Team's generator-angular) to create the scaffolding for a mobile-optimised Administration UI for the Vardyger publishing platform.

This is what the generator-ionic's project structure template looks like:

├── /app
    └── /bower_components - Libraries managed by Bower
        └── /angular
        ...
    └── /fonts            - Font files e.g., Ionic icons
    └── /images           - Image files
    └── /scripts          - AngularJS scripts
        ├── app.js
        ...
    └── /styles           - Stylesheets
        ├── main.scss
    └── /templates        - HTML views
    ├── index.html        - App entry point
├── /hooks                - Cordova lifecycle hooks
├── /node_modules         - Packages managed by npm
├── /platforms            - Targeted operating systems
├── /plugins              - Native plugins
├── /resources            - Placeholder icons and splashscreens
    └── /ios
    └── /android
├── /test                 - Unit tests
├── /www                  - Copied from /app/ used by Cordova
├── .bowerrc              - Bower configuration file
├── .gitignore            - Git configuration file
├── bower.json            - Bower dependencies
├── config.xml            - Cordova configuration file
├── Gruntfile.js          - Grunt configuration file
├── package.json          - Node and Grunt dependencies

Another great place to learn how Angular applications are built and structured is to take a look at these AngularJS style guides:

For example, Minko's guide discusses two common approachs used to structure Angular applications, while John's guide discusses the LIFT principle and the folders-by-feature approach.

Deciding exactly which combination of Ionic (Angular)-styles are right for you will take some time but just remember:

"The nice thing about standards is that there are so many of them to choose from." - Andrew Stuart "Andy" Tanenbaum

References: