App Folder Structure


– AppFolder

                                – hooks

– platforms

                                – plugins

– resources

– scss

– www      (you will most likely work on this folder for your development)

– css

– img

– js

– lib

– templates


You can find an index.html under “www” folder, it is the default page for the project, including all your JS – AngularJS and CSS. The default flow will be:

http://localhost:8200  => index.html => app.js

Under app.js, it will call

=> .run(function($ionicPlatform)

Below flows are optional, using myApp2 as an example…

=> .config(function($stateProvider, $urlRouterProvider)

=> under .config(function($stateProvider, $urlRouterProvider) , you can the routes mapping to different template and controller. You can also define your own route here.

=> at the end of .config function, you can find a default route $urlRouterProvider.otherwise(‘/tab/dash’);                //it will route to “/tab/dash” by default


You can find that “/tab/dash” is mapping to

Html template   => “templates/tab-dash.html” => stores under “www/templates/”

controller            => “DashCtrl” => store in controller.js

Under controller.js, you can find all controller functions here. Of course, you can add your own functions here for new route, such as:

  1. Under app.js , add

.state(‘app.testing’, {

    url: ‘/testing’,

    views: {

      ‘menuContent’: {

        templateUrl: ‘templates/testing.html’,

        controller: ‘TestingCtrl’




  1. Under controllers.js , add

.controller(‘TestingCtrl’, function($scope, $stateParams) {


  1. Under “www/templates” folder, add a new file calles testing.html as

<ion-view view-title=”Testing”>





  1. Using this URL http://localhost:8200/test.html#/app/testing to view this new page.


HaHa… very simple, isn’t it?

That’s why I love Ionic framework so much, comparing with native App.

Please rate this