The starting point of our Ionic application isindex.html, whose contents is as follows:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalab\
6 le=no, width=device-width"> 7 <title></title> 8 9 <style> 10 .angular-google-map-container { 11 width: 100%; 12 height: 504px; 13 } 14 </style> 15
16 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
17 <script src="lib/ionic/js/ionic.bundle.js"></script>
18
19 <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.c\ ⁷⁴https://en.wikipedia.org/wiki/Spaghetti_code
⁷⁵http://amzn.to/1LWo4Ow ⁷⁶http://amzn.to/1LWomoq
20 ss" rel="stylesheet">
21
22 <!-- IF using Sass (run gulp sass first), then uncomment below and remove th\
23 e CSS includes above
24 <link href="css/ionic.app.css" rel="stylesheet">
25 -->
26
27 <script>
28 // Ionic Starter App
29
30 // angular.module is a global place for creating, registering and retrie\
31 ving Angular modules
32 // 'starter' is the name of this angular module example (also set in a <\
33 body> attribute in index.html)
34 // the 2nd parameter is an array of 'requires'
35 // 'starter.services' is found in services.js
36 // 'starter.controllers' is found in controllers.js
37 angular.module('app', ['ionic'])
38
39 .run(function($ionicPlatform) {
40 $ionicPlatform.ready(function() {
41 // Hide the accessory bar by default (remove this to show the access\
42 ory bar above the keyboard
43 // for form inputs)
44 if(window.cordova && window.cordova.plugins.Keyboard) {
45 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 46 } 47 if(window.StatusBar) { 48 // org.apache.cordova.statusbar required 49 StatusBar.styleDefault(); 50 } 51 }); 52 }) 53
54 .config(function($stateProvider, $urlRouterProvider) {
55 // Ionic uses AngularUI Router which uses the concept of states
56 // Learn more here: https://github.com/angular-ui/ui-router
57 // Set up the various states which the app can be in.
58 // Each state's controller can be found in controllers.js
59 $stateProvider
60 .state('page1', {
62 templateUrl: 'page1.html'
63 });
64
65 // if none of the above states are matched, use this as the fallback
66 $urlRouterProvider.otherwise('');
67 });
68 </script>
69 </head>
70
71 <body ng-app="app" animation="slide-left-right-ios7">
72 <div>
73 <div>
74 <ion-nav-bar class="bar-stable">
75 <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back\
76 ">Back</ion-nav-back-button> 77 </ion-nav-bar> 78 79 <ion-nav-view></ion-nav-view> 80 </div> 81 </div> 82
83 <script id="page1.html" type="text/ng-template">
84 <ion-view title="Calculator">
85 <ion-content padding="false" class="has-header">
86 <form>
87 <label class="item item-input" name="display">
88 <span class="input-label">Input</span>
89 <input type="text" placeholder="0" />
90 </label>
91 </form>
92
93 <div class="button-bar">
94 <button class="button button-stable button-block ">7</button>
95 <button class="button button-stable button-block ">8</button>
96 <button class="button button-stable button-block ">9</button>
97 <button class="button button-energized button-block ">/</but\
98 ton>
99 </div>
100 <div class="button-bar">
101 <button class="button button-stable button-block ">4</button>
102 <button class="button button-stable button-block ">5</button>
104 <button class="button button-energized button-block ">x</but\
105 ton>
106 </div>
107 <div class="button-bar">
108 <button class="button button-stable button-block ">1</button>
109 <button class="button button-stable button-block ">2</button>
110 <button class="button button-stable button-block ">3</button>
111 <button class="button button-energized button-block ">-</but\
112 ton>
113 </div>
114 <div class="button-bar">
115 <button class="button button-assertive button-block ">C</but\
116 ton>
117 <button class="button button-stable button-block ">0</button>
118 <button class="button button-positive button-block ">=</butt\
119 on>
120 <button class="button button-energized button-block ">+</but\
121 ton> 122 </div> 123 </ion-content> 124 </ion-view> 125 </script> 126 </body> 127 </html>
Here we’ll go step by step throguh theindex.htmlfile by explaining the needed lines of
code. I’m expecting that you have a decent understanding of HTML so I won’t explain each and every HTML tag. Also, we’ll remove the unnecessary pieces, and move some other parts of the code to different files.
The<meta>element:
1 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=n\
2 o, width=device-width">
3 ``
4
5 is used to properly resize our application on mobile devices.
6
7 Next, you can safely remove the `<style>` element completely out of the file:
This CSS style is for the map template example, which we don’t have here, so to be completely honest I’m not sure why they included it in this template. I’m guessing that if you’ll be following this book at a later stage this will be removed by the Ionic Creator team.
Since we’re not going to use SASS in this example (we will cover this in the later chapter), we can safely remove the following<link>tag:
1 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CS\
2 S includes above
3 <link href="css/ionic.app.css" rel="stylesheet">
4 -->
Next, as you can see, there is nowhere a reference to thejs/app.jsfile inside theindex.htmlfile,
thus meaning it’s not used anywhere. If by any chance you’ve looked around the file structure of the application we created in the first chapter you will most likely find this strange. Indeed, Ionic Creator needs some additional tweaking, but I’m sure this will all be dealt with in the future. Since the code inside the<script>element is JavaScript (AngularJS to be more exact) and it’s mixed
with HTML, we don’t want to have that so we’re going to copy the contents of the<script>element
and paste it (by overwriting its whole contents) to the fileapp.js(resides in thejsfolder).
So, ourjs/app.jsfile should now look like this (first few lines of comments are ommited):
1 angular.module('app', ['ionic'])
2 .run(function($ionicPlatform) {
3 $ionicPlatform.ready(function() {
4 // Hide the accessory bar by default (remove this to show the accessory bar \
5 above the keyboard
6 // for form inputs)
7 if(window.cordova && window.cordova.plugins.Keyboard) {
8 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 9 } 10 if(window.StatusBar) { 11 // org.apache.cordova.statusbar required 12 StatusBar.styleDefault(); 13 } 14 }); 15 }) 16
17 .config(function($stateProvider, $urlRouterProvider) {
18 // Ionic uses AngularUI Router which uses the concept of states
19 // Learn more here: https://github.com/angular-ui/ui-router
20 // Set up the various states which the app can be in.
22 $stateProvider 23 .state('page1', { 24 url: '', 25 templateUrl: 'page1.html' 26 }); 27
28 // if none of the above states are matched, use this as the fallback
29 $urlRouterProvider.otherwise('');
30 });
Since we removed the contents of the <script>element and pasted it in the js/app.js file, we
need to add a reference to it from theindex.htmlfile, and we can do this by placing the following <script>element just before the ending</head>element:
<script src="js/app.js"></script>
The next important thing is the ng-app directive which is added as an attribute on the<body>tag.
This is just a way to let AngularJS know how tobootstrap the application⁷⁷. Important thing to note is that we have to use the same name inapp.jsfile when we define the root angular module. As
you can see from theapp.jsfile: angular.module('app', ['ionic'])
and from theindex.htmlfile:
<body ng-app="app" animation="slide-left-right-ios7">
in our example this name is simply app.
There’s just one more thing we’re going to do in theindex.html file. See the anotherscript tag
inside our body tag:
<script id="page1.html" type="text/ng-template">
Well, this also looks like a good piece to take out and put into its own file. Again, if you saw the file structure from the application in the first chapter you might remember that the default place to put the template files is inside thetemplatesfolder.
Since we don’t have that folder in our example, let’s create it inside thewwwfolder. Then, create the calculator.htmlfile and paste the contents of the previously mentioned<script>tag. This is how
ourtemplates/calculator.htmlfile should look like now:
1 <ion-view title="Calculator">
2 <ion-content padding="false" class="has-header">
3 <form>
4 <label class="item item-input" name="display">
5 <span class="input-label">Input</span>
6 <input type="text" placeholder="0">
7 </label>
8 </form>
9 <div class="button-bar">
10 <button class="button button-stable button-block ">7</button>
11 <button class="button button-stable button-block ">8</button>
12 <button class="button button-stable button-block ">9</button>
13 <button class="button button-energized button-block ">/</button>
14 </div>
15 <div class="button-bar">
16 <button class="button button-stable button-block ">4</button>
17 <button class="button button-stable button-block ">5</button>
18 <button class="button button-stable button-block ">6</button>
19 <button class="button button-energized button-block ">x</button>
20 </div>
21 <div class="button-bar">
22 <button class="button button-stable button-block ">1</button>
23 <button class="button button-stable button-block ">2</button>
24 <button class="button button-stable button-block ">3</button>
25 <button class="button button-energized button-block ">-</button>
26 </div>
27 <div class="button-bar">
28 <button class="button button-assertive button-block ">C</button>
29 <button class="button button-stable button-block ">0</button>
30 <button class="button button-positive button-block ">=</button>
31 <button class="button button-energized button-block ">+</button>
32 </div>
33 </ion-content>
34 </ion-view>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalab\
6 le=no, width=device-width">
7 <title></title>
8
9 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
10 <script src="lib/ionic/js/ionic.bundle.js"></script>
11 <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.c\
12 ss" rel="stylesheet">
13
14 <script src="js/app.js"></script>
15 </head>
16
17 <body ng-app="app" animation="slide-left-right-ios7">
18 <div>
19 <div>
20 <ion-nav-bar class="bar-stable">
21 <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back\
22 ">Back</ion-nav-back-button> 23 </ion-nav-bar> 24 <ion-nav-view></ion-nav-view> 25 </div> 26 </div> 27 </body> 28 </html>
app.js file
Contents of the app.js file bootstraps our Ionic (well, more acurately AngularJS) application, configures necessary plugings, and defines the states in our application. As we said before, the name of the root module matches the value given to theng-appdirective in theindex.htmlfile (app in
our case). Also, we need to inject ‘ionic’ module dependency to our root module so that we can use
the Ionic library directives and other Ionic components.
$ionicPlatform.ready event is triggered after the device (your mobile phone on which the
application is started) is all set up and ready to use. This includes plugins which are used with this project. If you would try to check if some plugin is available outside thereadyfunction callback,
you could get wrong results due to the fact that it is possible that some plugin would not have been set up just yet. Using the aforementioned $ionicPlatform.ready event and placing your code to
check for plugin instantiations solves these issues. You can learn more about ionicPlatform utility methods here:http://ionicframework.com/docs/api/utility/ionic.Platform/⁷⁸.
Inside the $ionicPlatform.ready function’s callback, we’re detecting if a Keyboard plugin is
available in our Ionic application. If so, we’re hiding the keyboard accessory bar (buttons likenext, previousanddone). You can change these settings, and quite a bit of additional ones (see afull list
here⁷⁹), as per your project’s requirements.
As we mentioned before, you can check the list of installed plugins in your package.json file.
But, also, you can check them from your Terminal/Command prompt by executing the following command:
ionic plugin list
In our case, the output should be as follows:
1 com.ionic.keyboard 1.0.4 "Keyboard"
2 cordova-plugin-console 1.0.1 "Console"
3 cordova-plugin-device 1.0.1 "Device"
4 cordova-plugin-splashscreen 2.1.0 "Splashscreen"
5 cordova-plugin-whitelist 1.0.0 "Whitelist"
From the listing above we can see that there is no StatusBar plugin (org.apache.cordova.statusbar), so we can safely remove the corresponding lines in theapp.jsfile.
Inside theconfigfunction callback we’re setting the routes for our application. Ionic usesAngularUI
Router⁸⁰ which uses the concept of states. Since we moved our calculator UI into the calcula- tor.htmlfile inside thetemplatesfolder, we have to adjust the path to it accordingly. Also, we’ll
put our calculator logic inside the so called CalculatorCtrlcontroller. The state definition, with
the acompanying controller definition should now look like this:
1 $stateProvider 2 .state('calculator', { 3 url: '', 4 templateUrl: 'templates/calculator.html', 5 controller: 'CalculatorCtrl' 6 });