IonicPlus Development Guidelines

First Time Setup

$ sudo apt-get install nodejs
$ sudo apt-get install npm
$ sudo apt-get install git
$ sudo npm install -g gulp
$ sudo npm install -g bower
$ sudo npm install -g cordova
$ sudo npm install -g ionic@legacy (Install Legacy Ionic CLI instead of 3.x version)
$ cd ~/ionicplus
$ npm install
$ bower install
$ gulp build or gulp -b
$ ionic state reset
$ ionic run android

App Configurations

Please find the configuration details here

Gulp Tasks

gulp or gulp serve

– This task copies all scripts, fonts, images, css, libraries and templates to .tmp folder in uncompressed format. It also executes ionic serve from .tmp folder. All assets during development are served from .tmp folder

gulp build or gulp -b

– This task copies all scripts, fonts, images, css, libraries and templates to www folder in compressed format.

gulp -r

– This task runs gulp build as well as cordova build to create apk files. It also installs the generated apk on the target device or emulator and launches the app

gulp -r ios –device –livereload

– Build the app folder,copies to www folder and executes ionic run

gulp -r android

– Build the app folder, copies to www folder and executes ionic run

Note: By default, gulp task will take the app/init/config/development.config.js. If this needs to be changed, then use the argument --env=production (e.g gulp build --env=production)

 

Main Folder Layout

mainlayout

app – contains all the views, controllers, services, directives, css, images, etc.

.tmp – a copy of app folder with ionic folder layout created by gulp build system. All files are served from this folder during development

www – a copy of app folder with ionic folder layout created by gulp build system. This folder is used to generate the apk files.  All files are concatenated, minified and revved up .

vendor.json

vendor

vendor.json is available at the root folder

This file is used to include all 3rd party libraries js, css and scss files. It is also used by the gulp build system to inject the file references in app/main.html

App Folder Layout

app

App folder contains all the application source code. It has the following important files and folders

init – All scripts related to configuration and bootstrapping the application are placed in this folder

lib – Contains all 3rd party libraries which are NOT available via bower install. Please note that bower component are installed in the folder which is at the same level as app folder

modules – All app related views, controllers, services, directives, routes, images and css are organized in this folder

main.html – This file contains the top level html page for the app with head, body and top level view definition

index.html – This is the launch file used by Cordova to init the app. The inline script as part of this file will redirect to main.html

app/init

app-init

app/init folder contains the following scripts

env.js – contains constants related to API endpoints

config.js – contains all configuration related to angular modules, ionic, parse, firebase, facebook, etc.

app.js – contains the code to bootstrap the application

app/modules/core

core-app

app/modules/core contains all the core controllers and services for the app.

app/modules/core/config/routes.js – contains all the core state or route definitions

app/modules/core/controllers – contains the controllers for header of the app

app/modules/core/services – contains the services for cordova, ionic, parse and various plugins

app/modules/core/views – contains the views for header of the app

app/modules/users

users-app

This folder is organized into controllers, services, images, css, views and directives. All user specific scripts and views for profile, feeds, gallery, friends and authentication are part of this folder

The routes or states specific to each of these features are defined in config/users.client.routes.js

app/modules/features

features-app

This folder is organized into controllers, services, images, css, views and directive

The routes or states specific to each of these features are defined in config/features.client.routes.js

6 thoughts on “IonicPlus Development Guidelines

  1. Ran into a problem, using MacOS for development and following the 1st time setup steps.
    Result for the ionic command is –
    ionic state reset
    ERR: Your Node.js version is v4.4.3. Please update to the latest Node 6 LTS version (or latest Node).

  2. Thanks for the response. I am using MacOS so am not using apt for package management.
    I resolved the error message but now I am seeing that ionic does not support “state” commands as shown by this response.

    ionic state
    [ERROR] Unable to find command: state

    What is the intended outcome from the “ionic state reset” command in the setup instructions?

  3. It appears that the state command has been removed from ionic and delegated to cordova. Can you recommend the cordova (or other) commands to perform the “ionic state reset” setup?

    thanks
    ~L

Leave a Reply

Your email address will not be published. Required fields are marked *