App Folder Structure
workspace
– 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:
- Under app.js , add
.state(‘app.testing’, {
url: ‘/testing’,
views: {
‘menuContent’: {
templateUrl: ‘templates/testing.html’,
controller: ‘TestingCtrl’
}
}
})
- Under controllers.js , add
.controller(‘TestingCtrl’, function($scope, $stateParams) {
})
- Under “www/templates” folder, add a new file calles testing.html as
<ion-view view-title=”Testing”>
<ion-content>
<h1>Testing</h1>
</ion-content>
</ion-view>
- 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.