Files structure

Ionic apps are built with Cordova. Cordova is a means of packaging html/css/js into apps that can run on mobile and desktop devices and provides a plugin architecture for accessing native functionality beyond the reach of JS run from a web browser. As such, Ionic apps have the Cordova file structure.

Once you download the project, you will find the following files structure:

  • resources – there are two files in this folder:
    • icon.psd
    • splash.psd

    These files are used for Ionic to be able to create icon and splashscreen images for your application. The PSD files are fully editable and you can use them as starting point. For more info check: http://ionicframework.com/docs/cli/icon-splashscreen.html

  • scss – is for your app’s SASS file.
    • ionic.app.scss: is the root file. It contains all links to the used SASS files in the project.
  • www – is where your app is developed and where you’ll spend most of your time when building an Ionic app.
    • css: contains either your app’s specific CSS file, or your SCSS generated output file, should you use it, along with any other CSS files you wish to add. CSS is added to your project by a tag in your index.html
    • img: images.
    • js: all the javascript code such as controllers, directives and routing.
      • In order to change the URL to your WordPress site you have to edit the following file: www/js/providers/constants/routes-config.js and change siteURL variable.
      • Lazy Loading of WordPress Items is currently set to 2 items. It could be changed in www\js\providers\constants\app-config.js by changing maxItemsPaging variable.
    • lib: is where Ionic and any other libraries you use can be placed. It follows the Bower formatting, and new libs can be added and updated using Bower.
    • modules: Here are all the files for our social-sharing module.
    • templates: is where your view files go. Your project does have a main index.html file in the www directory, but your app likely contains many template views that are added dynamically. Unlike your CSS and JS files, views files do not need to be mentioned in your index.html file. You define them in your $state definition, and UI Router and Ionic will take care of the rest, including pre-loading the template file. These files are Angular templates and are parsed before being added to the DOM.
      We organized the view files according to the app components for example: categories.html, comments.html, item.html, login.html etc.