EXPERT-Building-Mobile-Apps-with-Ionic-2.txt

----------------------- Page 1-----------------------


----------------------- Page 2-----------------------

Contents 

1  Introduction                                                                                          10 

   Welcome! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      10 

         Updates & Errata   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    11 

         Conventions Used in This Book  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      11 

   Changelog  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      13 

    New Concepts  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      16 

         ECMAScript 6 (ES6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      18 

         TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    21 

         Transpiling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   23 

         Web Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .        23 

2  Ionic 2 Basics                                                                                        26 

    Lesson 1: Generating an Ionic 2 Application   . . . . . . . . . . . . . . . . . . . . . . . . . .    27 

         Installing Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  27 

         Generating Your First Project  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    30 

         Adding Platforms  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     31 

         Running the Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     31 

         Updating Your Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     34 

    Lesson 2: Anatomy of An Ionic 2 Project  . . . . . . . . . . . . . . . . . . . . . . . . . . . .     36 

         Important Files & Folders  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    38 

         The Less Important Stuff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     40 

    Lesson 3: Ionic CLI Commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       42 

                                                     1 

----------------------- Page 3-----------------------

Lesson 4: Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     45 

     Common Decorators in Ionic 2 Applications . . . . . . . . . . . . . . . . . . . . . . . .       46 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      49 

Lesson 5: Classes  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     51 

     What is a Class? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    51 

     Classes in Ionic 2  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   53 

     Creating a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     58 

     Creating a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      60 

     Creating a Directive  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   63 

     Creating a Pipe  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    64 

     Creating an Injectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    65 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      68 

Lesson 6: Templates  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     69 

     The * Syntax   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    71 

     Looping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     72 

     Conditionals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    73 

     Ionic 2 Template Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       74 

Lesson 7: Styling & Theming  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     82 

     Introduction to Theming in Ionic 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .    85 

     Methods for Theming an Ionic 2 Application . . . . . . . . . . . . . . . . . . . . . . . .      87 

Lesson 8: Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .     94 

     Pushing and Popping  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      94 

     Basic Navigation in Ionic 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   97 

     Passing Data Between Pages  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       99 

     Navigation Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  100 

     Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  102 

Lesson 9: User Input  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  105 

     Two Way Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  106 

     Form Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  108 

Lesson 10: Saving Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  111 

                                                 2 

----------------------- Page 4-----------------------

         Local Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  112 

         SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  112 

         Ionic Storage  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  114 

   Lesson 11: Fetching Data, Observables and Promises  . . . . . . . . . . . . . . . . . . . . .  116 

         Mapping and Filtering Arrays  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  116 

         Observables and Promises    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  118 

         Using Http to Fetch Data from a Server  . . . . . . . . . . . . . . . . . . . . . . . . . .  119 

         Fetching Data from your Own Server . . . . . . . . . . . . . . . . . . . . . . . . . . . .  124 

   Lesson 12: Native Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  126 

         Using Cordova Plugins in Ionic 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  127 

3  Quick Lists                                                                                       129 

   Lesson 1: Introduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  130 

        About Quick Lists  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  130 

   Lesson 2: Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  135 

         Generate a new application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  135 

         Create the Required Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  138 

         Create the Required Services  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  138 

         Create the Model  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  138 

   Add Pages & Services to the App Module . . . . . . . . . . . . . . . . . . . . . . . . . . . .  139 

   Add Required Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  140 

        Add Required Cordova Plugins     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  140 

         Set up Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  142 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  143 

   Lesson 3: Basic Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  144 

        The Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  144 

        The Checklist Page  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  150 

   Lesson 4: Data Models and Observables . . . . . . . . . . . . . . . . . . . . . . . . . . . .  157 

         Creating a Data Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  158 

        Adding an Observable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  161 

                                                    3 

----------------------- Page 5-----------------------

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  166 

   Lesson 5: Creating Checklists and Checklist Items . . . . . . . . . . . . . . . . . . . . . . .  168 

         Checklists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  168 

         Checklist Items  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  180 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  187 

   Lesson 6: Saving and Loading Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  188 

         Saving Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  188 

         Loading Data  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  191 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  194 

   Lesson 7: Creating an Introduction Slider & Theming . . . . . . . . . . . . . . . . . . . . . .  195 

         Slider Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  195 

        Theming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 

   Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 

        What next?    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 

4  Giflist                                                                                            213 

   Lesson 1: Introduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 

        About Giflist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 

         Lesson Structure   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 

   Lesson 2: Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 

         Generate a new application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 

         Create the Required Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 

         Create the Required Services  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 

   Add Pages & Services to the App Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 

        Add Required Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 

        Add Required Cordova Plugins      . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 

         Set up Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 

   Lesson 3: The List Page    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 

                                                    4 

----------------------- Page 6-----------------------

        The Reddit Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 

        The Layout    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 

        The Class Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 

         Using an Observable to Control Searching . . . . . . . . . . . . . . . . . . . . . . . . . 239 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 

   Lesson 4: The Reddit API and HTML5 Video  . . . . . . . . . . . . . . . . . . . . . . . . . . 245 

         HTML5 Video Behaviour on iOS and Android       . . . . . . . . . . . . . . . . . . . . . . . 245 

         Fetching Data from Reddit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 

         Playing our GIFs (videos)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 

         Launching Comments in the In App Browser . . . . . . . . . . . . . . . . . . . . . . . . 256 

         Loading More GIFS  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 

         Changing Subreddits  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 

   Lesson 5: Settings  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 

         Creating the Settings Page   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 

         Opening the Settings Page as a Modal . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 

         Saving Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 

   Lesson 6: Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 

   Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 

        What next?    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 

5  Snapaday                                                                                          279 

   Lesson 1: Introduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 

        About Snapaday . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 

         Lesson Structure   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 

   Lesson 2: Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 

         Generate a new application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 

         Create the Required Services  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 

                                                    5 

----------------------- Page 7-----------------------

     Create the Model  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 

Add Pages & Services to the App Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 

     Add Required Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 

     Add Required Cordova Plugins      . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 

     Set up Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 

Lesson 3: The Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 

     The Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 

     The Slideshow Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 

Lesson 4: Taking Photos with the Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 

     Creating a Photo Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 

     Creating a Simple Alert Service  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 

     Taking a Photo with the Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 

     Moving the Photo to Permanent Storage . . . . . . . . . . . . . . . . . . . . . . . . . . 313 

     Updating the Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 

Lesson 5: Saving and Loading Photos  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 

     Implementing the Data Service     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 

Lesson 6: Creating a Custom Pipe and Flipbook of all Photos . . . . . . . . . . . . . . . . . . 326 

     Creating a Custom Pipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 

     Creating a Slideshow of All Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 

Lesson 7: Integrating Local Notifications & Social Sharing    . . . . . . . . . . . . . . . . . . . 332 

     Local Notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 

     Social Sharing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 

     Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 

Lesson 8: Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 

                                                 6 

----------------------- Page 8-----------------------

        What next?   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 

6  Camper Mate                                                                                      346 

   Lesson 1: Introduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 

         Lesson Structure  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 

   Lesson 2: Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 

        Generate a new application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 

        Create the Required Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 

        Create the Required Services  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 

   Add Pages & Services to the App Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 

        Add Required Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 

        Add Required Cordova Plugins     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 

        Set up Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 

        Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 

   Lesson 3: Creating a Tabs Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 

   Lesson 4: User Input and Forms  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 

   Lesson 5: Implementing Google Maps and Geolocation . . . . . . . . . . . . . . . . . . . . . 380 

        Connectivity Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 

        Google Maps Service  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 

         Implementing Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 

   Lesson 6: Saving and Retrieving Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 

   Lesson 7: Reusing Components  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 

   Lesson 8: Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 

   Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 

        What next?   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 

7  Camper Chat                                                                                      426 

   Lesson 1: Introduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 

         Lesson Structure  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 

   Lesson 2: Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 

        Generate a new application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 

                                                   7 

----------------------- Page 9-----------------------

         Create the Required Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 

         Create the Required Services  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 

   Add Pages & Services to the App Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 

        Add Required Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 

         Install PouchDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 

        Add Required Cordova Plugins      . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 

         Set up Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 

         Summary  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 

   Lesson 3: Login Page and Sliding Menu Layout . . . . . . . . . . . . . . . . . . . . . . . . . 440 

   Lesson 4: Using Facebook for Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . 454 

         Setting up a Facebook App  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 

         Installing the Facebook Connect Plugin  . . . . . . . . . . . . . . . . . . . . . . . . . . 458 

         Setting up Authentication  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 

   Lesson 5: Creating Messages & Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 

        Adding Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 

   Lesson 6: Local and Remote Backend with PouchDB and Cloudant  . . . . . . . . . . . . . . 473 

         Creating a Cloudant Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 

         Integrating PouchDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 

   Lesson 7: Styling & Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 

         Basic Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 

         Creating Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 

   Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 

        What next?    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 

8  Testing & Debugging                                                                               497 

   Testing & Debugging  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 

         Browser Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 

         iOS Debugging  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 

        Android Debugging  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  500 

        Tips & Common Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  502 

                                                    8 

----------------------- Page 10-----------------------

         Installing your Application with GapDebug . . . . . . . . . . . . . . . . . . . . . . . . .  505 

9  Building & Submitting                                                                             507 

   Preparing Assets  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  508 

         Generate Icons and Splash Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . .  508 

         Set the Bundle ID and App Name  . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  510 

         Set Cordova Preferences   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  510 

         Minify Assets  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  511 

   Signing iOS Applications on a Mac or PC . . . . . . . . . . . . . . . . . . . . . . . . . . . .  512 

         Signing iOS Applications on a Mac   . . . . . . . . . . . . . . . . . . . . . . . . . . . .  512 

         Signing iOS Applications on Windows . . . . . . . . . . . . . . . . . . . . . . . . . . .  521 

   Signing Android Applications on a Mac or PC . . . . . . . . . . . . . . . . . . . . . . . . . .  528 

         Signing an Android Application  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  528 

   Building for iOS & Android Using PhoneGap Build (without MAC) . . . . . . . . . . . . . . . .  530 

         Building with PhoneGap Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  531 

   Submitting to the Apple App Store  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  539 

         Creating an App Store Listing  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  539 

         Uploading the Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  543 

         Submit for Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  549 

   Submitting to Google Play   . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  551 

         Creating a Build for Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  551 

         Submitting Your Application to Google Play  . . . . . . . . . . . . . . . . . . . . . . . .  552 

         Uploading Multiple APKs with Crosswalk  . . . . . . . . . . . . . . . . . . . . . . . . .  556 

   Updating on the App Stores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  558 

   Thank you!  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  561 

                                                    9 

----------------------- Page 11-----------------------

Chapter 1 

Introduction 

Welcome! 

Hello and welcome to Building Mobile Apps with Ionic 2! This book will teach you everything you need 

to know about Ionic 2, from the basics right through to building an application for iOS and Android and 

submitting it to app stores. 

Peoplewillhavevaryingdegreesofexperiencewhenreadingthisbook,manyofyouwillalreadybefamiliar 

withIonic1,somemayhavesomeexperiencewithIonic2,andsomemayhavenoexperiencewitheither. 

Whatever your skill level is, it should not matter too much. All of the lessons in this book are thoroughly 

explained and make no assumption of experience with Ionic. 

This book does not contain an introduction to HTML, CSS, and JavaScript though. You should have a 

reasonable amount of experience with these technologies before starting this book. If you need to brush 

up on your skills with these technologies I’d recommend taking a look at the following: 

     • Learn HTML & CSS 

     • Learn Javascript 

This book has many different sections, but there are three distinct areas. We start off with the basics, 

we then progress onto some application walkthroughs and then we cover building and submitting 

                                                     10 

----------------------- Page 12-----------------------

applications. 

Alloftheexampleapplicationsincludedinthiscoursearecompletelystandalone. Althoughingeneral,the 

applications increase in complexity a little bit as you go along, I make no assumption that you have read 

the previous walkthroughs and will explain everything thoroughly in each example. If there are concepts 

that need to be explained in more than one walkthrough, I have copied information into both rather than 

referring to the other walkthrough. 

NOTE: If you have purchased a package which includes the video course, I would recommend watching 

it before reading the book. It is not required, but it is a basic introductory level course so it is more of a 

logical progression to watch it first. 

Updates & Errata 

Ionic2isstillindevelopment,sothatmeansthatitisstillchanging. Itisreasonablystablenow,somostof 

what you read in this book won’t change, but there will still most likely be some changes until the release 

version is reached. I will be frequently updating this book to reflect any changes that are made to the 

framework, and you will receive these updates for free. Any time I update the book you should receive 

an email notification with a new download link. 

I’llbekeepingacloseeyeonchangesandmakingsureeverythingworks,butit’sabigbooksoifyouthink 

you have found an error please email me and I’ll get an update out as soon as I can. 

Conventions Used in This Book 

The layout used in this book doesn’t require much explaining, however you should look out for: 

> Blocks of text that look like this 

As they are actions you have to perform. For example, these blocks of text might tell you to create a file 

or make some code change. You will mostly find these in the application walk throughs. This syntax is 

                                                      11 

----------------------- Page 13-----------------------

usefulbecauseithelpsdistinguishbetweencodechangesIwantyoutomaketoyourapplication,andjust 

blocks of code that I am showing for demonstration purposes. 

NOTE: You will also come across blocks of text like this. These will contain little bits of information that 

are related to what you are currently doing. 

IMPORTANT: You will also see a few of these. These are important “Gotchas” you should pay careful 

attention to. 

Ok, enough chat! Let’s get started. Good luck and have fun! 

                                                       12 

----------------------- Page 14-----------------------

Changelog 

Version 12 (this version) - updated for RC.3 

     • Minor bug fixes and improvements 

     • Fixed issue with playing videos in Giflist 

Version 11 - updated for RC.2 

     • Minor bug fixes and improvements 

     • Removed Rollup configuration for PouchDB (no longer needed) 

     • Bundled extra content with book 

Version 10 - updated for RC.1 

     • Minor bug fixes and improvements (no major changes) 

     • Moved data loading inside of platform.ready() calls 

Version 9 - updated for RC.0 

     • Please see the official changelog for changes 

Version 8 - updated for beta.11 

     • Changed implementation of overlay components 

     • Updated forms to use formGroup and formControlName 

     • Reformatted entire book to a more versatile format 

     • Added a .mobi and .ePub version of the book 

     • Various typo and formatting fixes 

                                                    13 

----------------------- Page 15-----------------------

Version 7 - updated for beta.10 

    • Changed code to use <ion-header> and <ion-footer> 

    • Removed references to *navbar 

    • SwitchedtoimportingPouchDBinsteadofrequiring,addedanoteoninstallingtypingsforCamper- 

      Chat 

    • Formatting improvements 

    • Other minor typo and bug fixes 

Version 6 - updated for beta.9 

Version 5 - updated for beta.8 

    • Replaced @Page and @App with @Component 

    • Implemented ionicBootstrap 

    • For more details on changes in beta.8 see the Ionic 2 Changelog 

Version 4 - updated for beta.7 

    • Updated to use TypeScript instead of ES6 

    • Updated to use @ViewChild instead of getComponent 

    • Updated syntax to match latest Angular RC 

Version 3 - updated for beta.5 / beta.6 

    • Removed NgZone as it is no longer required 

    • Removed es6-shim import from app.js files 

    • Added changelog 

    • Added table of contents 

    • Fixed various typos 

                                                  14 

----------------------- Page 16-----------------------

Version 2 - updated for beta.4 

Version 1 - Initial release 

                                                     15 

----------------------- Page 17-----------------------

New Concepts 

Ionic1wasbuiltontopofAngular1,whichisaframeworkforbuildingcomplexandscaleableJavascript 

applications. WhatIonicdoesontopofAngularisthatitprovidesabunchoffunctionalitytomakemaking 

mobile apps with Angular easier. Then along came Angular 2 which is the next iteration of the Angular 

framework, which comes with a bunch of changes and improvements. In order for Ionic to make use of 

Angular 2 a new framework was required on their end as well, which is how Ionic 2 came about. In short, 

by using Ionic 2 & Angular 2 we will be able to make apps that perform even better on mobile, adhere to 

the latest web standards, are scalable, reusable, modular and so on. 

With the introduction of Angular 2, there has been a lot of changes to how you develop an application. 

There are massive conceptual changes, and there have also been a few changes to things like template 

syntax as well. 

In Ionic 2, your templates will look something like this: 

<ion-menu     [content]="content"> 

   <ion-toolbar> 

      <ion-title>Pages</ion-title> 

   </ion-toolbar> 

   <ion-content> 

      <ion-list> 

        <button  ion-item  *ngFor="let  p  of  pages"  (click)="openPage(p)"></button> 

      </ion-list> 

   </ion-content> 

</ion-menu> 

<ion-nav  id="nav"       [root]="rootPage" #content></ion-nav> 

                                                   16 

----------------------- Page 18-----------------------

which isn’t too different to Ionic 1, and your Javascript will look something like this: 

import  {  Component  }  from        '@angular/core '; 

import  {  Platform  }  from        'ionic-angular '; 

import  {  HomePage  }  from        './pages/home/home '; 

@Component ({ 

   template :  `<ion-nav       [root]="rootPage"></ion-nav>` 

}) 

export  class MyApp  { 

   rootPage : any  =  HomePage ; 

   constructor(platform : Platform)  { 

      platform .ready ().then (()  =>  { 

      }); 

   } 

} 

which is very different to Ionic 1. If you’re already familiar with ECMAScript 6 or TypeScript then a lot of 

this probably won’t be too hard of a change for you, but if these are completely new concepts to you 

(and for most people it will be) the transition might be a little more difficult. To help put your mind at ease 

somewhat, ES6 and TypeScript was all completely new to me when the Ionic 2 alpha first came out, and 

withinaprettyshorttimeperiod,Istartedtofeelverycomfortablewithit. NowIamwaymorecomfortable 

with the new syntax and structure than I ever was with Ionic 1. 

In this lesson we are going to broadly cover some of the new concepts and syntax in Ionic 2 & Angular 2. 

The intention is just to give you a bit of a background, we will get into specifics later. 

                                                      17 

----------------------- Page 19-----------------------

ECMAScript 6 (ES6) 

Before we talk about ECMAScript 6, we should probably talk about what ECMAScript even is. There’s 

quite a bit of history involved which we won’t dive into, but for the most part: ECMAScript is a standard, 

Javascript is an implementation of that standard. ECMAScript defines the standard and browsers imple- 

ment it. In a similar way, HTML specifications (most recently HTML5) are defined by the organising body 

and are implemented by the browser vendors. Different browsers implement specifications in different 

ways, and there are varying amounts of support for different features, which is why some things work 

differently in different browsers. 

The HTML5 specification was a bit of a game changer, and in a similar way so is the ECMAScript 6 spec- 

ification. It will bring about some pretty drastic changes to the way you will code with JavaScript and in 

general, will make Javascript a much more mature language that is capable of more easily creating large 

and complex applications (which JavaScript was never really originally intended to do). 

We’re not going to go too much into ES6 here, because you will learn what you need to know throughout 

the book, but I will give a few examples to give you a sense of what it actually is. Some features ES6 

introduced to Javascript are: 

Classes 

class  Shape  { 

      constructor     (id, x , y)  { 

           this .id  =  id 

           this .move (x , y) 

      } 

     move    (x , y)  { 

           this .x  =  x 

           this .y  =  y 

      } 

} 

                                                    18 

----------------------- Page 20-----------------------

This is a big one, and something you would be familiar with if you have experience with more traditional 

programming languages like Java and C#. People have been using class-like structures in Javascript for 

alongtimethroughtheuseoffunctions,buttherehasneverbeenawaytocreatearealclass. Nowthere 

is. If you don’t know what a class is, don’t worry, there is an entire lesson dedicated to it later. 

Modules 

//    lib/math .js 

export  function  sum       (x , y)  { return  x  +  y  } 

export  var  pi  =  3.141593 

//    someApp.js 

import  *  as  math  from      "lib/math " 

console .log("2PI  =       " +  math .sum(math .pi , math .pi)) 

//    otherApp.js 

import  {  sum, pi  }  from       "lib/math " 

console .log("2PI  =       " +  sum(pi , pi)) 

Modules allow you to modularise your code into packages that can be imported anywhere you need in 

yourapplication,thisissomethingthatisgoingtobeheavilyusedinIonic. Wewillgetintothismorelater, 

but essentially any components we create in our application we “export” so that we can “import” them 

elsewhere. 

Promises 

Promises are something that have been made available by services like ngCordova previously, but now 

they are natively supported, meaning you can do something like this: 

doSomething ().then ((response)  =>  { 

      console .log(response); 

}); 

                                                     19 

----------------------- Page 21-----------------------

Block Scoping 

Currently,ifyoudefineavariableinJavascriptitisavailableanywherewithinthefunctionthatitwasdefined 

in. ThenewblockscopingfeaturesinES6allowyoutousethe let keywordtodefineavariableonlywithin 

a single block of code like this: 

for   (let  i  =  0;  i  <  a .length ; i++)  { 

      let  x  =  a [i]; 

} 

If I were to try and access the x variable outside of the for loop, it would not be defined. 

Fat Arrow Functions 

One of my favourite new additions is fat arrow functions, which allow you to do something like this: 

someFunction((response)  =>  { 

      console .log(response); 

}); 

rather than: 

someFunction(function (response){ 

      console .log(response); 

}); 

At a glance, it might not seem all that great, but what this allows you to do is maintain the parent’s scope. 

In the top example if I were to access the this keyword it would reference the parent, but in the bottom 

example I would need to do something like: 

var  me  =  this ; 

someFunction(function (response){ 

      console .log(me .someVariable); 

                                                      20 

----------------------- Page 22-----------------------

}); 

toachievethesameresult. Withthenewsyntax,thereisnoneedtocreateastaticreferenceto this you 

can just use this directly. 

This is by no means an exhaustive list of new ES6 features so for some more examples take a look at 

es6-features.org. 

TypeScript 

Another concept we should cover off on is TypeScript which is used in Ionic 2. It’s important to point out 

that although Ionic 2 uses TypeScript, you don’t have to use it yourself to build Ionic 2 applications - you 

canjustuseplainES6. Thatsaidthough,TypeScriptprovidesadditionalfeaturesandmakessomethings 

(dependencyinjectioninparticular)aloteasier,anditwillsoonbecomethedefaultforIonic2soitdoesn’t 

make much sense not to use it. 

WewillbeusingTypeScriptinthisbook,solet’stalkalittlebitmoreaboutwhatitisandhowitisdifferent 

to plain ES6. TypeScript’s own website defines it as: 

“a typed superset of JavaScript that compiles to plain JavaScript” 

If you’re anything like me then you still wouldn’t know what TypeScript is from that description (it seems 

easytounderstanddefinitionsareabigno-nointhetechworld). Infact, aStackOverflowpost didamuch 

better job at explaining what TypeScript is – basically, TypeScript adds typing, classes and interfaces to 

JavaScript. 

Using TypeScript allows you to program in the way you would for stricter, object oriented languages like 

Java or C#. Javascript wasn’t originally intended to be used for designing complex applications so the 

languagewasn’tdesignedthatway. ItcertainlyispossiblealreadytouseJavaScriptinanobjectoriented 

manner by using functions as classes as we discussed before but it’s not quite as clean as it could be. 

But… I mentioned before that ES6 is already adding the ability to create classes so why do we still need 

TypeScript? I saw one Redditor put it quite simply: 

                                                     21 

----------------------- Page 23-----------------------

“It’s called TypeScript not ClassScript” 

TypeScriptstillprovidestheabilitytousestatictypinginJavaScript(whichmeansitisevaluatedatcompile 

time, opposed to dynamic typing which is evaluated at run time). Using typing in TypeScript will look a 

little like this: 

function  add (x : number , y         :number):number  { 

      return  x  +  y ; 

} 

add ('a ',  'b ');  //  compiler  error 

The code above states that x should be a number (x : number), y should be a number (y : number), 

and that the add function should return a value that is a number (add (): number). So in this example, 

wewillreceiveanerrorbecausewe’retryingtosupplycharacterstoafunctionthatexpectsonlynumbers. 

This can be very useful when creating complex applications, and adds an extra layer of checks that will 

prevent bugs in your application. 

If you take a look at the Ionic 2 code from before: 

export  class MyApp  { 

   rootPage : any  =  HomePage ; 

   constructor(platform : Platform)  { 

      platform .ready ().then (()  =>  { 

      }); 

   } 

} 

You can see some TypeScript action going on. The code above is saying that rootPage can be the any 

type,whichisaspecialtypewhichbasicallyjustmeansitcanbeanythingatall,and platform hasatype 

                                                        22 

----------------------- Page 24-----------------------

of Platform. As you will see later, the ability to give things types comes in very handy for an important 

concept called dependency injection. 

Since the default option for Ionic 2 is TypeScript, and it is what most people are using, this book focuses 

on using TypeScript. For the most part, ES6 and TypeScript projects look pretty much the same, and 

converting between the two is a reasonably straight forward task. 

Transpiling 

Transpiling means converting from one language to another language. Why is this important to us? Ba- 

sically, ECMAScript 6 gives us all of this cool new stuff to use, but ES6 is just a standard and it is not 

completelysupportedbybrowsersyet. WeuseatranspilertoconvertourES6codeintoES5code(i.e.the 

Javascript you’re using today) that is compatible with browsers. 

In the context of Ionic applications, here’s how the process works: 

     • You use ionic  serve to run the application 

     • All the code inside of the app folder is transpiled into valid ES5 code 

     • A single bundled Javascript file is created and run 

You don’t need to worry about this process as it is all automatically handled by Ionic. 

Web Components 

Web Components are kind of the big thing in Angular 2, and they weren’t really feasible to use in Angular 

1. Web Components are not specific to Angular, they are becoming a new standard on the web to create 

modular, self contained, pieces of code that can easily be inserted into a web page (kind of like Widgets 

in WordPress). 

“In a nutshell, they allow us to bundle markup and styles into custom HTML elements.” - Rob Dodson 

RobDodsonwrote agreatpostonWebComponents whereheexplainshowtheyworkandtheconcepts 

                                                     23 

----------------------- Page 25-----------------------

behind it. He also provides a really great example, and I think it really drives the point home of why Web 

Components are useful. 

Basically,ifyouwantedtoaddanimagesliderasawebcomponent,theHTMLforthatmightlooklikethis: 

<img-slider> 

   <img  src="images/sunset .jpg" alt="a  dramatic  sunset"> 

   <img  src="images/arch .jpg" alt="a  rock  arch"> 

   <img  src="images/grooves .jpg" alt="some neat  grooves"> 

   <img  src="images/rock .jpg" alt="an  interesting  rock"> 

</img-slider> 

instead of (without web components) this: 

<div  id="slider"> 

   <input  checked="" type="radio" name="slider"  id="slide1" selected="false"> 

   <input type="radio" name="slider"  id="slide2" selected="false"> 

   <input type="radio" name="slider"  id="slide3" selected="false"> 

   <input type="radio" name="slider"  id="slide4" selected="false"> 

   <div  id="slides"> 

     <div  id="overflow"> 

        <div  class="inner"> 

          <img  src="images//rock .jpg"> 

          <img  src="images/grooves .jpg"> 

          <img  src="images/arch .jpg"> 

          <img  src="images/sunset .jpg"> 

        </div> 

     </div> 

   </div> 

   <label  for="slide1"></label> 

   <label  for="slide2"></label> 

   <label  for="slide3"></label> 

                                                 24 

----------------------- Page 26-----------------------

   <label  for="slide4"></label> 

</div> 

Inthefuture,ratherthandownloadingsomejQuerypluginandthencopyingandpastingabunchofHTML 

into your document, you could just import the web component and add something simple like the image 

slider code shown above to get it working. 

WebComponentsaresuperinteresting,soifyouwanttolearnmoreabouthowtheywork(e.g.TheShadow 

DomandShadowBoundaries)thenIhighlyrecommendreading RobDodson’spostonWebComponents. 

                                                   25 

----------------------- Page 27-----------------------

Chapter 2 

Ionic 2 Basics 

                                  26 

----------------------- Page 28-----------------------

Lesson 1: Generating an Ionic 2 Application 

We’ve covered quite a bit of context already, so you should have a reasonable idea of what Ionic 2 is all 

aboutandwhysomeofthechangeshavebeenmade. Withthatinmind,we’rereadytojumpinandstart 

learning how to actually use Ionic 2. 

Installing Ionic 

BeforewecanstartbuildinganapplicationwithIonic2weneedtogeteverythingsetuponourcomputer 

first. It doesn’t matter if you have a Mac or PC, you will still be able to finish this book and produce both 

an iOS and Android application that is ready to be submitted to app stores. 

IMPORTANT: If you already have Ionic 1 set up on your machine then you can skip straight to the next 

section. Allyouwillneedtodoisrun npm          install  -g     ionic or sudo  npm      install  -g     ionic to 

get everything needed for Ionic 2 set up. Don’t worry if you want to keep using Ionic 1 as well, after you 

update you will be able to create both Ionic 1 and Ionic 2 projects. 

First you will need to install Node.js on your machine. Node.js is a platform for building fast, scalable 

network applications and it can be used to do a lot of different things. Don’t worry if you’re not familiar 

with it though, we won’t really be using it much at all - we need it installed for Ionic to run properly and to 

install some packages but we barely have to do anything with it. 

> Visit the following website to install Node.js: 

https://nodejs.org/ 

Once you have Node.js installed, you will be able to access the node package manager or npm through 

your command terminal. 

> Install Ionic and Cordova by running the following command in your terminal: 

npm   install  -g     ionic  cordova 

                                                       27 

----------------------- Page 29-----------------------

or 

sudo  npm    install  -g     ionic  cordova 

You should also set up the Android SDK on your machine by following one of these guides: 

     • Installation for Mac 

     • Installation for Windows 

If you are on a Mac computer then you should also install XCode which will allow you to build and sign 

applications. 

Youdon’thavetoworryaboutsettinguptheiOSSDKasifyouhaveaMacthiswillbehandledbyXCode 

and if you don’t have a Mac then you can’t set it up on your computer anyway (we’ll talk more about how 

you can build iOS applications without a Mac later). 

You should now have everything you need set up and ready to use on your machine! To verify that the 

Ionic CLI (Command Line Interface) is in fact installed on your computer, run the following command: 

ionic  -v 

You can also get some detailed information about your current installation by running the following com- 

mand from within an Ionic project: 

ionic  info 

It should spit out some info about your current environment, here’s mine at the time of writing this: 

                                                     28 

----------------------- Page 30-----------------------

If you run into any trouble installing Ionic or generating new projects, make sure that you have the latest 

(current)Nodeversioninstalled. Afteryouhavethelatestversioninstalled,youshouldalsorunthefollowing 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

NOTE: The Ionic Framework and Ionic CLI (Command Line Interface) are two separate things. The CLI 

is what we just installed, and it provides a bunch of tools through the command line to help create and 

manage your Ionic projects. The Ionic CLI will handle downloading the actual Ionic Framework onto your 

machine for each project you create. 

                                                     29 

----------------------- Page 31-----------------------

Generating Your First Project 

Once Ionic is installed, generating applications is really easy. You can simply run the ionic  start 

command to create a new application with all of the boilerplate code and files you need. 

> Run the following command to generate a new Ionic application: 

ionic  start  MyFirstApp  blank  --v2 

Togenerateanewapplicationcalled‘MyFirstApp’thatusesthe“blank”template. Ioniccomeswithsome 

templates built in, in the example above we are using the ‘blank’ template, but you could also use: 

ionic  start  MyFirstApp          sidemenu  --v2 

or 

ionic  start  MyFirstApp  tutorial  --v2 

or you could just run the default command: 

ionic  start  MyFirstApp  --v2 

tousethedefaultstarterwhichisa tabsapplication. Noticethateverytime wearesupplyingthe –v2 flag. 

IfyouleavethisflagoffitwilljustcreateanormalIonic1application(handyforthoseofyouwhostillneed 

to use V1 as well, but make sure you don’t forget it when building Ionic 2 apps!). 

NOTE: All Ionic 2 projects use TypeScript by default now. Since TypeScript is an extension of ES6, ES6 

code will still work in TypeScript projects if you want to use it, but all Javascript files should have the .ts 

extension, not .js. 

We’rejustgoingtostickwithaboringblanktemplatefornow. Onceyourapplicationhasbeengenerated 

you will want to make it your current directory so we can do some more stuff to it. 

> Run the following command to change to the directory of your new Ionic project 

cd  MyFirstApp 

                                                       30 

----------------------- Page 32-----------------------

Ifusingthecommandpromptorterminalisnewtoyou,youmightwanttoreadthistutorial foralittlemore 

in depth explanation - the content is specifically for Ionic 1 but it should give you a general sense of how 

the command line interface works. 

Adding Platforms 

Eventually we will be building our application with Cordova (in fact the application that the Ionic CLI gen- 

erates is a Cordova application), and to do that we need to add the platforms we are building for. To add 

the Android platform you can run the following command: 

ionic  platform  add  android 

and to add the iOS platform you can run: 

ionic  platform  add  ios 

Ifyouarebuildingforbothplatformsthenyoushouldrunbothcommands. Thiswillsetupyourapplication 

sothatitcanbebuiltfortheseplatforms,butitwon’treallyhaveanyeffectonhowyoubuildtheapplication. 

As I will explain shortly, most of our coding will be done inside of the app folder, but you will also find 

anotherfolderinyourprojectcalled platforms -thisiswherealloftheconfigurationforspecificplatforms 

live. We’re going to talk about all that stuff way later though. 

Running the Application 

The beauty of HTML5 mobile applications is that you can run them right in your browser whilst you are 

developing them. But if you try just opening up your project in a browser by going to the index.html file 

location you won’t have a very good time. 

AnIonicprojectneedstorunonawebserver-thismeansyoucan’tjustrunitbyaccessingthefiledirectly, 

butitdoesn’tmeanthatyouactuallyneedtorunitonaserverontheInternet,youcandeployacompletely 

self contained Ionic app to the app stores (which we will be doing). Fortunately, Ionic provides an easy 

way to view the application through a local web server whilst developing. 

                                                     31 

----------------------- Page 33-----------------------

> To view your application through the web browser run the following command: 

ionic  serve 

This will open up a new browser with your application open in it and running on a local web server. Right 

now, it should look something like this: 

                                                     32 

----------------------- Page 34-----------------------

Notonlywillthisletyouviewyourapplicationbutitwillalsoupdatelivewithanycodechanges. Ifyouedit 

and save any files, the change will be reflected in the browser without having to reload the application by 

refreshing the page. 

                                                    33 

----------------------- Page 35-----------------------

To stop this process just hit: 

Ctrl  +  C 

when you have your command terminal open. Also keep in mind that you can’t run normal Ionic CLI 

commands whilst ionic  serve is running, so you will need to press Control + C before running any 

commands. 

Updating Your Application 

TheremaycomeatimewhenyouwanttoupdatetoalaterversionofIonic. Theeasiestwaytoupdatethe 

version of Ionic that your application is using is to first update the Ionic CLI by running: 

npm   install  -g    ionic 

or 

sudo  npm    install  -g    ionic 

again,andthenupdatingthe package.json fileofyourproject. Youshouldseesomethinglikethisinthat 

file: 

   "dependencies":  { 

      "@angular/common": "^2.0.0", 

      "@angular/compiler": "^2.0.0", 

      "@angular/compiler-cli": "0.6.2", 

      "@angular/core": "^2.0.0", 

      "@angular/forms": "^2.0.0", 

      "@angular/http": "^2.0.0", 

      "@angular/platform-browser": "^2.0.0", 

      "@angular/platform-browser-dynamic": "^2.0.0", 

      "@angular/platform-server": "^2.0.0", 

      "@ionic/storage": "^1.0.3", 

                                                   34 

----------------------- Page 36-----------------------

      "ionic-angular": "^2.0.0-rc .1", 

      "ionic-native": "^2.2.3", 

      "ionicons": "^3.0.0", 

      "rxjs": "5.0.0-beta .12", 

      "zone .js": "^0.6.21" 

   }, 

   "devDependencies":  { 

      "@ionic/app-scripts": "^0.0.33", 

      "typescript": "^2.0.3" 

   }, 

Simply change the ionic-angular version number to the latest version, and then run: 

npm   install 

insideofyourprojectdirectory. Thiswillgrabthelatestversionoftheframeworkandaddittoyourproject. 

IMPORTANT: Keep in mind that there may be other dependencies in package.json that need to be up- 

dated, as well as the Ionic library. 

Makesuretoreadthechangelogtocheckforanybreakingchangeswhenanewversionisreleased,which 

may mean that you have to update parts of your code as well. 

OftenitiseasiesttojustcreateafreshnewprojectafterupdatingtheIonicCLI,andportingyourcodeover. 

If that is not an option, just make sure you read the changelog carefully, and update your dependencies 

and code accordingly. As Ionic 2 becomes more and more stable, this becomes less of a problem as the 

changes are not as drastic. 

                                                   35 

----------------------- Page 37-----------------------

Lesson 2: Anatomy of An Ionic 2 Project 

Now that we’ve covered how to get Ionic 2 installed and how to generate a project, I want to cover what 

the various files and folders contained within your newly generated project do. When you create a blank 

Ionic 2 application, your folder structure will look like this: 

                                                       36 

----------------------- Page 38-----------------------

At first glance, there’s an intimidating amount of stuff there - but there’s really not that much you need to 
                                                     37 

----------------------- Page 39-----------------------

worryabout,anditwillallmaketotalsensewithalittleexplanation. We’regoingtodiscusswhateverything 

does, but I will cover the important stuff first in more detail (mainly the files and folders that you will be 

modifying) and then cover the less important stuff. 

Important Files & Folders 

These files and folders are ones that you will be using on a frequent basis, so it’s important that you 

understand their role. Fortunately, there’s not too many of them! 

src 

This is where most of the action occurs. In a default application, your src folder will contain: 

     • An app folder 

     • A pages folder 

     • A theme folder 

     • An assets folder 

     • An index.html file 

The pages folder will contain all of the page components for your application. If you look inside of the 

pages folderyoushouldseeanotherfoldercalled home. Thisisa component,andismadeupofaclass 

definition (home.ts), a template (home.html), and style definitions (home.scss). For every page in your 

applicationyouwilladdanotherfolderhere(wecanactuallygettheIonicCLItodothisforusautomatically), 

so as well as the home folder you may also have login, intro, checkout, about and many more. 

The theme folder will contain all of the .scss files which define application wide styles for the application. 

Thisincludesasharedvariablesfilethatcontainsvariablesyoucanoverride,andaglobalfilethatcanstore 

generic styles for the whole application. There is a whole section later in this book dedicated to theming 

Ionic 2 applications so we’ll discuss this in more detail there. 

The app foldercontainsthe rootcomponent foryourapplication, app.component.ts. Again,wediscuss 

                                                      38 

----------------------- Page 40-----------------------

whattherootcomponentisandwhatitdoesindetailinotherpartsofthisbooksoIwon’tcovermuchright 

now, but essentially it’s the “starting point” for your application. You will also find a app.module.ts which 

makes use of Angular 2’s @NgModule which allows us to set up all of our application dependencies, like 

componentsandservicesweareusing. Finally,youalsohavea main .dev .ts fileanda main .prod .ts 

file, these are what kick off the bootstrapping process for your application. The dev file will be used in 

development, and the prod file will be used in production. 

Bootstrappingjustbasicallymeanssettingupthe rootcomponent ofyourapplication,whichisessentially 

the first component that is created that will then go on and create all of the rest. 

The assets folder is where you can store any static assets your application may want to make use 

of, like images and JSON files.  These will be copied over to the build folder (so it’s important you 

place assets here, not in the www/assets folder) when your application is built.  You could for ex- 

ample create an images folder in here, and then reference those images in your application through 

assets/images/myImage .png. 

Althoughyouwon’toftenhaveto,youcanalsoeditthe index.html fileforyourapplicationinthe src folder, 

and like the assets this will also be copied over to the build directory. 

Aswellasthedefaultfoldersthatyourappwillcontain,asyoustartbuildingyourapplicationyouwilllikely 

see a few more folders in here as well, but we’ll get to that later. 

IMPORTANT: This is a really important concept to understand so make sure you read this over a couple 

of times if you don’t get it initially. In the introduction section of this book we talked about webpack, 

transpiling and a bunch of other fancy ES6 stuff - the important thing to remember is that the ES6 and 

TypeScript features we are using aren’t actually supported by browsers yet, so we need to “transpile” 

them into valid ES5 code. When you run or build your application, Ionic will bundle up everything in this 

app folder, perform all the magic it needs to perform, and then spits it out into the www folder. 

When you are viewing your application through the browser you are actually viewing the bundled version 

inside of the www folder, not the code you created in the app folder. Likewise, when you build your 

application for release on iOS and Android (which we will discuss later) it is this www folder that will be 

used,notthe app folder. DONOTEDITCODEINTHEWWWFOLDER -anychangesyoumakeinthere 

                                                       39 

----------------------- Page 41-----------------------

(which is a bad idea anyway) will be overwritten when your app is rebuilt. 

UsingAngular2andthenewES6syntaxmeanstheprojectstructureandbuildprocessisquiteabitmore 

complicated, but fortunately for us Ionic handles basically all of it for us. So don’t worry too much about 

it, this is just something important to keep in mind so that you know what is going on. 

config.xml 

You won’t need to edit this file very often, but it is a very important file. The config.xml file is basically 

used as a way to tell Cordova how to build your application for iOS and Android. You’ll have to supply 

someimportantconfigurationinformationinherewhichwewilldiscusslater,butyoucanalsodefinesome 

preferences in here (like whether the splash screen should auto hide, whether the app should be portrait 

only, and a bunch more). You will usually only really worry about this file when you’re starting to look at 

getting your app on real devices. 

The Less Important Stuff 

ObviouslyeverythinginyourIonicprojectplaysarole,otherwiseitwouldn’tbethere. Butsomeofitisfor 

more advanced use cases you might not need to worry about, and some of it is just pure configuration 

stuff that you’ll never have to touch. 

Configuration Files 

If you take a look in the root folder of your generated project you will see a bunch of configuration files. 

Aside from the config.xml file which we discussed above, you can pretty safely just ignore all of these. 

The only file you may want to edit is the package.json file to update the version of Ionic you are using. 

                                                     40 

----------------------- Page 42-----------------------

resources 

This folder simply contains the splash screens and icons that will be used for iOS and Android when you 

build your application. I’ll show you a really easy way to create these resources with the Ionic CLI later. 

hooks 

Hooks are used as part of your applications build process, and you can add custom scripts in here to 

hook into various parts of the build process. At a beginner level you likely will not need to touch this at 

all,butifyouwantedtostartdevelopingmorecomplicated(butuseful)workflows,relatedtoversioningor 

deployment of your application for example, you could create some “hooks” here. 

node_modules 

This is another folder that you won’t have to touch at all, but it’s where all the goodies are stored. If you 

take a look in this folder you will find things like ionic-angular, angular2, and ionicons. This is where all 

ofthesourcefilesforthevarious libraries thatyourapplication depends on arestored (includingtheIonic 

framework itself). 

                                                      41 

----------------------- Page 43-----------------------

Lesson 3: Ionic CLI Commands 

TheIonicCLIisasuperpowerfultool-we’vealreadygonethroughhowtouseittogenerateanewproject 

and display your application in the browser,but there’s a bunch more commands you should know about 

too, so let’s go through some of them. This is by no means an exhaustive list, but it will cover all of the 

commands you should be using frequently. 

I’m going to list out a few commands now and what they do, and since some commands have multiple 

different arguments that you can supply to them I will be using the following syntax: 

ionic  command       [option1 |option2] 

in place of: 

ionic  command  option1 

and 

ionic  command  option2 

for the sake of keeping things neat and tidy. Let’s get into it! 

ionic  serve  -l 

You’ve already seen ionic  serve which will launch your application in the browser with live reloading, 

but this command will launch Ionic Lab, which looks like this: 

                                                       42 

----------------------- Page 44-----------------------

It will allow you to quickly see side by side what your application looks like on both iOS and Android. 

ionic  platform  add        [ios |android] 

This will allow you to add platforms that you plan on building for. 

ionic  plugin  add       [plugin] 

This will allow you to add Cordova plugins to your project, simply supply the plugin name. 

ionic  build      [ios |android] 

WhenyouarereadytobuildyourapplicationforiOSandAndroidyoucansimplyrunthesecommandsto 

                                                     43 

----------------------- Page 45-----------------------

build your project. There’s a little bit more to it than this to actually get it on your device and then submit 

it to App Stores, but we will discuss all that later. 

ionic  run      [ios |android] 

Ifyouwanttotestyourapplicationonarealdeviceyoucanusethiscommandtodeploytheappdirectlyto 

your device. For more information on this, please see the ‘Testing & Debugging’ section later in the book. 

ionic  emulate        [ios |android] 

Instead of deploying your application to a real device, this will launch an emulator on your machine and 

run it there instead. 

ionic  g     [page |component |directive |pipe |provider |tabs] 

This is the generate command and it is one of my favourites, it’s a real time saver. As I mentioned before, 

yourIonicprojectwillcontainabunchofcomponentslikethe home page. Tocreatemorecomponentsyou 

canmanuallycreateanewfolderandaddalltherequiredfiles,oryoucanjustrunthe ionic  generate 

commandtodoitautomaticallyforyou,withsomehandyboilerplatecodeinplace. Aswellaspages,this 

command can also generate generic components, directives, pipes, providers and tabs. I’d recommend 

using it for any new component you are adding to your application. 

ionic  plugin       list 

This will allow you to see a list of all the plugins you have installed in your project. 

ionic  plugin  rm        [plugin] 

This will allow you to remove any plugin from your project by supplying the plugin name. 

ionic  platform  rm         [android |ios] 

This will allow you to remove a platform that you have previously added. 

As I mentioned, this is not an exhaustive list but it does cover the most commonly used commands. I 

rarely use any commands outside of these. 

                                                        44 

----------------------- Page 46-----------------------

Lesson 4: Decorators 

Each class (which we will talk about in the next section) you see in an Ionic 2 application will have a 

decorator. A decorator looks like this: 

@Component ({ 

      someThing :  'somevalue ', 

      someOtherThing :  [Some , Other, Values] 

}) 

They definitely look a little weird, but they play an important role. Their role in an Ionic 2 application is 

to provide some metadata about the class you are defining, and they always sit directly above your class 

definition (again, we’ll get to that shortly) like this: 

@Decorator ({ 

      /*meta  data goes  here*/ 

}) 

export  class MyClass  { 

      /*class  stuff  goes  here*/ 

} 

This is the only place you will see a decorator, they are used purely to add some extra information to a 

class(i.e.they“decorate”theclass). Solet’stalkaboutexactlyhowandwhywewouldwanttousethese 

decorators in an Ionic 2 application. 

The decorator name itself is quite useful, here’s a few you might see in an Ionic 2 application: 

     • @Component 

     • @Pipe 

     • @Directive 

We can supply an object to the decorator to provide even more information on what we want. Here’s the 

most common example you’ll see in your applications: 

                                                      45 

----------------------- Page 47-----------------------

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

} 

Now this class knows where it needs to fetch its template from, which will determine what the user will 

actually see on the screen (we’ll be getting into that later as well). If you’ve got a super simple template, 

maybe you don’t even want to have an external template file, and instead define your template like this: 

@Component ({ 

      template :  `<p>Howdy !</p>` 

}) 

export  class HowdyPage  { 

} 

Some people even like to define large templates using template. Since ES6 supports using backticks 

(the things surrounding the template above) to define multi line strings, it makes defining large templates 

likethisaviableoptionifyouprefer(ratherthandoingsomethinguglylikeconcatenatingabunchofstrings). 

Now that we’ve covered the basics of what a decorator is and what it does, let’s take a look at some 

specifics. 

Common Decorators in Ionic 2 Applications 

There are quite a few different decorators that we can use. In the end, their main purpose is simply to 

describe what the class we are creating is, so that it knows what needs to be imported to make it work. 

Let’sdiscussthemaindecoratorsyouarelikelytouse,andwhattheroleofeachoneis. We’rejustgoingto 

                                                     46 

----------------------- Page 48-----------------------

befocusingonthedecoratorfornow,wewillgetintohowtoactuallybuildsomethinguseablebydefining 

the class in the next section. 

@Component 

Ithinktheterminologyofa component canbealittleconfusinginIonic2. AsImentioned,ourapplication 

is made up of a bunch of components that are all tied together. These components are contained within 

folders inside of our app folder, which look like this: 

home 

     • home.ts 

     • home.html 

     • home.scss 

A @Component isnotspecifictoIonic2,itisusedgenerallyinAngular2. Alotofthefunctionalityprovided 

by Ionic 2 is done through using components. In Ionic 2 for example you might want to create a search 

bar, which you could do using one of the components that Ionic 2 provides like this: 

<ion-searchbar></ion-searchbar> 

You simply add this custom tag to your template. Ionic 2 provides a lot of components but you can also 

create your own custom components, and the decorator for that might look something like this: 

@Component ({ 

      selector :  'my-cool-component ' 

}) 

which would then allow you to use it in your templates like this: 

<my-cool-component></my-cool-component> 

NOTE:Technicallyspeakingacomponentshouldhaveaclassdefinitionandatemplate. Thingslikepipes 

and providers aren’t viewed on the screen so have no associated template, they just provide some addi- 

                                                      47 

----------------------- Page 49-----------------------

tional functionality. Even though these are not technically components you may often see them referred 

to as such, or they may also be referred to as services or providers. 

@Directive 

The @Directive decoratorallowsyoutocreateyourowncustomdirectives. Typically,thedecoratorwould 

look something like this: 

@Directive ({ 

      selector :  '[my-selector] ' 

}) 

Theninyourtemplateyoucouldusethatselectortotriggerthebehaviourofthedirectiveyouhavecreated 

by adding it to an element: 

<some-element  my-selector></some-element> 

Itmightbealittleconfusingastowhentouse@Component and @Directive,astheyarebothquitesimilar. 

Theeasiestthingtorememberisthatifyouwanttomodifythebehaviourofanexistingcomponentusea 

directive, if you want to create a completely new component use a component. 

@Pipe 

@Pipe allows you to create your own custom pipes to filter data that is displayed to the user, which can 

be very handy. The decorator might look something like this: 

@Pipe ({ 

   name :  'myPipe ' 

}) 

which would then allow you to implement it in your templates like this: 

<p>{{someString        | myPipe}}</p> 

                                                     48 

----------------------- Page 50-----------------------

Now someString would be run through your custom myPipe before the value is output to the user. 

@Injectable 

An @Injectable allowsyoutocreateaserviceforaclasstouse. Acommonexampleofaservicecreated 

usingthe @Injectable decorator,andonewewillbeusingalotwhenwegetintoactuallybuildingtheapps, 

isa DataService thatisresponsibleforfetchingandsavingdata. Ratherthandoingthismanuallyinyour 

classes, you can inject your data service into any number of classes you want, and call helper functions 

from that Data Service. Of course this isn’t all you can do, you can create a service to do anything you 

like. 

An @Injectable willoftenjustlooklikeanormalclasswiththe @Injectable decoratortackedonatthetop: 

@Injectable () 

export  class DataService  { 

} 

IMPORTANT: Remember that just about everything you want to use in Ionic 2 needs to be imported first 

(wewillcoverimportinginmoredetailinthenextsection). Inthecaseofpipes,directives,injectablesand 

components they not only need to be imported, but also declared in your app.module.ts file. We will get 

into the specifics around this when we go through the application examples. 

Summary 

Theimportantthingtorememberaboutdecoratorsis: there’s not that much to remember. Decoratorsare 

powerful,andyoucancertainlycomeupwithsomecomplexlookingconfigurations. Yourdecoratorsmay 

becomecomplexasyoulearnmoreaboutIonic2,butinthebeginning,thevastmajorityofyourdecorators 

will probably just look like this: 

@Component ({ 

   selector :  'home-page ', 

                                                       49 

----------------------- Page 51-----------------------

   templateUrl :  'home .html ' 

}) 

I think a lot of people find decorators off putting because at a glance they look pretty weird, but they look 

way scarier than they actually are. In the next lesson we’ll be looking at the decorator’s partner in crime: 

theclass. Theclassdefinitioniswherewewilldoalltheactualwork,rememberthatthedecoratorjustsits 

at the top and provides a little extra information. 

                                                       50 

----------------------- Page 52-----------------------

Lesson 5: Classes 

Inthelastsectionwecoveredwhatadecorator is. Torecap,it’salittlebitofcodethatsitsaboveourclass 

definitions that declares what the class is, what the class needs, and how the class should be configured. 

Now we are going to talk about the class itself. 

What is a Class? 

Depending on your experience with programming languages, you may or may not know what a class is. 

SoI’mgoingtotakeastepbackfirstandexplainwhataclassisasageneralprogrammingconcept,asit 

is not specific to Ionic, Angular or even Javascript. 

Classes are used in Object Oriented Programming (OOP), they essentially behave as “blueprints” for ob- 

jects. You can define a class, and then using that class you can create, or instantiate, objects from it. If 

classes are a completely new concept to you, it’d be worth doing a little bit of your own research before 

continuing, but let’s take a look at a simple example. 

class  Person  { 

      constructor(name , age){ 

           this .name  =  name ; 

           this .age  =  age ; 

      } 

      setAge(age){ 

           this .age  =  age ; 

           return  true ; 

      } 

      getAge (){ 

           return  this .age ; 

                                                     51 

----------------------- Page 53-----------------------

      } 

      setName(name){ 

           this .name  =  name ; 

           return  true ; 

      } 

      getName (){ 

           return  this .name 

      } 

      isOld(){ 

           return  this .age  >  50; 

      } 

} 

This class defines a Person object. The constructor is run whenever we create an instance of this 

class (an object is an instance of a class), and it takes in two values: name and age. These values are 

used to set the member variables of the class, which are this .name and this .age. 

These values can be accessed from anywhere within the object by using the this keyword. The this 

keywordreferstothecurrent scope,sowhatitevaluatestodependsonwhereyouuseit,butifyouuseit 

within a class (and not within a callback or anything else which would change the scope) this will refer to 

the class itself. 

Ifyouimagineyourselfasthis andyourlocationinthephysicalworldasthe scope,considerthefollowing 

example: if you are in your hotel room your scope is the room, if you leave your room your scope is now 

the hotel itself, if you leave the hotel your scope is now the world (or the country you are in if you prefer). 

If you’re not familiar with the this keyword, I’d recommend reading this. 

Wehaveourclassdefinedwhichactsasablueprintforcreatingobjects,sowecouldcreateanew Person 

                                                     52 

----------------------- Page 54-----------------------

object like this: 

var  john  =  new  Person ('John ',  32); 

ThetwovaluesI’vesuppliedherewillbepassedintothe constructor ofthe Person classtosetupthe 

member variables. Now if I were to run the following code: 

console .log(john .getName ()); 

John’s name would be logged to the console. Similarly we could also call the getAge function to retrieve 

his age or we could even change his name or age using the set functions. Getters and setters are very 

common for classes, but we’ve also defined a more interesting function here which is isOld. This will 

return true if the Person is over 50 years old, which is not the case for John. 

Perhaps the most important concept to remember is that the class is just a “blueprint”, an object is kind 

of like an individual copy of a class. So we can have multiple objects created from the same class, e.g: 

var  john  =  new  Person ('John ',  32); 

var  louise  =  new  Person ('Louise ',  28); 

var  david  =  new  Person ('David ',  52); 

console .log(john .isOld()); 

console .log(louise .isOld()); 

console .log(david .isOld()); 

In the code above, John, Louise and David are all individual objects of the Person class, and maintain 

their values separately. If we ran the code above, it would only return true for David (he may be old, but 

I’m sure he is wise). 

Classes in Ionic 2 

Weknowwhataclassis,butwhyaretheysuddenlyathinginIonic2andAngular2? We’vetouchedonthis 

earlier, but classes are a new addition to Javascript with the ES6 specification. It is certainly a welcome 

                                                         53 

----------------------- Page 55-----------------------

change because it is one of the most widely used patterns in programming, and in fact most JavaScript 

applications were already using classes anyway, ES6 just made it more official. 

Before ES6 it was common (and I guess it still is since most people are still using ES5) to create a class 

like structure by using functions. This looks a little something like this: 

var  Person  =  function       (name , age)  { 

   this .name  =  name ; 

   this .age  =  age ; 

}; 

Person .prototype .isOld  =  function ()  { 

   return  this .age  >  50; 

}; 

var  david  =  new  Person ('david ',  52); 

console .log(david .isOld()); 

It looks a bit different, but the end result is basically the same. Since ES6 adds a class keyword we can 

now use a more ‘normal’ approach. 

So let’s take a look at what a class looks like in Ionic 2: 

import  {  Component  }  from        '@angular/core '; 

import  {  NavController  }  from          'ionic-angular '; 

import  {  SomePage  }  from        '../pages/some-page/some-page '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

                                                      54 

----------------------- Page 56-----------------------

   constructor(public  nav : NavController)  { 

   } 

} 

Thefirstthingyouwillnoticeisthe import statements. Anythingthatisrequiredbytheclassthatyouare 

creating will need to be imported. In this case we are importing Component from @angular/core which 

allowsustousethe @Component decorator,and NavController fromtheIoniclibrarywhichwecanuse 

to control navigation. 

We are also importing SomePage which is a class of our own creation. The path for this simply follows 

the directory structure of your project, in this case we have the SomePage component defined inside a 

foldercalled pages whichisonelevelabovethecurrentfile. Theimportshouldlinktowhereverthe .ts file 

is for the class, but it is not necessary to include the .ts extension. 

Nextupwehavethedecorator,whichweusetodefinetheselector(i.e.thenamethiscomponentwillhave 

in our DOM, <home-page></home-page>) and the template. 

Once we get past the decorator, we finally arrive at the class itself. Notice though that it is preceded by 

the export keyword, e.g: 

export  class HomePage  { 

} 

The export keyword works in tandem with the import keyword, so we export classes that we want to 

import somewhere else. The last thing we have left to discuss is the constructor. We’ve already talked 

about the role of a constructor in classes in general, and it is no different here: the code inside of the 

constructor is run when the class is instantiated. 

There’s a little bit more to it that you need to know though. In Ionic 2 we need to inject any services that 

we want to use inside of this class into the constructor, which looks like this: 

                                                       55 

----------------------- Page 57-----------------------

   constructor(platform : Platform , nav : NavController)  { 

     platform .ready ().then (()  =>  { 

      }); 

   } 

Inthisexamplewewanttousethe Platform servicetodetectwhenthedeviceisready,soweinjectitinto 

the constructor and then we can use it within the constructor. 

Wedon’tneedtouse platform outsideoftheconstructorhere,butinmostcasesyouwillwanttousethe 

services you inject elsewhere in the class as well. So to make the service available to any function within 

the class, you must set it as a member variable. This will look like this: 

import  {  Component  }  from      '@angular/core '; 

import  {  Platform  }  from      'ionic-angular '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   someMemberVariable : any  =  “hey ”!; 

   constructor(platform : Platform)  { 

     this .platform  =  platform 

   } 

   someOtherMethod(){ 

                                                   56 

----------------------- Page 58-----------------------

     this .platform .ready ().then (()  =>{ 

     }); 

   } 

} 

OR we can use the public keyword I mentioned before when using TypeScript to automatically create 

these member variable references, like this: 

import  {  Component  }  from     '@angular/core '; 

import  {  Platform  }  from    'ionic-angular '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   someMemberVariable : any  =  “hey ”!; 

   constructor(public  platform : Platform)  { 

   } 

   someOtherMethod(){ 

     this .platform .ready ().then (()  =>{ 

     }); 

   } 

} 

                                                 57 

----------------------- Page 59-----------------------

Also note that any variables declared above the constructor like someMemberVariable is here will also 

automaticallybesetupasmembervariables. Sowecouldaccess someMemberVariable fromanywhere 

in this class through this .someMemberVariable. Any services you need to inject (and possibly set 

up as member variables) should be added to the constructor, any member variables you want to create 

for any other purpose should be declared above the constructor. If this concept sounds confusing to you 

right now it should make a little more sense when we start going through some examples. 

Now we can access platform from anywhere in this class through this .platform. If we did not set 

upthismembervariableandtriedtoaccess platform fromour someOtherMethod function,itwouldnot 

work. 

Creating a Page 

Page’s will usually make up a large portion of your application - for each screen you want to have in your 

application you will have a separate Page defined. Previously, there was a special decorator in Ionic for 

this, but now they are just regular @Components. 

As we’ve already discussed, the class for a page might look something like this: 

import  {  Component  }  from       '@angular/core '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class MyPage  { 

   constructor()  { 

   } 

} 

and the template file we are referencing in the decorator might look something like this: 

                                                    58 

----------------------- Page 60-----------------------

<ion-header> 

 <ion-navbar> 

   <ion-title> 

     My  Page 

   </ion-title> 

 </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

     <ion-item>I</ion-item> 

     <ion-item>Am</ion-item> 

     <ion-item>A</ion-item> 

     <ion-item>List</ion-item> 

   </ion-list> 

</ion-content> 

The template file makes up what the user will actually see (we’re going to discuss templates in a lot more 

detaillater). Thetemplatefileandtheclassworkinunison: theclassdefineswhattemplateistobeshown 

to the user, and the template can make use of data and functions available in the class. 

We’ve covered the basic structure of what a Page class looks like and what the constructor function 

does, but you can also add other functions that your page can make use of, for example: 

import  {  Component  }  from     '@angular/core '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

                                                  59 

----------------------- Page 61-----------------------

}) 

export  class MyPage  { 

   constructor()  { 

     //this runs  immediately 

   } 

   someMethod(){ 

     //this  only  runs  when  called 

   } 

   someOtherMethod(){ 

     //this  only  runs  when  called 

   } 

} 

You could have your constructor call these other functions or you could even have them triggered by a 

user clicking a button in the template for example. These additional functions can be added to any class, 

it’snotjustspecifictopages. Wewillcovertheseconceptsinmuchmoredetaillater,fornowwejustwant 

to understand the basic structure of the different class types and what they do. 

NOTE: You can auto generate a Page in your project using the command ionic  g  page  MyPage 

Creating a Component 

Thecodeforagenericcomponentlooksalotlikethecodeforapage(remember,apageisacomponent), 

justasitwilllooklikejustabouteverythingelsewecreate. Whencreatingpageswithcomponentsweuse 

Ionic’s built in navigation to handle displaying them. A page is a component that will take up the whole 

screen(i.e.a“view”fortheuser),butacomponentwillalsoallowyoutocreateyourowncustomelement 

                                                  60 

----------------------- Page 62-----------------------

thatyoucaninsertintoyourtemplatesaswell. Maybeyouwanttocreateacustomdatepickercomponent 

toaddtoyourpage,oraboxthatdisplaysrandommotivationalquotes-inbothofthesecasesyouwould 

create a custom Component. 

The class for a generic component will look like this: 

import  {  Component  }  from      '@angular/core '; 

@Component ({ 

   selector :  'my-component ', 

   templateUrl :  'my-component .html ' 

}) 

export  class MyComponent  { 

   text : any ; 

   constructor()  { 

     this .text  =    'Hello  World '; 

   } 

} 

Reallythe only difference with the component here is thatit specifies a selector. This will be the name of 

the element that you use to insert the component into your template, i.e: 

<my-component></my-component> 

Beforewegettousingitthough,let’salsotalkaboutthetemplateforthecomponent. Thisisn’treallyany 

differenttohowthetemplateforapageworks. We’rereferencingafilecalled my-component.html which 

might contain something like this: 

<div> 

   {{text}} 

</div> 

                                                   61 

----------------------- Page 63-----------------------

Justlikewithapage,wecanreferencedatathatisstoredintheclassdefinition(aswellasfunctions). With 

this template, all our component will do is render: 

<div>Hello  World</div> 

into the DOM. Which is pretty boring of course, but you can create some pretty interesting, and reusable, 

stuffwiththisfunctionality. Solet’stakeaquicklookathowtonowactuallyusethecomponentinapage. 

You will need to import it and add it to your app.module.ts file: 

@NgModule ({ 

   declarations :  [ 

     MyApp , 

     HomePage , 

     MyComponent 

   ], 

   imports :  [ 

      IonicModule .forRoot (MyApp) 

   ], 

   bootstrap :  [IonicApp], 

   entryComponents :  [ 

     MyApp , 

     HomePage 

   ], 

   providers :  [] 

}) 

export  class  AppModule  {} 

and then you can just reference it in a pages template like this: 

<my-component></my-component> 

It’s actually pretty unlikely that you will need to create your own custom components like this, as Ionic al- 

readyprovidesmostofwhatyouwouldneed(lists,tabs,buttons,inputsandsoon). Ifyouneedsomething 

                                                   62 

----------------------- Page 64-----------------------

that Ionic does not already provide though, then you’ll have to look at creating your own component. 

NOTE: YoucanautogenerateaComponentinyourprojectusingthecommand ionic  g                        component 

MyComponent 

Creating a Directive 

As Imentioned before, componentsand directives arevery similar,butin generala componentis used to 

create a completely new element, and a directive is used to modify the behaviour of an existing one. 

The class for a custom directive looks like this: 

import  {  Directive  }  from        '@angular/core '; 

@Directive ({ 

   selector :  '[my-directive] ' 

}) 

export  class MyDirective  { 

   constructor()  { 

   } 

} 

In this directive, we also have a selector like we did for the component - but it’s slightly different. Rather 

than representing the name of a tag, this can be used as an attribute on an element. You will do this a lot 

in Ionic 2, on buttons for example: 

<button  ion-button> 

or on your lists: 

<ion-list  no-lines> 

but in this case we’re creating our own custom directive that we can use on anything, e.g: 

                                                     63 

----------------------- Page 65-----------------------

<button  my-directive> 

But notice we don’t actually have a template for this directive. Although we usually refer to any feature in 

our applications as ‘components’, technically speaking a component consists of a class and a template 

(view)-ifitdoesnothaveaviewthenitisnotacomponent(itwouldbebettertorefertoitasaserviceor 

provider). 

Iwantedtojustcoverthebasicshere,butIthinkit’salsousefultoknowabout ElementRef. Thiswillgive 

you access to the element that the directive was added to. You can include it in your directive like this: 

import  {  Directive , ElementRef  }  from            '@angular/core '; 

@Directive ({ 

   selector :  '[my-directive] ' 

}) 

export  class MyDirective  { 

   constructor(element : ElementRef)  { 

      this .element  =  element ; 

   } 

} 

You will also need to include this in your app.module.ts file just like the custom component. 

NOTE: You can auto generate a Directive in your project using the command ionic  g  directive 

MyDirective 

Creating a Pipe 

Pipes might seem a little complex at first glance, but they’re actually really easy to implement. They look 

like this: 

                                                      64 

----------------------- Page 66-----------------------

import  {  Injectable, Pipe  }  from          '@angular/core '; 

@Pipe ({ 

   name :  'myPipe ' 

}) 

@Injectable () 

export  class MyPipe  { 

   transform (value , args)  { 

      //do  something  to      'value ' 

      return  value ; 

   } 

} 

Notice that a pipe is also an @Injectable, we will talk about what that is in just a moment. So the idea is 

that whatever you are passing through the pipe will go to this transform function, you do whatever you 

needtodotothevalue,andthenyou return thenewvalueback. Nowthisnewvaluewillberenderedout 

to the screen, rather than the initial value. You can use it in your templates like this: 

<p>{{someValue       | myPipe}}</p> 

which will run whatever someValue is through your custom pipe before displaying it. Once again, make 

sure you import and reference the pipe in your app.module.ts file before using it. “‘ 

NOTE: You can auto generate a Pipe in your project using the command ionic  g  pipe  MyPipe 

Creating an Injectable 

AnInjectableallowsyoutocreateaservicethatyoucanusethroughoutyourapplication(likeaninterface 

betweenyourapplicationandanexternalorinternaldataservice). Injectablesmightalsobereferredtoas 

                                                     65 

----------------------- Page 67-----------------------

‘Providers’. The @Injectable that the Ionic CLI automatically generates looks like this: 

import  {  Injectable  }  from       '@angular/core '; 

import  {  Http  }  from     '@angular/http '; 

import    'rxjs/add/operator/map '; 

@Injectable () 

export  class Data  { 

   data : any ; 

   constructor(public  http : Http)  { 

     console .log('Hello  Data  Provider '); 

   } 

   load()  { 

     if   (this .data)  { 

        return  Promise .resolve (this .data); 

     } 

     //  don 't have  the  data yet 

     return  new  Promise (resolve  =>  { 

        //  We 're  using Angular  Http  provider         to request  the  data, 

        //  then  on  the response  it 'll map        the JSON  data  to  a parsed  JS  object. 

        //  Next  we process      the  data  and  resolve  the promise  with  the new  data. 

        this .http .get ('path/to/data .json ') 

           .map (res  =>  res .json ()) 

           .subscribe(data  =>  { 

             //  we 've  got  back  the raw  data, now  generate  the  core schedule  data 

             //  and  save  the  data for      later reference 

                                                   66 

----------------------- Page 68-----------------------

              this .data  =  data ; 

              resolve (this .data); 

           }); 

      }); 

   } 

} 

Thiscodecreatesaprovidercalled Data thatloadsdatafrom aJSONsource(whichcaneitherbealocal 

JSONfile,anexternalJSONfileoraresponsefromaserver). Itreturnsapromise,whichwillallowthedata 

to be retrieved from the http request after it has finished executing. If the data has already been loaded 

then it just returns the data directly (also through a promise). We’ll go into fetching data with http in more 

depth later, for now we just want to focus on the basics of an injectable. 

So if we want to grab the data that this service returns, we would first inject it into wherever we want to 

use it, i.e: 

import  {  Component  }  from       '@angular/core '; 

import  {  Data  }  from     '../../providers/data '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

export  class MyPage  { 

   constructor(public  dataService : Data){ 

   } 

} 

                                                    67 

----------------------- Page 69-----------------------

add it the the providers array in app.module.ts: 

providers :  [Data] 

and then you could make use of any function the injectable provides through this .dataService, for 

example: 

      this .dataService .load().then ((data)  =>  { 

         console .log(data); 

      }); 

Noticethatweusethen ()herebecauseitisapromisethatisreturned,soweneedtowaitforthepromise 

to complete before we can access the data. You might extend this provider further so that it also offered 

a save function, i.e: 

this .dataService .save(someData); 

Ofcourse,youcanuseaprovidertodootherthingsbesidesfetchingdata-butthat’saverycommonuse 

case. 

NOTE: You can auto generate an Injectable in your project using the command ionic  g  provider 

MyProvider 

Summary 

We’ve taken a pretty broad and basic look at how to create the different types of classes in Ionic 2, and 

there’s certainly a lot more to know. But you should know enough now that it won’t all look weird and 

foreign to you when we start diving into some real examples. 

                                                     68 

----------------------- Page 70-----------------------

Lesson 6: Templates 

Templates, I think, are one of the most fun bits of Ionic 2. It’s where the power of the framework really 

shines. Take this code for example: 

<ion-header> 

 <ion-navbar  color="secondary"> 

   <ion-title> 

     My  Friends 

   </ion-title> 

   <ion-buttons  end> 

     <button  ion-button  icon-only  (click)="doSomethingCool ()"><ion-icon 

         name="add-circle"></ion-icon></button> 

   </ion-buttons> 

 </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-searchbar  (input)="getItems ($event)"></ion-searchbar> 

   <ion-list> 

     <ion-item  *ngFor="let  item  of  items"> 

        <ion-avatar  item-left> 

          <img   [src]="item .picture"> 

        </ion-avatar> 

        <h2>{{item .name}}</h2> 

        <p>{{item .description}}</p> 

     </ion-item> 

   </ion-list> 

</ion-content> 

                                               69 

----------------------- Page 71-----------------------

with no additional styling, the code above would look like this right out of the box: 

It doesn’t look amazing, but we already have a pretty complex layout set up with just a few lines of code, 

throwabitofcustomstylinginandwe’dhaveaprettysleekinterface. We’regoingtogothroughdifferent 

                                                      70 

----------------------- Page 72-----------------------

aspectsofcreatingtemplatesinIonic2morethoroughlyinjustamoment,butIwantedtogiveyouasense 

ofwhatafulltemplateforapagemightlooklike,andalsohoweasyitistousethecomponentsprovided 

by Ionic. 

There’s a lot more to know about template syntax in Ionic 2, and there’s been a few significant changes 

from what you might have been used to in Ionic 1 - so we’re going to dive into templates in a lot of detail. 

We’ll also be covering quite a few other topics after this, but this is the last of what I would consider to 

be the “core” knowledge required to get started with Ionic 2 - once you’ve got the basics of classes and 

templates down you can start jumping into building some stuff. So, strap in - we’re going to start off with 

a little theory then get into some practical examples. 

The * Syntax 

Perhaps one of the most confusing things about the new template syntax in Ionic 2 is this little guy: *. 

You’ll often come across code that looks like this: 

<ion-item  *ngFor="let  item  of  items"> 

or 

<p  *ngIf="someBoolean"><p> 

and so on. In Angular 2 the * syntax is used as a shortcut for creating an embedded template, so if we 

use *ngIf as an example, the above could be expanded to: 

<template  [ngIf]="someBoolean"> 

      <p></p> 

</template> 

The reason for using templates is that Angular 2 treats templates as chunks of the DOM that can be 

dynamically manipulated. So in the case of *ngIf we don’t want to just literally render out: 

<p  *ngIf="someBoolean"></p> 

                                                      71 

----------------------- Page 73-----------------------

to the DOM. We want to render out: 

<p></p> 

if someBoolean is true, and nothing if it is false. Similarly, if we were to use *ngFor we don’t want to 

literally render out: 

<p  *ngFor="let  item  of  items">{{item .name}}</p> 

we want to render out paragraph tags stamped with the information for each particular item: 

<p>Bananas</p> 

<p>More  Bananas</p> 

<p>Pancakes</p> 

So we need to use <template> to allow for this functionality, but writing out templates manually is a lot 

of work, and the * syntax just makes this a lot easier. 

Nowthatwe’vegotthatoutoftheway,let’sjumpintosomespecificsofhowtousedirectiveslike *ngIf 

and *ngFor. 

Looping 

Quite often you will want to loop over a bunch of items - when you have a list of articles and you want to 

renderallofthetitlesintoalistforexample. Wecanusethe ngFor directivewhichissuppliedbyAngular 

2 to achieve this - it looks something like this: 

<ion-list> 

      <ion-item  *ngFor="let  article  of  articles"  (click)="viewArticle (article)"> 

           {{article .title}} 

      </ion-item> 

</ion-list> 

In this example, we create an <ion-list> and then for every article we have in our articles array we 

add an <ion-item>. I mentioned before (in the basics section) the use of let to create a local variable 

                                                      72 

----------------------- Page 74-----------------------

and we are using that here. This allows us to access whatever article the loop is currently up to, and we 

are using that to grab the title of the current article and render it in the list, and also to pass it into the 

viewArticle function that is triggered when the item is clicked. 

By passing a reference to the current article to the viewArticle function we would then be able to do 

something like trigger a new page with the specifics of that article on it. 

Conditionals 

Sometimesyouwillwanttodisplaycertainsectionsofthetemplateonlywhencertainconditionsaremet, 

and there’s a few ways to do this. 

<div  *ngIf="someBoolean"> 

ngIf will render the node it is attached to only if the expression evaluates to be true. So in this case, if 

someBoolean is true, it will be added to the DOM, if it is false then it will not be added to the DOM. 

ngIf is great for boolean - true or false - scenarios, but sometimes you will want to do multiple different 

things based on a value. In that case you can use ngSwitch: 

<div    [ngSwitch]="paragraphNumber"> 

   <p  *ngSwitchCase="1">Paragraph  1</p> 

   <p  *ngSwitchCase="2">Paragraph  2</p> 

   <p  *ngSwitchCase="3">Paragraph  3</p> 

   <p  *ngSwitchDefault>Paragraph</p> 

</div> 

In this example we are checking the value of paragraphNumber  with ngSwitch.                        Whichever 

ngSwitchCase statement the value matches will be the DOM element that will be rendered, and if none 

match the ngSwitchDefault element will be used. 

Another method to display or hide certain elements based on a condition is to use the hidden property. 

For example: 

                                                       73 

----------------------- Page 75-----------------------

<ion-avatar  [hidden]="hideAvatar"  item-left> 

Inthisexample,ifthe hideAvatar expressionevaluatestobe true theelementwillbehidden,butifitis 

false then it will be rendered. Using this method, you would have a this .hideAvatar variable in your 

class definition which you could toggle to hide and show these elements. 

Aswellasconditionallydisplayinganentireelement,youcouldalsoattachdifferentclassestoanelement 

based on a condition, for example: 

<ion-avatar  [class .my-class]="showMyClass"  item-left> 

This is a similar concept to the [hidden] method above, but instead of showing and hiding the element 

based on a condition, it will add a class you have defined in your CSS based on a condition. This can 

come in really handy, for example you might want to use it to style items that have already been read by 

the user a different colour. 

Ionic 2 Template Components 

Everything we’ve covered above is general Angular 2 stuff, there’s nothing specific to Ionic there (except 

forthe <ion-list> and <ion-item> elementsweused). Youwillbeusingthissyntaxalotthroughout 

yourtemplates,along with someIonicspecificcomponents. We’regoing togothroughsomeoftheIonic 

specific stuff now, starting with the basic layout of an Ionic 2 page template: 

<ion-header> 

  <ion-navbar> 

   <ion-title> 

      Home 

   </ion-title> 

  </ion-navbar> 

</ion-header> 

<ion-content  class="home"> 

                                                     74 

----------------------- Page 76-----------------------

   <ion-card> 

      <ion-card-header> 

        Card  Header 

      </ion-card-header> 

      <ion-card-content> 

        Hello  World 

      </ion-card-content> 

   </ion-card> 

</ion-content> 

Thisistheautomaticallygeneratedcodeyouwillgetforyourtemplateifyouusetheblanklayout. There’s 

two important components here that are used in just about every template and they are <ion-navbar> 

and <ion-content>. 

The <ion-content> element is simply used to hold the main content of the page (which in this case is 

just a “card”), and allows for scrolling. Notice that it has a class of “home”, if you look in the home.scss 

fileyoushouldalsoseea“home”classdefined. Thisdoesn’tdoanythingspecial,it’sjustaconventionto 

allow you to target styles to that <ion-content> specifically (remember, even though you add styles to 

the home.scss filetheywillstillapplytothewholeapplication,theseparatefileispurelyfororganisation). 

Themoreinterestingofthetwois <ion-navbar>. Thisiswhataddstheheaderbartothetopofthepage, 

whereyoucanplacethetitleofthepageaswellasbuttonsontheleftorright. It’snotpurelyanaesthetic 

thing though, it also has a lot of inbuilt smarts for navigation. If you were to push a new page (a concept 

we will cover in detail later), then a back button will automatically be added to the <ion-navbar> which 

will automatically allow the user to navigate back to the previous page, rather than you having to handle 

that manually. 

All of the above covers the basic template syntax you will see in a lot of your Ionic 2 pages, the rest 

is basically just dropping in and configuring various components that Ionic 2 offers (or if you’re feeling 

adventurous, your own custom components). 

Nowlet’stakealookathowtoimplementafewofIonic’scomponentsintoourtemplates. We’renotgoing 

                                                     75 

----------------------- Page 77-----------------------

to be covering anywhere near all of them because there is so many, I just want to give you a taste. For a 

full list of all the available components, take a look at the Ionic 2 documentation. 

Lists 

Lists are one of the most used components in mobile applications, and they provide an interesting chal- 

lenge. Thatsmoothscrollingyougetwhenyouswipealistonnativeapplications,withsmoothacceleration 

and deceleration, and it all just feels right - well that’s really hard to replicate. Fortunately, you don’t have 

toworryaboutitbecauseIonic2doesallthehardstuffforyou,andusingalistisassimpleasaddingthe 

following to your template: 

<ion-list> 

      <ion-item>Item  1</ion-item> 

      <ion-item>Item  2</ion-item> 

      <ion-item>Item  3</ion-item> 

</ion-list> 

or if you wanted to dynamically create your list for a bunch of items defined in your class: 

<ion-list> 

   <ion-item  *ngFor="let  item  of  items"  (click)="itemSelected(item)"> 

      {{item .title}} 

   </ion-item> 

</ion-list> 

Slides 

Slides are another common element used in mobile applications, slides look like this: 

                                                     76 

----------------------- Page 78-----------------------

whereyouhavemultipledifferentimagesorpagestoshowandtheusercancyclethroughthembyswiping 

left or right. Just like lists in Ionic 2, creating slides is really easy as well: 

                                                         77 

----------------------- Page 79-----------------------

<ion-slides  [options]="slideOptions"> 

      <ion-slide> 

           <h2>Slide  1</h2> 

      </ion-slide> 

      <ion-slide> 

           <h2>Slide  2</h2> 

      </ion-slide> 

      <ion-slide> 

           <h2>Slide  3</h2> 

      </ion-slide> 

</ion-slides> 

A container of <ion-slides> is used, and then each individual slide is defined with <ion-slide>. It 

is also possible to supply some options to define the behaviour of the slides; whether it should loop and 

whether it should have a pager for example (I’ll give you a more complete example later). 

Input 

In Ionic 2, rather than using <input>  tags for user input you use the Ionic equivalent which is 

<ion-input>. Just like a normal <input> you can specify a type depending on what sort of data you 

are capturing, but by using the Ionic versions we will be taking advantage of the custom inputs Ionic has 

designed for mobile. 

<ion-list> 

   <ion-item> 

      <ion-label  fixed>Username</ion-label> 

                                                   78 

----------------------- Page 80-----------------------

     <ion-input type="text" value=""></ion-input> 

   </ion-item> 

   <ion-item> 

     <ion-label  fixed>Password</ion-label> 

     <ion-input type="password"></ion-input> 

   </ion-item> 

</ion-list> 

As well as <ion-input> specifically, you will also find that Ionic provides other input elements like 

<ion-select>, <ion-radio>, <ion-checkbox> and <ion-toggle>. 

Grid 

The Grid is a very powerful component, and you can use it to create complex layouts. If you’re familiar 

withCSSframeworkslikeBootstrap,thenitisaverysimilarconcept. Whenplacingcomponentsintoyour 

templates, in general things just display one after the other, but with the Grid you can come up with just 

about any layout you can imagine. 

Itworksbypositioningelementsonthepagebasedonrowsandcolumns. Rowsdisplayunderneatheach 

other, and columns (which are placed inside of rows) display side by side. For example: 

<ion-row> 

     <ion-col></ion-col> 

     <ion-col></ion-col> 

</ion-row> 

<ion-row> 

     <ion-col></ion-col> 

     <ion-col></ion-col> 

     <ion-col></ion-col> 

                                                  79 

----------------------- Page 81-----------------------

</ion-row> 

This will create a layout with two rows, the top row will have two columns and the bottom row will have 

three columns. By default everything will be evenly spaced, but you can also specify how wide columns 

should be if you like: 

<ion-row> 

      <ion-col width-10></ion-col> 

      <ion-col width-20></ion-col> 

      <ion-col width-25></ion-col> 

      <ion-col width-25></ion-col> 

      <ion-col width-20></ion-col> 

</ion-row> 

Thiswillcreateasinglerowwith5differentcolumnsofvaryingwidths(youwillprobablywanttomakesure 

your column widths add up to 100!). 

For a full list of available widths take a look at the documentation. 

Icons 

Iconsareheavilyusedinmostapplicationstoday,theyaregreatbecausetheyallowyoutocommunicate 

what something does rather than relying on text. It’s good for usability (most of the time) and looks way 

better than using a button that says something like “Add Item”. 

Ionic provides a ton of icons that you can use out of the box, like: 

<ion-icon  name="heart"></ion-icon> 

Youjusthavetospecifythenameoftheiconyouwanttouse. Theyevenhavevariationsofthesameicons 

so that they display differently between iOS and Android to better match the style of the platform. For a 

full list of available icons you can go here. 

                                                      80 

----------------------- Page 82-----------------------

There’satonmoredefaultcomponents,andalotmoretoknowabouteventheonesI’vementionedhere, 

so make sure you have a look through the documentation to familiarise yourself with what’s available. 

                                                    81 

----------------------- Page 83-----------------------

Lesson 7: Styling & Theming 

OnethingIreallylikeaboutIonicisthatthedefaultcomponentslookgreatrightoutofthebox. Everythingis 

reallyneat,sleekandclean…butalsomaybealittleboring. Ilikesimple,simpleisgreat,butyouprobably 

don’t want your app to look like every other app out there. Take the example we used in the templates 

lesson: 

                                                   82 

----------------------- Page 84-----------------------

Wehave a simple and clean interface, butit’sprobably notgoing to win any awards for its design. It uses 

thedefaultstylingwithabsolutelynocustomisationwhatsoever. Ifyoutakealookatsomeoftheexample 

apps that I’ve included in this course you will see that they mostly all have custom styling: 

                                                     83 

----------------------- Page 85-----------------------

Someoftheapplicationshavesimplestyling,wherejustafewchangesaremadetoachieveamuchmore 

attractivelook. Someoftheapplicationshavemorecomplexstyling,thatcompletelychangethelookand 

feel of the application. 

                                                       84 

----------------------- Page 86-----------------------

Icertainlydon’tclaimtobesomedesignguru,butIthinkthethemesI’vecreatedfortheseapplicationsare 

visuallypleasingandhelpgivetheappssomecharacter. InthislessonI’mgoingtoshowyouthedifferent 

ways you can customise your Ionic 2 applications, and the theory behind theming in general. 

Introduction to Theming in Ionic 2 

WhenstylinganIonic2application,thereisnothinginherentlydifferentorspecialaboutit–it’snodifferent 

than the way you would style a normal website. I often see questions like: 

“Can I create [insert UI element / interface] in Ionic?” 

and the answer is generally yes. Could you do it on a normal webpage? If you can then you can do it in 

Ionic as well. 

AlotofpeoplemaybeusedtojusteditingCSSfilestochangestyles,butthereissomeaddedcomplexity 

withIonic,whichisprimarilyduetothefactthatituses SASS.Again,SASSisn’tspecifictoIonicormobile 

web app development – it can also be used on any normal website – but many people may not be as 

familiar with SASS as they are with plain old CSS. 

If you’re not already familiar, .scss is the file type for SASS or Syntactically Awesome Style Sheets. If 

this is new to you, you should read more about what SASS is and what it does here. For those of you 

shortontime,whatyouputinyour .scss filesisexactlythesameaswhatyouwouldputin .css files,you 

can just do a bunch of extra cool stuff as well like define variables that can be reused in multiple areas. 

These .scss filesarethencompiledintonormal .css files(it’sbasicallythesameconceptweuseinIonic2, 

where we code using all the fancy new ES6 features, but that is then transpiled into ES5 which is actually 

supported by browsers now). 

When theming your application, you’re mainly going to be editing your .html templates and .scss 

stylesheets – you will NEVER edit any .css files directly. The .css files are generated from the .scss files, 

so if you make any changes to the .css file it’s just going to get overwritten. 

If you take a look at the files generated when you create a new Ionic 2 project, you will see some .scss 

files inside of your theme folder, so let’s quickly run through what their purpose is. 

                                                        85 

----------------------- Page 87-----------------------

     • src/app/app.scss isusedtodeclareanystylesthatwillbeusedgloballythroughouttheapplication 

     • theme/variables.scss is used to modify the apps shared variables. Here you can edit the default 

       values for things like $colors which sets up the default colours for the application, as well as 

       $list-background-color, $checkbox-ios-background-color-on and so on. The gen- 

       eralideaisthatIonicusesthevariablesdefinedinthisfiletodeterminestylingforalotofcomponents, 

       soitcanbeagreatplacetomakequickchanges. Foralistofallthevariablesthatyoucanoverwrite, 

       take a look at this page 

On top of these .scss files inside of your theme folder, you will also have one for each component you 

create (or at least you should). To refresh your memory, most components you create in Ionic 2 will look 

like this: 

my-component 

     • my-component.ts 

     • my-component.html 

     • my-component.scss 

Wehavetheclassdefinitioninthe .ts file,thetemplateinthe .html fileandanystylesforthecomponent 

in the .scss file. Although it’s not strictly required, you should always create the .scss file for any 

components that have styling, rather than just defining the style in the app.core.scss file. If you use the 

auto generate commands the Ionic CLI provides then the .scss file will be created automatically for you 

anyway. 

Why? Wellyou could justputallofyourstylesinthe app.core.scss fileandeverythingwouldworkexactly 

the same, but there’s two major benefits to splitting your styles up in the way I described above: 

Organisation –Splittingyourcodeupinthiswaywillkeepthesizeofyourfilesdown,makingitaloteasier 

to maintain. Since all of the styles for a particular component can be found in that components .scss file, 

you’ll never have to search around much. 

Modularity – one of the main reasons for the move to this component style architecture in Angular 2 and 

Ionic2ismodularity. Before,codewouldbeveryintertwinedandhardtoseparateandreuse. Now,almost 

                                                        86 

----------------------- Page 88-----------------------

allthecoderequiredforaparticularfeatureiscontainedwithinitsownfolder,anditcouldeasilybereused 

and dropped into other projects. 

Now that we’ve gone over the theory, let’s look at how to actually start styling our Ionic 2 applications. 

Methods for Theming an Ionic 2 Application 

I’m going to cover a few different ways you can alter the styles in your application. It may seem a little 

unclearwhatwaytodothings,becauseinalotofcasesyoucouldachievethesamethingmultipledifferent 

ways. In general, you should try to achieve what you want to do without creating custom styles (which 

we will cover last here). Instead you should first try using the pre-defined attributes or overriding SASS 

variables. Ifitcannotbedoneanyotherway,thenlookintocreatingyourowncustomstyles. Don’tworry 

too much though, just try to keep things as simple as you can. 

1. Attributes 

Oneoftheeasiestwaystochangethestyleofyourapplicationistosimplyaddanattributetotheelement 

you’re using. As I mentioned above, SASS is used to define some colours, and these are: 

     • primary 

     • secondary 

     • danger 

     • light 

     • dark 

     • favorite 

which you can see defined in the app.variables.scss file: 

$colors :  ( 

   primary :         #387ef5 , 

   secondary :       #32db64 , 

   danger :          #f53d3d , 

                                                         87 

----------------------- Page 89-----------------------

   light :          #f4f4f4 , 

   dark :           #222, 

   favorite :       #69BB7B 

); 

Asyoucanseeabove,Ionicprovidessomedefaultsforwhatthesecoloursare,butyoucanalsooverride 

eachofthesetobeanycoloursyouwant. Soifyouaddthe primary attributetomostelementsitwillturn 

blue,orifyouaddthe danger attributeitwillbearedcolour. Butifyoumodifiedthesethen primary could 

make things purple and danger could make things pink. 

To give you an example, if I wanted to use the secondary colour on a button I could do this: 

<button  color="secondary"></button> 

or if I wanted to use the secondary colour on a the nav bar I could do this: 

<ion-navbar  color="secondary"></ion-navbar> 

Keep in mind that these attributes aren’t limited to just changing the colour of elements, some attributes 

will also change things like the position: 

<ion-navbar  color="secondary"> 

   <ion-buttons  end> 

      <button  ion-button  color="primary">I 'm  a  primary  coloured button  in  the 

          end  position  of  the  nav  bar</button> 

   </ion-buttons> 

</ion-navbar> 

The example above uses the end attribute to decide where the buttons should appear. Also notice that 

weusethe ion-button attributewiththebuttonhere,thislet’sIonicknowthatwewanttousetheIonic 

styling for the button. We could also control whether or not a list should have borders: 

<ion-list  no-lines></ion-list> 

or even whether a list item should display an arrow to indicate that it can be tapped: 

                                                     88 

----------------------- Page 90-----------------------

<ion-item  detail-none></ion-item> 

There’s a bunch more of these attributes, so make sure to poke around the documentation when you are 

usingIonicsinbuiltcomponents. Theno-linesattributeisarealeasywaytoremovelinesfromalist,butif 

you didn’t know this attribute existed (which is quite possible) then you’d likely end up creating your own 

custom styles unneccesarily. This is why I recommend trying to do things with attributes first if you can, 

because you could save yourself a lot of effort. 

2. SASS Variables 

ThenextmethodyoucanusetocontrolthestyleofyourapplicationistochangethedefaultSASSvariables 

(like editing the $colors we talked about above). These are really handy because it allows you to make 

appwidestylechangestospecificthings. ItouchedonSASSvariablesbefore,butbasicallyinyour .scss 

files you can do something like this: 

$my-variable : red ; 

and then you could reference $my-variable anywhere in the .scss file. So for example if you wanted 

to make the background colour on 20 different elements red, rather than doing: 

background-color : red ; 

for all of them, you could instead do this: 

background-color : $my-variable ; 

The benefit of this is that now if you wanted to change the background color from red to green, all you 

have to do is edit that one variable – not every single class you have created. This is why you’ll find that 

variables are named in the manner of primary and danger rather than specifically blue and red. There 

may come a time when you want to change your primary colour to be purple, but if you give variables 

specificnameslike $my-blue-color andyouchangeittobepurpleit’sgoingtomakeyourcodepretty 

confusing. 

                                                      89 

----------------------- Page 91-----------------------

You probably won’t be creating many of your own variables, but Ionic defines and uses a bunch of these 

variables, and you can easily overwrite them to be something else. Let’s take a look at a few: 

     • $background-color 

     • $link-color 

     • $list-background-color 

     • $list-border-color 

     • $menu-width 

     • $segment-button-ios-activated-transition 

You can look at the documentation for more information on these and what they default to, but it’s pretty 

clear by their name what they do. As you can see by the last example there, they even get very specific. 

Editingthesevariablesisreallysimple,justopenapp.variable.scss andinsertyourowndefinitions. Here’s 

an example app.variable.scss from one of the applications in this book: 

$colors :  ( 

   primary :        #387ef5 , 

   secondary :      #32db64 , 

   danger :         #f53d3d , 

   light :          #f4f4f4 , 

   dark :          #222, 

   favorite :       #69BB7B 

); 

$list-background-color :  #fff ; 

$list-ios-activated-background-color :  #3aff74 ; 

$list-md-activated-background-color :  #3aff74 ; 

$checkbox-ios-background-color-on :  #32db64 ; 

$checkbox-ios-icon-border-color-on :  #fff ; 

                                                    90 

----------------------- Page 92-----------------------

$checkbox-md-icon-background-color-on :  #32db64 ; 

$checkbox-md-icon-background-color-off :  #fff ; 

$checkbox-md-icon-border-color-off :  #cecece; 

$checkbox-md-icon-border-color-on :  #32db64 ; 

 Inthisexamplesomeofthedefaultcolourshavebeenchanged,andsomeoverridesforspecificstyleson 

both iOS and Android are provided. 

 Notice the use of md here, this stands for material design and is used for Android. Ionic 2 seamlessly 

adapts to the conventions of the platform it is running on with little to no style changes required from you 

– for Android this means material design is used. 

The great thing about editing these default SASS variables is that you can, with one change, make all the 

changes necessary everywhere in the app. Some variables use the values of other variables, so if you 

wantedtojustdothismanuallywithCSSyouwouldprobablyneedtomakealotofeditstogettheeffect 

you wanted. 

3. Configuration 

Another convenient way to change the styling of your application is through the Config object that you 

can provide to IonicModule in app.module.ts. 

 In general this is used for setting app wide defaults like the placement of buttons and tabs, the style of 

iconstobeused,transitionsandsoon. Usuallyit’sbesttoleavetheseunalteredunlessyouhaveaspecific 

reasonforchangingit,sinceIonicwilladapttotheconventionsoftheplatformitisrunningonautomatically 

- messing with the config could break this. 

Sometimes you will want to force things to be a certain way though, and the Config can be a good way 

to do that. Here’s an example of what it might look like: 

 IonicModule .forRoot (MyApp ,  { 

      backButtonText :  'Go  Back ', 

      iconMode :  'ios ', 

                                                     91 

----------------------- Page 93-----------------------

      modalEnter :  'modal-slide-in ', 

      modalLeave :  'modal-slide-out ', 

      tabbarPlacement :  'bottom ', 

      pageTransition :  'ios ' 

}) 

and if you wanted to force iOS to use Material Design you could set the mode using the Config options: 

IonicModule .forRoot (MyApp ,  { 

      mode :  'md ' 

}) 

Again, I’d stress against doing something like this unless you have a good reason. You might like and be 

used to material design if you’re an Android user, but your users on iOS (and vice versa) will not have the 

sameviewasyou. Withthatinmind,theConfigalsoallowsyoutoconfigurethingsspecificallyforspecific 

platforms like this: 

IonicModule .forRoot (MyApp ,  { 

      tabbarPlacement :  'bottom ', 

      platforms :  { 

       ios :  { 

          tabbarPlacement :  'top ', 

       } 

      } 

}) 

For more information on the Config object, take a look at the documentation. 

4. Custom Styles 

Before we talked about using attributes to change the colours of elements. Given that you can override 

these attributes to whatever you like, it’s a good approach to set the primary, secondary, danger etc. 

                                                     92 

----------------------- Page 94-----------------------

variables to match the colour palette of your design, and then use those to set the styles of elements, 

rather than defining custom CSS classes. 

But, sometimes there will come a time where you need to define some plain old CSS classes to achieve 

whatyouwant. Youcaneitherdefinethesecustomclassesin global.scss iftheclasswillbeusedthrough- 

outtheapplication,orinanindividualcomponents .scss fileifitisonlygoingtobeusedforonecompo- 

nent. 

Ofcourse,youcanalsodefinecustomstylesontheelementdirectlybyusingthestyletag,butmakesure 

you use this sparingly. 

As you can see, there’s a few different ways you can change the styling of your Ionic 2 applications. In 

general, it’s best to do as little as possible to achieve what you need. Try to achieve as much as you can 

with attributes and SASS variables, because it will make your life easier. 

AsImentionedbefore,IonicseamlesslyadaptstotheUIconventionsofbothiOSandAndroid,sothemore 

“hacky”or“bruteforce”yoursolutionforstylingis,thegreaterchanceyouhaveofbreakingthisbehaviour. 

                                                     93 

----------------------- Page 95-----------------------

Lesson 8: Navigation 

If you come from an Ionic 1 or Angular 1 background, then you would be used to handling navigation 

through routing with URLs, states and so on. The focus in Ionic 2 though is using a navigation stack, 

which involves pushing views onto the navigation stack and popping them off. Before we get into the 

specificsofhowtoimplementthisstyleofnavigationinIonic2,let’strytogetaconceptualunderstanding 

of how it works first. 

Pushing and Popping 

Imagineyour rootpage isapieceofpaperthathasapictureofacatonit,andyouputthatpieceofpaper 

on a table. It is the only piece of paper currently on the table and you are looking down on it from above. 

Since it is the only piece of paper on the table right now, of course you can see the picture of the cat: 

Nowlet’ssayyouwanttolookatadifferentpieceofpaper(i.e.gotoadifferentpage),todothatyoucan 

push it onto the stack of papers you have. Let’s say this one is a picture of a dog, you take that piece of 

paper and place it over the top of the picture of the cat: 

                                                      94 

----------------------- Page 96-----------------------

The cat is still there, but we can’t see it anymore because it is behind the dog. Let’s take it even further 

and say that now you want to push another piece of paper, a cow, it would now look like this: 

Both the cat and the dog are still there, but the cow is on top so that is what we see. Now let’s reverse 

                                                      95 

----------------------- Page 97-----------------------

thingsabit. Sinceallofthepiecesofpaperarestackedintheordertheywereaddedwecaneasilycycle 

back through them by popping. If you want to go back to the picture of the dog you can pop the stack 

of papers, removing the piece of paper that is currently on top (the cow). If you want to go back to the 

pictureofthecatyoucan pop thestackofpapersoncemoretoremovethepieceofpaperthatisnowon 

top (the dog). Now we’re back to where we started. 

I’msureyoucanseehowthisstyleofnavigationisconvenientformaintaininghistoryanditmakesalotof 

sense when navigating to child views, but it doesn’t always make sense to push or pop. Sometimes you 

willwanttogotoanotherpagewithouttheabilitytogodirectlybacktothepagethattriggeredthechange 

(a login screen that leads to the main app for example, or even just different sections of an app available 

through a menu). 

In this case, we could change the root page which, given our pieces of paper on the table analogy, is like 

disregarding the other stack of papers we have and just focusing on a new piece of paper on the table: 

In the example above, I’ve set the cow page as the root page, so rather than being on top of the other 

pages, it’s all by itself. 

                                                          96 

----------------------- Page 98-----------------------

Atfirst,itmaybehardtounderstandwhetheryoushouldsetthe rootpage tonavigatetoadifferentpage 

or push the view. In general, if the view you want to switch to is a child of the current view, or if you want 

theabilitytonavigatebacktothepreviousviewfromthenewview,youshould push. Forexample,ifIwas 

viewing a list of artists and tapped on one I would want to push the details page for that artist. If I was 

goingthroughamulti-pageformandclicked‘Next’togotopage2oftheform,Iwouldwanttopushthat 

second page. 

Iftheviewyouareswitchingtoisnotachildofthecurrentview,oritisadifferentsectionoftheapplication, 

then you should instead change the root page. For example, if you have a login screen that leads to 

the main application you should change the root page to be your main logged in view once the user 

has successfully authenticated. If you have a side menu with the options Dashboard, Shop, About and 

Contact you should set the root page to whichever of these the user selects. 

Keepinmindthattherootpageisdifferenttotherootcomponent,typicallytherootcomponent(whichis 

definedin app.component.ts)willdeclarewhattherootpageis–therootpagecanbechangedthroughout 

the application, the root component can not. 

Basic Navigation in Ionic 2 

Ok, we’ve gone through the theory so now we’re going to get into a more practical Ionic 2 example and 

look at how to push, pop, set the root page and even how to pass data between pages. 

Animportantpartofallthisisthe NavControllerwhichisprovidedbyIonic. Youwilloftenseethisimported 

in Ionic 2 applications: 

import  {  Component  }  from         '@angular/core '; 

import  {  NavController  }  from          'ionic-angular '; 

@Component ({ 

   selector :  'home-page ', 

   templateUrl :  'home .html ' 

}) 

                                                       97 

----------------------- Page 99-----------------------

export  class HomePage  { 

   constructor(public  nav : NavController)  { 

   } 

} 

Weinjectthe NavController andareferencetoitiscreatedsothatwecanuseitanywherewithintheclass. 

Asyoumighthavebeenabletoguess,theNavControllerhelpsuscontrolnavigation-solet’stakealook 

at how to do just that by pushing and popping. 

Topushapage,whichwilltakeapageandputitontopofthenavigationstack(whichsetsitasthecurrent 

page), you can do something like this: 

this .nav .push (SecondPage); 

This uses the reference to the NavController we created before, and all you need to supply to it is a 

reference to the page that you want to navigate to, which you will need to make sure you also import at 

the top of the file, like this: 

import  {SecondPage}  from          '../second-page/second-page '; 

as well as adding it to both the entryComponents and declarations arrays in app.module.ts and 

that’s it, your app should switch to the new page whenever the push code is triggered. When you push a 

page, a ‘Back’ button will automatically be added to the nav bar (assuming you have one), so you often 

don’t need to worry about using pop to navigate back to the previous page since the ‘Back’ button does 

this automatically for you. 

Theremaybecircumstanceswhereyoudowanttomanuallypopapageoffofthenavigationstackthough, 

in which case you can use this: 

this .nav .pop (); 

                                                       98 

----------------------- Page 100-----------------------

Easy enough right? As I mentioned before there is still another way to change the page and that is by 

setting the root page. If you take a look at your app.ts file you will notice the following line: 

rootPage : any  =  MyPage ; 

Declaring rootPage intherootcomponentwillsettherootpage,andthat’sbecausethetemplateforthe 

root component looks like this: 

<ion-nav  [root]="rootPage"></ion-nav> 

So we’re setting the root property on <ion-nav> to be whatever rootPage is defined as. To change 

the root page at any point throughout the application, you can use our friend the NavController – all you 

have to do is call the setRoot function like this: 

this .nav .setRoot(SecondPage); 

Passing Data Between Pages 

A common requirement of mobile applications is to be able to pass data between pages. One really 

common example is when using the “Master Detail” pattern, which is basically where you have a list of 

itemsandthenyouclickononetogotoanotherpagewhereitdisplaysmoredetailsaboutthatitem. When 

navigating to the detail page, we’re going to need to know which item we are displaying data for, which 

will involve passing in data from the previous page. In Ionic 2 this can be done using NavParams. First, 

youmustpassthroughthedatayouwantwithinthepushcall(thiscanalsobedonewhenusingsetRoot): 

this .nav .push (SecondPage ,  { 

      thing1 : data1 , 

      thing2 : data2 

}); 

This is exactly the same as what we were doing before, except now there is an extra parameter which is 

anobjectthatcontainsthedatawewanttosendthroughto SecondPage. Thenonthereceivingpagewe 

need to import NavParams and inject it into our constructor: 

                                                      99 

----------------------- Page 101-----------------------

import  {  Component  }  from      '@angular/core '; 

import  {  NavController , NavParams  }  from          'ionic-angular '; 

@Component ({ 

   selector :  'second-page ', 

   templateUrl :  'second-page .html ' 

}) 

export  class  SecondPage  { 

      constructor(nav : NavController , navParams : NavParams){ 

      } 

} 

Then you can grab the data that was passed through by doing the following: 

this .navParams .get ('thing1 '); 

Navigation Components 

Some of the components that Ionic provides also effect navigation in some way. These aren’t really core 

navigation concepts, but they will have an impact on navigation in your application. So let’s cover what 

these are and when you might want to use them. 

Modals 

You’re probably familiar with the concept of a modal already. In web development, a modal is basically 

someboxthatpopsuponthescreenandcoversthecontentbehindit. Usuallymodalshavethe“lightbox” 

style, with a blacked out background and the focus on the content area. 

                                                   100 

----------------------- Page 102-----------------------

AModalinIonicissimilar,inthatitpopsupontopofyourcontent,butitdoesn’tactuallylookanydifferent 

to a normal page. Generally you would want to use a modal, rather than pushing a page, when you want 

to give the user the ability to launch and then dismiss (close) a view, rather than navigating back to the 

previous page. 

One cool thing about Modals are that they give you the ability to pass some data back to the page that 

launched it when the Modal is dismissed. For example, you can create a Modal like this (remember to 

import and inject ModalController as well!): 

let myModal  =  modalCtrl .create(MyPage); 

myModal .present (); 

Notice that the modal is “presented”, rather than being pushed onto the navigation stack. Now if we 

wanted to allow some data to be passed back from that modal, we could add an onDismiss handler to 

it before presenting it: 

let myModal  =  modalCtrl .create(MyPage); 

myModal .onDismiss(data  =>  { 

      console .log(data); 

}); 

myModal .present (); 

Now when the modal is dismissed it will pass back a data object that we can do something with. To 

dismiss a modal, all you have to do is call the following code inside of the Modal: 

this .view .dismiss (); 

where this .view is a reference to the ViewController which is kind of like the NavController and also 

needs to be imported and injected into your constructor. If we want to pass data back to that onDismiss 

handler though, we will need to do something like this: 

                                                        101 

----------------------- Page 103-----------------------

let  data  =  { 

   thing1 : "value1", 

   thing2 : "value2" 

}; 

this .view .dismiss (data); 

Now the data object will be passed back to the onDismiss handler from the page that launched the 

modal. 

Tabs 

Tabs are a very popular component that have a big impact on how navigation works in your application. 

Using tabs is really simple, basically in your template you will create something like this: 

<ion-tabs> 

   <ion-tab  [root]="tab1Root" tabTitle="Tab  1" tabIcon="navigate"></ion-tab> 

   <ion-tab  [root]="tab2Root" tabTitle="Tab  2" tabIcon="person"></ion-tab> 

   <ion-tab  [root]="tab3Root" tabTitle="Tab  3" tabIcon="bookmarks"></ion-tab> 

</ion-tabs> 

and then in your class definition you just define the pages to be used as the tabs like this: 

tab1Root : any  =  TabOne ; 

tab2Root : any  =  TabTwo ; 

tab3Root : any  =  TabThree ; 

constructor(){ 

} 

                                                  102 

----------------------- Page 104-----------------------

Noticethateachtabhasitsown rootpage. Youcanthinkofswitchingtabsasswitchingbetweendifferent 

rootpages,andthenyoucanpushandpoppagesineachtab. Withatablayout,youcanswitchbetween 

different tabs, but each tab will still maintain its own history. 

Sidemenu 

A side menu doesn’t really do anything out of the ordinary in terms of navigation, the side menu is really 

justaUIelementbutit’saconvenient,andcommon,placetoaddbuttonsthatallowtheusertonavigateto 

anotherpage(theactualswitchingofpagesisjustdonemanuallywith setRoot or push though). Addinga 

sidemenutoyourapplicationissupereasy,youjustneedtomodifythetemplateofyourrootcomponent 

to include it like this: 

<ion-menu     [content]="content"> 

   <ion-content> 

      <ion-list> 

        <button  ion-item  (click)="openPage(homePage)"> 

           Home 

        </button> 

      </ion-list> 

   </ion-content> 

</ion-menu> 

<ion-nav  id="nav" #content          [root]="rootPage"></ion-nav> 

Weuse <ion-menu> tocreateamenu,andwealsohavetotellitwhattoattachitselfto. Thisiswhyweset 

the [content] property to content which is a reference to the local variable we created on the <ion-nav> 

by adding #content. So this is basically saying that the <ion-nav> is our main content area, and we 

want the menu to attach to that. 

ThereisabittolearnaboutnavigationinIonic2,butonceyou’vegotahandleonthebasicsdiscussedin 

                                                   103 

----------------------- Page 105-----------------------

this lesson you should be able to get by in most circumstances without too much trouble. 

                                                   104 

----------------------- Page 106-----------------------

Lesson 9: User Input 

Notallmobileapplicationsrequireuserinput,butmanydo. Atsomepoint,you’regoingtowanttocollect 

somedatafromyourusers. Thatmightbesometextforastatusupdate,theirnameandshippingaddress, 

a search term, a title for their todo list item or anything else. 

Whatever the data is, the user is going to be entering it into one of the templates in your application. To 

give you an example, in Ionic 2 we could create a form in our template with the following code: 

<ion-list> 

   <ion-item> 

     <ion-label>Username</ion-label> 

     <ion-input type="text"></ion-input> 

   </ion-item> 

   <ion-item> 

     <ion-label>Password</ion-label> 

     <ion-input type="password"></ion-input> 

   </ion-item> 

</ion-list> 

which would produce a simple login form that looks like this: 

                                                  105 

----------------------- Page 107-----------------------

This would allow the user to enter some information into these input fields. However, we need to know 

how to get the data that is being entered into our .html template and make use of it in our .ts class. In 

this lesson we are going to discuss a couple of different ways you can do that. 

Two Way Data Binding 

This concept will be very familiar to you if you’ve previously used Ionic 1, if not then don’t worry because 

it’s pretty straightforward concept. Two way data binding essentially links a value of an input field in the 

template, to the value of a variable in the class. Take the following example: 

Template: 

<ion-input type="text"           [(ngModel)]="myValue "></ion-input> 

                                                     106 

----------------------- Page 108-----------------------

Class: 

myValue : string; 

constructor(){ 

} 

If we changed the value of the input in the template, then the this .myValue variable in the class will 

be updated to reflect that. If we change the value of this .myValue in the class, then the input in the 

templatewillbeupdatedtoreflectthat. Byusing ngModel thetwovaluesaretiedtogether,ifonechanges, 

the other changes. 

Let’s say you also had a submit button in your template: 

<ion-input type="text"          [(ngModel)]="myValue "></ion-input> 

<button  ion-button        (click)="logValue()">Log  myValue !</button> 

When the user clicks the button we want to log the value they entered in the input to the console. Since 

the button calls the logValue function when it is clicked, we could add that to our class: 

logValue(){ 

      console .log(this .myValue); 

} 

This function will grab whatever the current value of the input is and log it out to the screen. Rather than 

logging it out to the screen, you could also do something useful with it. This can be a convenient way to 

handle input, because we don’t need to worry about passing the values through a function, we can just 

grab the current values whenever we need. 

Itbecomesabitcumbersomewhenwehavealotofinputsthough,soit’snotalwaystheperfectsolution. 

When dealing with more complex forms, we also have another option, which we will discuss now. 

                                                    107 

----------------------- Page 109-----------------------

Form Builder 

Form Builder is a service provided by Angular 2, which makes handling forms a lot easier. There’s quite a 

lot Form Builder can do but at its simplest it allows you to manage multiple input fields at once and also 

provides an easy way to validate user input (i.e. to check if they actually did enter a valid email address). 

To use Form Builder it needs to be imported (along with FormGroup) and injected into your constructor, 

e.g: 

import  {  Component  }  from       '@angular/core '; 

import  {  NavController  }  from         'ionic-angular '; 

import  {  FormBuilder , FormGroup , Validators  }  from               '@angular/forms '; 

@Component ({ 

   templateUrl :  'my-details .html ', 

}) 

export  class MyDetailsPage  { 

   constructor(public  formBuilder : FormBuilder)  { 

   } 

} 

Notice that Validators are also being imported here, which are what allow you to validate user input with 

Form Builder. Let’s cover a really quick example of how you can use Form Builder to build a form. The 

mostimportantdifferencewiththismethodisthatyourinputswillhavetobesurroundedbya <form> tag 

with the formGroup property defined: 

<form    [formGroup]="myForm "  (submit)="saveForm($event)"> 

   <ion-item> 

                                                    108 

----------------------- Page 110-----------------------

     <ion-label  stacked>Field  1</ion-label> 

     <ion-input  formControlName="field1" type="text"></ion-input> 

   </ion-item> 

   <ion-item> 

     <ion-label  stacked>Field  2</ion-label> 

     <ion-input  formControlName="field2" type="text"></ion-input> 

   </ion-item> 

   <ion-item> 

     <ion-label  stacked>Field  3</ion-label> 

     <ion-input  formControlName="field3" type="text"></ion-input> 

   </ion-item> 

   <button  type="submit">Save  Form</button> 

</form> 

You will also notice in the example above that we have defined the formControlName attribute on all 

of our inputs, this is how we will identify them with Form Builder in just a moment. Of course we need a 

waytosubmittheform,sowe’veaddedasubmitbuttonandhavealsoaddeda (submit) listeneronthe 

form which calls the saveForm function. We will define that function in a moment, but for any of this to 

work we first need to initialise the form in the constructor function for the page. This will look something 

like this: 

this .myForm  =  formBuilder .group ({ 

   field1 :  [''], 

   field2 :  [''], 

   field3 :  [''] 

}); 

                                                  109 

----------------------- Page 111-----------------------

Wesimplysupplyallofthefieldsthatareintheform(usingthe formControlName nameswegavethem) 

and provide the fields with an initial value (which we have left blank in this case). You can also supply a 

second value to each field to define a Validator if you like, e.g: 

this .myForm  =  formBuilder .group ({ 

   field1 :  ['', Validators .required], 

   field2 :  ['', Validators .required], 

   field3 :  [''] 

}); 

Also note that the variable this .myForm has to be the same as the value we supply for [formGroup] 

in the template. Now let’s look at that saveForm function. 

saveForm(event){ 

      event .preventDefault (); 

      console .log(this .myForm .value); 

} 

Wepassthroughthesubmiteventandthencall preventDefault sothatthedefaultactionforsubmitting 

a form doesn’t occur, we just want to handle it ourselves with this function. To grab the details that the 

userenteredintotheformwecansimplyuse this .myForm .value whichwillcontainallthevaluesthat 

the user entered. 

Setting up forms using Form Builder is a little more complex, but it’s much more powerful and worth the 

effort for more complex forms. For more simple requirements, using [(ngModel)] is fine in most cases. 

                                                     110 

----------------------- Page 112-----------------------

Lesson 10: Saving Data 

Let’s say you’ve create an Ionic 2 application where users can create shopping lists. A user downloads 

your application, spends 5 minutes adding their list and then closes the application… and all their data is 

gone. 

Quiteoftenwhencreatingmobileapplicationsyouwillwanttostoredatathattheusercanretrievelater. A 

lot of the time this is done by storing the data somewhere that can be accessed through a remote server 

(think Facebook, Twitter etc.) which would require an Internet connection and fetching the data remotely 

(which we will discuss in the next lesson). In many cases though, we may also want to store some data 

locally on the device itself. 

There’s a few reasons we might want to store some data locally: 

     • Theapplicationiscompletelyselfcontainedandthereisnointeractionwithotherusers,soalldata 

       can be stored locally 

     • We need to store data locally for some specific functionality like remembering logged in users 

     • We could skip unnecessary calls to a server by storing preference settings locally 

     • We could skip unnecessary calls to a server by caching other data locally 

     • We want to sync online and offline data so that the user can continue using the application even 

       when they are offline (Evernote is a good example of this) 

HTML5 applications run in the browser, so we don’t have access to the storage options that native appli- 

cations do. We do still have access to the usual browser storage options that websites have access to 

though like Local Storage, Web SQL (deprecated) and IndexedDB. These options might not always be 

ideal(forreasonsIwillcovershortly),butwecanalsoaccessnativedatastoragebyusingCordovawhich 

can overcome the shortfalls of browser based data storage. 

Thereareplentyofdifferentoptionsoutthereforstoringdatalocally,butwearegoingtofocusonthemain 

ones when it comes to Ionic 2 applications, and they are Local Storage and SQLite. 

                                                        111 

----------------------- Page 113-----------------------

Local Storage 

This is the most basic storage option available, which allows you to store up to 5MB worth of data in the 

users browser. Remember, Ionic 2 applications technically run inside of an embedded browser. 

Local storage gets a bit of a bad wrap, and is generally considered to be unreliable. I think the browsers 

local storage can be a viable option and it is reasonably stable and reliable, but, it is possible for the data 

to be wiped, which means for a lot of applications it’s not going to be a great option. Even if it worked 

99% of the time, that’s still not good enough for storing most types of data. 

In general, you should only use it where data loss would not be an issue, and it shouldn’t ever be used 

to store sensitive data since it can be easily accessed. One example of where local storage might be a 

suitable option is if you wanted to store something like a temporary session token. This would allow you 

totellifauserwasalreadyloggedinornot,butifthedataislostit’snotreallyabigdealbecausetheuser 

will just need to enter in their username and password again to reauthenticate. 

Ifyouarejustusinglocalstoragetocachedatafromaserveritwouldalsonotbeabigissueifthedatais 

lost since it can just be fetched from the server again. 

Local Storage is a simple key-value system, and can be accessed through the globally available 

localStorage object: 

localStorage .setItem('someSetting ',  'off '); 

let  someSetting  =  localStorage .getItem ('someSetting '); 

This is the native (as in native to web browsers, not iOS or Android native) way to set and retrieve local 

storage data. 

SQLite 

SQLite is basically an embedded SQL database that can run on a mobile device. Unlike a normal SQL 

databaseitdoesnotneedtorunonaserver,anddoesnotrequireanyconfiguration. SQLitecanbeutilised 

                                                      112 

----------------------- Page 114-----------------------

by both iOS and Android applications (as well as others), but the SQLite database can only be accessed 

natively, so it is not accessible by default to HTML5 mobile apps. 

We can however use a Cordova to easily gain access to this functionality. Simply run the following com- 

mand in your project to install it: 

ionic  plugin  add  https ://github .com/ litehelpers/Cordova-sqlite-storage 

The main benefits of using SQLite are that it: 

     • Provides persistent data storage 

     • There is no size limitation on how much can be stored 

     • It provides the SQL syntax, so it is a very powerful tool for managing data 

AlthoughtherearesomedifferencesinsupportedcommandsbetweenSQLandSQLite,itisalmostexactly 

the same. Here’s an example of how you might execute some simple queries in SQLite: 

var  db  =  window .sqlitePlugin .openDatabase({name : "my .db"}); 

db .transaction (function (tx)  { 

   tx .executeSql('DROP  TABLE  IF  EXISTS  test_table '); 

   tx .executeSql('CREATE  TABLE  IF  NOT  EXISTS  test_table                 (id  integer primary 

        key , data  text , data_num  integer) '); 

   tx .executeSql("INSERT  INTO test_table               (data , data_num) VALUES          (?,?)", 

        ["test",  100], function (tx , res)  { 

      console .log("insertId : " +  res .insertId  +             " --  probably      1"); 

      console .log("rowsAffected : " +  res .rowsAffected  +                 " --  should  be     1"); 

   },  function (e)  { 

      console .log("ERROR : " +  e .message); 

   }); 

}); 

                                                      113 

----------------------- Page 115-----------------------

The example above looks pretty freaky, but if you’re familiar with SQL then at least some of it should look 

familiar. This is the standard way to use SQLite with Cordova, but Ionic also provides its own service for 

using SQLite. 

Ionic Storage 

Fortunately, for most storage requirements we don’t really need to worry about the implementation de- 

tails. Ionicprovidesit’sownstorageservicethatwillautomaticallymakeuseofthebestavailablestorage 

mechanism(whetherthatisplainoldlocalstorage,WebSQL,IndexedDBorSQLite). Itprovidesuswitha 

consistent API to use no matter which storage mechanism is being used underneath. 

To use it, all you have to do it add it to your app.module.ts file by importing it: 

import  {  Storage  }  from       '@ionic/storage '; 

and adding it to the provider array: 

providers :  [Storage] 

Then you can just inject it into whatever class you need. Take this provider as an example: 

import  {  Storage  }  from       '@ionic/storage '; 

import  {  Injectable  }  from        '@angular/core '; 

@Injectable () 

export  class Data  { 

   constructor(public  storage : Storage){ 

   } 

   getData (): any  { 

      return  this .storage .get ('checklists '); 

                                                     114 

----------------------- Page 116-----------------------

   } 

   save(data): void  { 

     let  newData  =  JSON .stringify(data); 

     this .storage .set('checklists ', newData); 

   } 

} 

Wesimplycall this .storage .set tostoredataonaparticularkey(inthiscase checklists)andthen 

we can retrieve that same data later by accessing that key through this .storage .get. 

If your data storage requirements are more complex this may not be the perfect option, but for many 

scenarios this provides a nice simple way to store the data we need. 

                                                  115 

----------------------- Page 117-----------------------

Lesson 11: Fetching Data, Observables and Promises 

Althoughsomemobileapplicationsarecompletelyselfcontained(likecalculators,soundboards,todolists, 

photoapps,flashlightapps),manyapplicationsrelyonpullingindatafromanexternalsourcetofunction. 

Facebookhastopullindatafornewsfeeds,Instagramthelatestphotos,weatherappsthelatestweather 

forecasts and so on. 

In this section we are going to cover how you can pull external data into your Ionic applications. Before 

we get into the specifics of how to retrieve some data from a server somewhere, I want to cover a little 

more theory on a few specific things that we are going to be making use of. 

Mapping and Filtering Arrays 

The map and filter functions are very powerful and allow you to do a lot with arrays. These are not fancy 

new ES6 or Angular 2 features either, they’ve been a part of JavaScript for a while now. 

Toputitsimply, maptakeseveryvalueinanarray,runsthevaluethroughsomefunctionwhichmaychange 

thevalue,andthenplacesitintoanewarray. It maps everyvalueinanarrayintoanewarray. Togiveyou 

an example of where this might be useful, you might have an array of filenames like this: 

 ['file1 .jpg ',  'file2 .png ',  'file3 .png '] 

You could then map those values into a new array that contains the full path to the files: 

 ['http ://www .example .com/file1 .jpg ',  'http ://www .example .com/file2 .png ', 

     'http ://www .example .com/file2 .png '] 

Doing that might look something like this: 

let  oldArray  =  [ 'file1 .jpg ',  'file2 .png ',  'file3 .png ']; 

let  newArray  =  oldArray .map ((entry)  =>  { 

   return    'http ://www .example .com/ ' +  entry ; 

                                                    116 

----------------------- Page 118-----------------------

}); 

So we supply the map with a function that returns the modified value. The function that we provide will 

have each value passed in as a parameter. 

A filter isverysimilartoa map,butinsteadofmappingeachvaluetoanewarray,itonlyaddsvaluesthat 

meet a certain criteria to the new array. Let’s use the same example as before, but this time we want to 

return an array that only contains .png files. To do that, we would use filter like this: 

let  oldArray  =  [ 'file1 .jpg ',  'file2 .png ',  'file3 .png ']; 

let  newArray  =  oldArray .filter ((entry)  =>  { 

   return  entry .indexOf('.png ')  >  -1; 

}); 

Supposewestillwanttohavethefullpathaswellthough. Fortunately,wecanquiteeasilychain filter and 

map like this: 

let  oldArray  =  [ 'file1 .jpg ',  'file2 .png ',  'file3 .png ']; 

let  newArray  =  oldArray .filter ((entry)  =>  { 

   return  entry .indexOf('.png ')  >  -1; 

}).map ((entry)  =>  { 

   return    'http ://www .example .com/ ' +  entry ; 

}); 

Sonowwearefirstfilteringouttheresultswedon’twant,andthenmappingthemtoanewarraywiththe 

full file path. The result will be an array containing the full paths of only the two . 
                                                                                     png files. I’m going to 

leaveittherefornow,butwhenwegetintoanexampleofhowtofetchdatasoonitwillbecomeveryclear 

why it was worth explaining how these work. 

                                                     117 

----------------------- Page 119-----------------------

Observables and Promises 

If you’ve used Ionic 1 or have a reasonably strong background in Javascript then you would probably be 

familiar with Promises, but far fewer people are familiar with Observables. Observables are one of the 

core new features included Angular 2 (provided by RxJS) so it is important to understand what they are 

and how they are different to Promises (they do look and behave very similar). 

BeforewegetintoObservables,let’scoverwhataPromiseisataveryhighlevel. Promisescomeintoplay 

when we are dealing with asynchronous code, which means that the code is not executed one line after 

another. In the case of making a HTTP request for data, we need to wait for that data to be returned, and 

since it might take 1-10 seconds for it to be returned we don’t want to pause our entire application whilst 

we wait. We want our application to keep running and accepting user input, and when the data from the 

HTTP request becomes available to us, then we do something with it. 

A Promise handles this situation, and if you’re familiar with callbacks it’s basically the same idea, just a 

littlenicer. Let’ssaywehaveamethodcalled getFromSlowServer ()thatreturnsapromise,wemight 

use it like this: 

getFromSlowServer ().then ((data)  =>  { 

   console .log(data); 

}); 

We call the then method which a Promise provides, which basically says “Once you have the data from 

the server, do this with it”. In this case we are passing the data returned into a function where we log it 

outtotheconsole. Soourapplicationwillgoaboutdoingwhateverelseithastodoandwhenthedatais 

available it will execute the code above. You could think of it like being at work and writing some report, 

youneedsomeadditionalinformationsoyouaskyourassistanttogofinditforyou,butyoudon’tjustsit 

there and wait for the assistant to get back - you keep writing your report and when the assistant returns 

then you use the information. 

WeunderstandwhataPromiseisnow,sowhat’sanObservableandwhatdoesitdothatPromisesdon’t? 

AnObservableservestheexactsamepurposeasaPromise,butitdoessomeextrastufftoo. Themaindif- 

                                                        118 

----------------------- Page 120-----------------------

ferencebetweenaPromiseandanObservableisthataPromisereturnsasingleresult,but anObservable 

isastreamthancanemitmorethanonevalueovertime. ItmightbeeasiertothinkofObservablesas 

streams, because they are, they are just called Observables because the stream is observable (as in, we 

can detect values that are emitted from the stream). 

An Observable looks a lot like a Promise, but instead of using the then method we use the subscribe 

method. SinceaPromiseonlyreturnsasinglevalue,itmakessensetohavethatvaluereturnedandthen 

dosomething. AsImentioned,anObservableisastreamthatcanemitmultiplevalues,soitmakessense 

to subscribe to it (like your favourite YouTube channel), and run some code every time a value is emitted. 

It might look something like this: 

someObservable .subscribe((result)  =>  { 

   console .log(result); 

}); 

It is obvious that our program would need to wait for data to be returned when making a HTTP request, 

and thus Promises and Observables would be useful. It’s not the only instance of where you will need to 

programasynchronouslythough. Therearesomelessobvioussitutationslikefetchinglocallystoreddata, 

or even getting a photo from the user’s camera, where you would also need to wait for the operation to 

finish before using the data. 

Ifyouwanttogomoreindepthintoeverythingwe’vediscussedabove,Ihighlyrecommendthisinteractive 

tutorial. It introduces RxJS which includes Observables, but also builds up a solid foundation of how to 

use map, filter and other functions. If you’d also like to dive into some more specifics about how an 

Observable differs from a Promise, I highly recommend this egghead.io video. 

Using Http to Fetch Data from a Server 

Ok, you should be armed with all the theory you need now - let’s get into an example. We’re going to 

use the Reddit API to demonstrate here because it is publicly accessible and very easy to use. If you’ve 

purchasedoneofthepackagesforthisbookthatincludestheGiflistapplicationthenwewillbeexploring 

this in a lot more detail later. 

                                                       119 

----------------------- Page 121-----------------------

You can create a JSON feed of posts from subreddits simply by visiting a URL in the following format: 

https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot 

Ifyouclickonthatlink,youwillseeaJSONfeedcontaining10submissionsfromthegifs subreddit,sorted 

bythehotfilter. Ifyou’renotfamiliarwithJSON,Iwouldrecommendreadinguponit here–butessentially 

it stands for JavaScript Object Notation and is a great way to transmit data because it is very readable to 

humans, and is also easily parsed by computers. If you’ve ever created a JavaScript object like this: 

var  myObject  =  { 

      name :  'bob ', 

      age :  '43 ', 

      hair :  'purple ' 

}; 

then you should be able to read a JSON feed pretty easily once you tidy it up a little. But how do we get 

it into our Ionic 2 application? 

The answer is to use the Http service which is provided by Angular 2, and allows you to make HTTP 

requests. Ifyou’renotfamiliarwithwhataHTTPrequestis,basicallyeverytimeyourbrowsertriestoload 

anything (a document, image, a file etc.) it sends a HTTP request to do that. So we can make a HTTP 

request to a page that spits out some JSON data, and pull that into our application. 

First we need to set up the Http service, so let’s take a look at a test page that has that service imported 

and injected into the constructor: 

import  {  Component  }  from         '@angular/core '; 

import  {  Http  }  from       '@angular/http '; 

import     'rxjs/add/operator/map '; 

@Component ({ 

   selector :  'page-one ' 

   template :  'page-one .html ' 

}) 

                                                       120 

----------------------- Page 122-----------------------

export  class  Page1  { 

   constructor(public  http : Http)  { 

   } 

} 

Since we have injected the Http service into our constructor and made it available through this .http 

by using public, we can now make use of it anywhere in this class. Also note that we are importing the 

mapoperatorfromtheRxJSlibrary. AsImentionedbeforemapisafunctionthatisprovidedbydefaulton 

arrays-sowhywouldweneedtoimportitfromsomeweirdlibrary? It’sbecausetheHttpservicedoesn’t 

return an array, it returns an Observable. The RxJS library makes the map function available for us on 

Observables, but we need to import it first. 

Now let’s take a look at how we might make a request to a reddit URL: 

import  {  Component  }  from      '@angular/core '; 

import  {  Http  }  from     '@angular/http '; 

import    'rxjs/add/operator/map '; 

@Component ({ 

   selector :  'page-one ' 

   template :  'page-one .html ' 

}) 

export  class  Page1  { 

   constructor(public  http : Http)  { 

     this .http .get ('https ://www .reddit .com/r/gifs/new/.json?limit=10 ').map (res 

          =>  res .json ()).subscribe(data  =>  { 

           console .log(data); 

                                                   121 

----------------------- Page 123-----------------------

      }); 

   } 

} 

The first part of the call returns us an Observable. Then we make use of the map function, what we’re 

doinghereistakingtheplaintextJSONresponse(whichisjustastring)andconvertingitintoaJavaScript 

object by calling the json ()function. This makes it much more friendly for us to play with. 

IMPORTANT: Remember, Http requests are asynchronous. This means that your code will continue exe- 

cutingwhilstthedataisbeingfetched,whichwouldtakeanywherefromafewmilliseconds,to10seconds, 

to never. So it’s important that your application is designed to deal with this. To give you an example, if 

you were to run the following code: 

this .posts  =  null ; 

this .http .get ('https ://www .reddit .com/r/gifs/top/.json?limit=2&sort=hot ') 

 .map (res  =>  res .json ()).subscribe(data  =>  { 

      this .posts  =  data .data .children; 

}); 

console .log(this .posts); 

You would see null output to the console. But if you were to run: 

this .posts  =  null ; 

this .http .get ('https ://www .reddit .com/r/gifs/top/.json?limit=2&sort=hot ') 

 .map (res  =>  res .json ()).subscribe(data  =>  { 

      this .posts  =  data .data .children; 

      console .log(this .posts); 

}); 

                                                    122 

----------------------- Page 124-----------------------

You would see the posts output to the console, because everything inside of the subscribe function will 

only run once the data has been returned. 

Getting back to our example, after we map the response we chain a subscribe call which allows us to do 

somethingwiththedatathatisemittedfromthestream(Observable). AsImentionedaboveanObservable 

isusefulbecausewecanlistenformultiplevaluesovertime…butwhyuseithere? TheHttpcallisonlyever 

going to return one result, why doesn’t it just use a Promise instead of an Observable and save everyone 

the confusion? 

The reason for a bit of favouritism of Observables over Promises is that an Observable can do everything 

a Promise can, it’s technically better behind the scenes, and it can do extra fancy things that Promises 

can’t. We could set up an interval for example so that the Http call fires every 5 or 10 seconds, we can 

easily set up debouncing which ensures that a request is not fired off too frequently (and subsequently 

making a ton of requests to a server), Observables can cancel old “in flight” requests if a new request is 

made before the result of the old request is returned and a whole bunch of other things. 

Take this example from the Giflist application: 

      this .subredditControl .valueChanges .debounceTime (1000) 

      .distinctUntilChanged ().subscribe(subreddit  =>  { 

        this .subreddit  =  subreddit; 

        if(this .subreddit        !=  ''){ 

           this .changeSubreddit(); 

        } 

      }); 

Inthiscase subredditControl isan Observable. Thevalueofthiscanbecontrolledbytheuserusing 

an input in the application. It’s set up though so that the code inside the subscribe call will only run if 

therehasbeennochangeformorethan1second(byusingdebounceTime)anditwillalsoonlyrunwhen 

a distinct value is supplied. I think this example shows well how a whole bunch of weird and useful stuff 

can be chained before the subscribe call to do a lot of useful things. 

                                                    123 

----------------------- Page 125-----------------------

If you’re looking at the example above and thinking “Wow… Ionic 2 is way too hard and confusing, take 

me back to Ionic 1!” then don’t. This is a pretty advanced example using Observables to demonstrate a 

point, Ionic 2 input handling and two way data binding is just as easy as Ionic 1. 

Observablesareahugetopic,sothereisatontolearn. Don’tfeelintimidatedifyoudon’treallyhavemuch 

of an idea of what’s going on though. Having a better understanding of Observables will help you when 

creating Ionic applications, but they are a reasonably small part of Ionic (well, they are a big part but you 

won’treallyhavetodealwiththemmuch)andyoucangetbyjustfinebyhavingjustabasicunderstanding. 

Fetching Data from your Own Server 

We know how to pull in data using a JSON feed like the one provided by reddit, but what if you want to 

pull in your own data? How can you go about setting up your own JSON feed? 

Going into the detail of how to set up your own API is a bit beyond what I wanted to achieve with this 

lesson, but I would like to give you a high level overview of how it’s done. Basically: 

    1. Make a request from your Ionic application to a URL on your server 

    2. Fetch the data using whatever server side language you prefer 

    3. Output the required data to the page in JSON format 

I’ll quickly walk you through the steps of how you might implement a simple API with PHP, but you could 

use whatever language you want - as long as you can output some JSON to the browser. 

    1. Createafilecalled feed .php thatisaccessibleat http ://www .mywebsite .com/api/feed .php 

    2. Retrievethedata. InthiscaseI’mdoingthatbyqueryingaMySQLdatabasebutthedatacancome 

       from anywhere: 

$mysqli  =  new  mysqli ("localhost",  "username",  "password",  "database"); 

$query  =    "SELECT  *  FROM  table"; 

$dbresult  =  $mysqli->query ($query); 

while ($row  =  $dbresult->fetch_array (MYSQLI_ASSOC)){ 

                                                     124 

----------------------- Page 126-----------------------

      $data []  = array ( 

            'id ' =>  $row ['id '], 

            'name ' =>  $row ['name '] 

      ); 

} 

if($dbresult){ 

      $result  =    "{'success ':true ,  'data ':"  . json_encode ($data)  .  "}"; 

} 

else  { 

      $result  =    "{'success ':false}"; 

} 

    3. Output the JSON encoded data to the browser: 

echo ($result); 

    4. Use http ://www .mywebsite .com/api/feed .php in your http .get () call in your applica- 

       tion 

AsImentionedyoucanusewhateverlanguageandwhateverdatastoragemechanismyouliketodothis. 

Just grab whatever data you need, get it in JSON format, and then output it to the browser. 

This should give you a pretty reasonable overview of how to fetch remote data using Ionic 2 and the Http 

service. The syntax and concepts might be a little tricky to get your head around at first, but once you’ve 

gotthebasicsworkingthere’snotreallymuchmoreyouneedtoknow. Yourdatamightgetmorecomplex 

and you might want to perform some fancier operations on it or display it in a different way, but the basic 

idea will remain the same. 

                                                     125 

----------------------- Page 127-----------------------

Lesson 12: Native Functionality 

The problem with web based mobile applications is that whilst we can run them on iOS and Android 

throughawebbrowser,userscan’tinstallthemnativelyontheirdeviceandtheappcannotaccessnative 

API’s like Contacts, Bluetooth and so on. This is why we use Cordova in conjunction with Ionic, Cordova 

allows us to wrap our applications in a native wrapper which allows for submission to app stores as well 

as communication with native API’s through plugins. When using Cordova, a HTML5 mobile application 

can do just about anything a normal native application can do. 

As I just mentioned, to access native functionality we need to use plugins. Cordova provides a bunch of 

default plugins which include: 

     • Device 

     • Network Information 

     • Camera 

     • Geolocation 

     • File 

     • In App Browser 

     • Media 

     • Splash Screen 

Buttherearehundredsofopensourcedpluginsdevelopedbythecommunitytodojustabouteverything, 

a few popular examples being: 

     • Local Notifications 

     • Facebook Connect 

     • SQLite 

     • Social Sharing 

Basically what a plugin does is create an interface where Javascript code can trigger native calls. So if 

you ever run into a situation where you need a Cordova plugin that doesn’t exist yet (which is pretty rare), 

you can even write it yourself (but it does involve writing native code). 

                                                      126 

----------------------- Page 128-----------------------

IMPORTANT: Mostpluginsonlyworkwhenrunningonarealdevice,soifyouaretryingtotestaCordova 

plugin through ionic serve you will likely receive errors. 

Using Cordova Plugins in Ionic 2 

There’stwowaystoimplementnativefunctionalityinIonic2. YoucanjustuseanyCordovaplugindirectly 

by installing the plugin in your project: 

ionic  plugin  add  plugin-name 

andthenaccessingthefunctionalitythatthepluginprovides,whichisusuallyavailableonaglobalobject 

like this: 

window .plugins .somePlugin .someMethod(); 

Nothing needs to be imported, required, called from a specific section of code or anything else - once 

you have installed the plugin through the command line you will be able to access it from anywhere. Not 

all plugins will be accessible exactly like this, but it’s how most plugins work. This is not specific to Ionic 

2, you can use Cordova plugins in this manner in any Cordova project (the only difference being that you 

would use cordova  plugin  add instead of ionic  plugin  add). When using the normal Cordova 

syntax, using a plugin in Ionic 2 is no different than using it in Ionic 1, Sencha Touch, jQuery Mobile or a 

normal web page built with Cordova. 

Keep in mind that if you use Cordova plugins in this way, your application may fail to compile due to 

TypeScript warnings. This is because TypeScript does not know what it is, and you may need to install 

typings for it. To brute force your way past this, you can simply add: 

declare  var  variableCausingProblems ; 

above the decorator in the class that you are using the plugin in. 

Alternatively, you can use Ionic Native to make use of Cordova plugins, which is specific to Ionic 2. If 

you’re familiar with ngCordova from Ionic 1 then this is basically the same thing, just for Ionic 2. If you’re 

                                                          127 

----------------------- Page 129-----------------------

not familiar with ngCordova, Ionic Native basically just makes Cordova plugins play a little bit more nicely 

with Angular 2, by adding support for Promises and Observables. 

Ionic Native is installed by default in all Ionic 2 applications, so all you need to do is install the plugin you 

want to use, just like you would normally, for example: 

ionic  plugin  add  cordova-plugin-geolocation 

Next you will need to import the plugin from Ionic Native into the class you want to use it in: 

import  {  Geolocation  }  from           'ionic-native '; 

and then you can use it in your code: 

Geolocation .getCurrentPosition ().then ((resp)  =>  { 

      console .log("Latitude : ", resp .coords .latitude); 

      console .log("Longitude : ", resp .coords .longitude); 

}); 

Notice that in the code above a promise is returned and we set up a handler using .then (), if we were 

justusingthestandardCordovasyntaxthiswouldn’tbepossible-wewouldinsteadhavetousecallback 

functions, which are a bit messier. 

It’s also important to note that not all Cordova plugins are available in Ionic Native. For a list of all of the 

availableplugins,andhowtousethem,youshouldcheckthe IonicNativedocumentation. Ifapluginyou 

wanttouseisnotavailableinIonicNative,thenyoucanjustgobacktousingthestandardCordovasyntax 

(or you can add it to Ionic Native yourself). 

Although it is not required, you should use Ionic Native wherever possible. It’ll make your code cleaner, 

anditmakesmuchmoresenseintheAngular2ecosystem(andtypingswillbehandledautomaticallythis 

way, so TypeScript won’t complain). Using plain old Cordova is not a crime though, so don’t feel too bad 

about it. 

                                                        128 

----------------------- Page 130-----------------------

Chapter 3 

Quick Lists 

                                 129 

----------------------- Page 131-----------------------

Lesson 1: Introduction 

QuickListsisthedefactostep-by-steptutorialapplicationforthiscourse-nomatterwhichofthepackages 

youpurchased,youwillhaveaccesstothislesson. ThereasonIchoseQuickListstofillthisroleisbecause 

it covers a broad range of the core concepts in Ionic 2, and the skills you learn throughout building this 

application will be used frequently in most other applications you create. 

A lot of people (myself included) create todo application tutorials when explaining some new technology 

orframework,thereasonforthisisusuallybecauseatodoapplicationcoversmostofthebasicthingsyou 

would want to do in an application, for example: 

     • General strucutre & setup 

     • User Interface 

     • Creating, reading, updating and deleting data 

     • Accepting user input 

These are all obviously important concepts that need to be covered, but I really wanted to avoid building 

another todo application for this book - I wanted to do something that was just a little bit more complex 

and interesting. The result is pretty similar and covers the same bases as a todo application would, but I 

think it’s a little more fun to build. 

About Quick Lists 

TheideaforQuickListscamefromapersonalneedofmine. AtthetimeofwritingthisIamcurrentlyworking 

remotely and traveling around Australia in a caravan. It’s certainly a great experience, but essentially 

lugging your entire house around the country (and it’s a big country) every week or so comes with some 

complications. 

Oneparticularlycomplicatedthingispackingupandhitchingthecaravantothecar,aswellasunhitching 

thecaravanandsettingitup. Iwon’tboreyouwiththedetails,butthere’satleast20orsodifferentthings 

that need to be done and checked each time. Some are inconsequential, but some are really important 

                                                         130 

----------------------- Page 132-----------------------

like making sure the chains are attached to the car, that the gas is off and that the brakes and indicators 

are working. 

SoIdecidedtocreateanappwhereyoucouldcreate“pre-flight”checklists. Thechecklistswouldcontain 

abunchofitemsthatyoucouldcheckoffasbeingdone,andwhenyouneededtorestartthechecklistfor 

the next time you could just hit a refresh button to reset everything. A repeatable todo list application in a 

sense. 

As I mentioned, this application covers similar concepts to what a traditional todo application would. 

Specifically though, the main concepts we will cover are: 

     • Complex Lists 

     • Data Models 

     • Observables 

     • Forms and User Input 

     • Simple Navigation 

     • Passing Data Between Pages 

     • Creating, Reading, Updating and Deleting Data 

     • Data Storage and Retrieval 

     • Theming 

Here’s a quick run down on the exact features of the application: 

     • The first time the user uses the application an introduction tutorial will be shown 

     • The user can create any number of checklists 

     • The user can add any number of individual items to any checklist 

     • An item in a checklist can be marked as complete or incomplete 

     • The user can “reset” a checkist at any time 

     • The user can edit or delete any checklist or items in a checklist 

     • All data will be remembered upon returning to the application (including the completion state of 

       checklist items) 

and here’s a couple of screenshots to put everything in context. 

                                                      131 

----------------------- Page 133-----------------------

       132 

----------------------- Page 134-----------------------

###Lesson Structure 

                                              133 

----------------------- Page 135-----------------------

1. Getting Ready 

2. Basic Layout 

3. Data Models and Observables 

4. Creating Checklists and Checklist Items 

5. Saving and Loading Data 

6. Creating an Introduction Slider & Themeing 

Ready? 

Now that you know what you’re in for, let’s get to building it! 

                                                     134 

----------------------- Page 136-----------------------

Lesson 2: Getting Ready 

In this lesson we are going to prepare our application for the journey ahead. We are going to of course 

generate the application, and we are also going to set up all of the components and Cordova plugins we 

will need. At the end of this first lesson we should have a nice skeleton application set up with everything 

we need to start diving into coding. 

A good rule of thumb before starting any new application is to make sure you have the latest version of 

Ionic and Cordova, so if you haven’t done it recently then make sure to run: 

npm   install  -g     ionic  cordova 

or 

sudo  npm    install  -g     ionic  cordova 

beforeyoucontinue. IfyourunintoanytroubleinstallingIonicorgeneratingnewprojects,makesurethat 

you have a recent Node version installed. After you have that installed, you should also run the following 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

Generate a new application 

We will be using the blank starter template for this application which, as the name implies, is basically an 

empty Ionic project. It comes with one page built in called home which we will repurpose as our main 

page that will hold our checklists in the next lesson. 

> Run the following command to generate a new application 

ionic  start  quicklists  blank  --v2 

                                                     135 

----------------------- Page 137-----------------------

> Make the new project your current working directory by running the following command: 

cd  quicklists 

Your project should now be generated - now you can open up the project folder in your favourite editor. 

You can take a look at how your application looks by running the following command: 

ionic  serve 

which for now should look something like this: 

                                                   136 

----------------------- Page 138-----------------------

       137 

----------------------- Page 139-----------------------

Create the Required Components 

Thisapplication will have a total of three page components. We willhave our HomePage thatwill display 

a list of all the checklists, an IntroPage that will display the introduction tutorial, and a ChecklistPage 

which will display the individual items for a specific checklist. We’ve already got the Home page, so let’s 

create the other two now. 

> Run the following command to generate the Introduction page: 

ionic  g  page     Intro 

> Run the following command to generate the Checklist detail page: 

ionic  g  page  Checklist 

Create the Required Services 

We are going to be creating a data service in this application to help us out. This will handle saving the 

checklist data into storage and retrieving them from storage. 

> Run the following command to generate a Data provider: 

ionic  g  provider  Data 

Create the Model 

We will be creating a data model for our checklists which will allow us to more easily create and update 

them. Unforuntately, there is no generate command for this, so you will need to create it manually. 

> Create a new folder inside of the src folder called models 

> Create a new file inside of the models folder called checklist-model.ts 

                                                    138 

----------------------- Page 140-----------------------

Add Pages & Services to the App Module 

In order to use these pages and services throughout our application, we need to add them to our 

app.module.ts file. All of the pages we created need to be added to both the declarations array and 

the entryComponents array, all of the providers we create need to be added to the providers array, 

and any custom components or pipes only need to be added to the declarations array. Our model is 

just a simple class we willimport wherever we need, there is no need to set it up anywhere in the module. 

> Modify src/app/app.module.ts to reflect the following 

import  {  NgModule  }  from      '@angular/core '; 

import  {  IonicApp, IonicModule  }  from          'ionic-angular '; 

import  {  MyApp  }  from     './app .component '; 

import  {  Storage  }  from     '@ionic/storage '; 

import  {  HomePage  }  from      '../pages/home/home '; 

import  {  IntroPage  }  from      '../pages/intro/intro '; 

import  {  ChecklistPage  }  from       '../pages/checklist/checklist '; 

import  {  Data  }  from    '../providers/data '; 

@NgModule ({ 

   declarations :  [ 

     MyApp , 

     HomePage , 

      IntroPage, 

     ChecklistPage 

   ], 

   imports :  [ 

      IonicModule .forRoot (MyApp) 

   ], 

   bootstrap :  [IonicApp], 

   entryComponents :  [ 

                                                  139 

----------------------- Page 141-----------------------

     MyApp , 

     HomePage , 

      IntroPage, 

     ChecklistPage 

   ], 

   providers :  [Storage , Data] 

}) 

export  class  AppModule  {} 

Noticethatwealsohavea Storage provideraswellasthe Data  provider  we               created .Storage‘is 

provided by Ionic and allows us to save and retrieve data - we will be making use of this later. 

Add Required Platforms 

Before you can build for certain platforms, you need to add them to your project. This is something we 

will be doing way later on in this course, but you may as well just set them up now. 

> Run the following command to add the iOS platform to your application 

ionic  platform  add  ios 

> Run the following command to add the Android platform to your application 

ionic  platform  add  android 

Add Required Cordova Plugins 

This application will use a few different Cordova plugins. Remember, Cordova plugins can only be used 

when running on a real device. I’ll explain each plugin as we run through the commands for adding them. 

> Run the following command to add the SQLite plugin: 

                                                   140 

----------------------- Page 142-----------------------

ionic  plugin  add  cordova-sqlite-storage 

ThisplugingivesyouaccesstonativestoragewithanSQLitedatabase. Weareaddingittothisapplication 

because the Ionic local storage service can make use of this plugin to provide more stable data storage. 

> Run the following command to add the Status Bar plugin: 

ionic  plugin  add  cordova-plugin-statusbar 

Wewillbeaddingthisplugintoallprojectstogiveuscontroloverthestatusbarinourapplication(thebar 

at the top of the devices screen that contains the time, battery information and so on). 

> Run the following command to add the Splash Screen plugin: 

ionic  plugin  add  cordova-plugin-splashscreen 

This plugin allows us to control the splash screen (the fullscreen graphic that briefly displays when you 

open an app) 

> Run the following command to add the Keyboard plugin: 

ionic  plugin  add  ionic-plugin-keyboard 

This plugin allows us to control the software Keyboard. 

> Run the following command to add the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

This plugin is required for all applications, and helps to define what resources should be allowed to be 

loaded in your application. Without it, resources you try to load will fail. 

As well as adding the plugin, you also need to define a “Content Security Policy” in your index.html 

file. We will be adding a very permissive policy which will essentially allow us to load any resources. 

Depending on your application, you may look into providing a more strict policy, but an open policy is 

good for development. 

                                                      141 

----------------------- Page 143-----------------------

> Modify your src/index .html file to include the following meta tag: 

<meta  http-equiv= "Content-Security-Policy" content="font-src                      'self ' data :; 

     img-src  *  data :; default-src  gap ://ready  file ://* *;  script-src                 'self ' 

     'unsafe-inline '  'unsafe-eval ' *          ; style-src      'self '  'unsafe-inline ' *"> 

> Run the following command to add the Crosswalk plugin: 

ionic  plugin  add  cordova-plugin-crosswalk-webview 

This is another plugin that we will add to every application, but you may decide you want to leave it out. 

By adding this plugin, when you build for Android “Crosswalk” will be used. Android has a lot of issues, 

especiallywitholderdevices,becausethereissomanydifferentsoftwareversionsoutthereanddifferent 

versions have different browsers (remember, since we are building HTML5 applications it is actually a 

browserenginepoweringandrunningourapplication). WhatCrosswalkdoesisbundleamodernbrowser 

into your application so no matter what device you are running on your app will be powered by the same 

browser, and the Crosswalk browser can improve performance a lot. 

The only real downside to this is that it increases the size of your application by a significant amount. In 

general,Ithinkit’sworthitandI’drecommendyouincludeitbutyoumayleaveitoutifyoulike. Formore 

information take a look at the Crosswalk Project website: https://crosswalk-project.org/ 

Set up Images 

Whenbuildingthisapplicationwearegoingtobemakinguseofafewimages. I’veincludedtheseinyour 

download pack but you will need to set them up in the application you generate. 

> Copy the images folder in the download pack for this application from src/assets to your own 

src/assets folder 

                                                    142 

----------------------- Page 144-----------------------

Summary 

That’s it! We’re all set up and ready to go, now we can start working on the interesting stuff. 

                                                 143 

----------------------- Page 145-----------------------

Lesson 3: Basic Layout 

We’re going to start things off pretty slow and easy in this lesson, and just focus on creating the basic 

layout for the application. We will need to create templates for the Home page, which will display all of 

the checklists that have been created, and the Checklist page, which will display all of the items for one 

specificchecklist. Ifyou’vebeenpayingattentionthenyou’llknowthere’salsoonemorepage,butwewill 

be creating that later. 

As I’ve mentioned before, I’ve tried to make this course as modular as possible so that you can build 

the applications that interest you first, and aren’t forced to follow a particular order. Since this is the first 

application though, and because it is the only application contained in the basic package I’ll be paying 

special attention to making sure all the little things are explained thoroughly. 

The Home Page 

Beforewejumpintothecode,let’sgetaclearpictureinourmindofwhatweareactuallybuilding. Here’s 

a screenshot of the completed home page: 

                                                       144 

----------------------- Page 146-----------------------

It’sgotabitoffancystylingwhichwewillcoverlater,butessentiallyit’saprettysimplelistofitemswitha 

button in the top right to add a new checklist. It’s not entirely simple though, you’ll notice one of the list 

itemslooksalittledifferentandisdisplayingan‘Edit’and‘Delete’button. Thisisbecausewewillbeusing 

                                                       145 

----------------------- Page 147-----------------------

the sliding list component Ionic provides, which allows us to specify some content that will be displayed 

when the user swipes the list item. 

So let’s get into building it. First we’re going to look at the entire template to see everything in context, 

then we’re going to break it down into smaller chunks that we will discuss in detail. 

> Modify src/pages/home/home .html to reflect the following 

<ion-header> 

     <ion-navbar  color="secondary"> 

        <ion-title> 

           <img  src  =  "assets/images/logo .png" /> 

        </ion-title> 

        <ion-buttons  end> 

           <button  ion-button  icon-only  (click)="addChecklist ()"><ion-icon 

               name="add-circle"></ion-icon></button> 

        </ion-buttons> 

     </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list  no-lines> 

        <ion-item-sliding> 

           <button  ion-item  (click)="viewChecklist (checklist)"> 

                TITLE  GOES  HERE 

                <span>0  items</span> 

           </button> 

           <ion-item-options> 

             <button  ion-button  icon-only  color="light" 

                                                 146 

----------------------- Page 148-----------------------

                  (click)="renameChecklist (checklist)"><ion-icon 

                 name="clipboard"></ion-icon>  Edit</button> 

             <button  ion-button  icon-only  color="danger" 

                  (click)="removeChecklist (checklist)"><ion-icon 

                 name="trash"></ion-icon>  Delete</button> 

           </ion-item-options> 

        </ion-item-sliding> 

   </ion-list> 

</ion-content> 

Let’s start off by discussing the <ion-header> section: 

<ion-header> 

     <ion-navbar  color="secondary"> 

        <ion-title> 

           <img  src  =  "assets/images/logo .png" /> 

        </ion-title> 

        <ion-buttons  end> 

           <button  ion-button  icon-only  (click)="addChecklist ()"><ion-icon 

               name="add-circle"></ion-icon></button> 

        </ion-buttons> 

     </ion-navbar> 

</ion-header> 

The <ion-navbar> allows us to add a header bar to the top of our application that can hold buttons, 

titlesandevenintegratesdirectlywithIonic’snavigationsystemtodisplayabackbuttonwhennecessary. 

We add the color attribute to the navbar to style it with our secondary colour, which is defined in theme/- 

variable.scss. Inside of this navbar we use <ion-title>, which is typically used to display a text title 

for the current page, to display our logo. We also use <ion-buttons> to create a button in the navbar. 

                                                 147 

----------------------- Page 149-----------------------

Byspecifyingtheendattribute,thebuttonswillbeplacedontherightsideoniOS,butifweweretospecify 

the‘start’attributeitwouldbedisplayedontheleftinstead. RememberthatIonic2hasplatformcontinuity 

built in, so by default the buttons will be placed in the most appropriate place for the platform they are 

running on. 

Finallywehavethebuttonitselfinsideof <ion-buttons>. Thisbuttonusesacircleiconandhasaclick 

handler attached to it, which will call the addChecklist () function in our home.ts file (which we have 

not created yet of course). Also notice that we use the ion-button and icon-only attributes on the 

button, this lets Ionic know that we want to add the Ionic styling to this button, and that it should style it 

as a button with just an icon and no text. 

Let’s move onto the list section now: 

<ion-content> 

   <ion-list  no-lines> 

        <ion-item-sliding> 

           <button  ion-item  (click)="viewChecklist (checklist)"> 

                TITLE  GOES  HERE 

                <span>0  items</span> 

           </button> 

           <ion-item-options> 

              <button  ion-button  icon-only  color="light" 

                  (click)="renameChecklist (checklist)"><ion-icon 

                  name="clipboard"></ion-icon>  Edit</button> 

              <button  ion-button  icon-only  color="danger" 

                  (click)="removeChecklist (checklist)"><ion-icon 

                  name="trash"></ion-icon>  Delete</button> 

           </ion-item-options> 

                                                   148 

----------------------- Page 150-----------------------

        </ion-item-sliding> 

   </ion-list> 

</ion-content> 

Beforewegettothelist,noticethateverythingiswrappedinsideof <ion-content> -thisiswhatholds 

the main content for the page and in most cases everything except the navbar will be inside of here. 

Much like a list is created with plain HTML, e.g: 

<ul> 

      <li></li> 

      <li></li> 

      <li></li> 

</ul> 

A list in Ionic is created in basically the same way: 

<ion-list> 

      <ion-item></ion-item> 

      <ion-item></ion-item> 

      <ion-item></ion-item> 

</ion-list> 

Of course, ours looks a little more complicated than that so let’s talk through it. The first thing out of the 

ordinary we are doing is adding the no-lines attribute to the <ion-list>. Just like the secondary 

attribute we added to navbar, this attribute also styles our list except that it will cause the items in the list 

to not display with borders. 

Thenextbitget’salittletrickier,asitiswherewesetupourslidingitem. An <ion-sliding-item>,op- 

posedtoanormal <ion-item>,hastwosetsofcontent-theitemitself,andthenthe<ion-item-options> 

which will be revealed when the user slides the item. 

Thefirstblockofcodeinsideof <ion-sliding-item> isthenormal <ion-item> definition,butinstead 

                                                   149 

----------------------- Page 151-----------------------

of using <ion-item> directly we are using <button              ion-item> which is actually a button with the 

styling of an item. Visually, these two methods are exactly the same, but on mobile everything that is not 

a <button> or <a> element that has a click handler will have a slight tap delay. We don’t want to have 

this delay so we use the button instead. 

Theclickhandlerweattachtothebuttoncallsafunction viewChecklist butitalsopassesinaparameter 

of checklist. We haven’t defined what this is yet, but eventually we will be creating a bunch of these 

items from an array of data, and we will create a reference to each individual item that we can pass into 

thisfunction. Soeventually,the checklist wearepassinginherewillbeareferencetothespecificitem 

that was clicked (we will discuss exactly how we do that later). 

Finally,wehavethesecondblockofcode, <ion-item-options>,whichsimplyallowsustodefinewhat 

contentwewanttodisplaywhentheuserslidestheitem. Inthiscasewearejustadding‘Edit’and‘Delete’ 

buttons which will also pass in a reference to the checklist it was called on (again, we will have to create 

this reference later, for now it will just cause issues). 

That’s all there is to the home page, so let’s move on to the checklist page now. 

The Checklist Page 

As we did before, let’s first take a look at what we are building before we jump in: 

                                                        150 

----------------------- Page 152-----------------------

This screen looks very similar to the last one, and for the most part it is, but there are some differences. 

Obviously we have an extra button now, and a back button to return to the main page. The items in our 

listalsonowhaveacheckboxnexttothemthatwillbeusedformarkinganitemascomplete,andwestill 

have our sliding items set up. 

Again, let’s add the code for the template to the application and then talk through it: 

> Modify src/pages/checklist/checklist .html to reflect the following 

<ion-header> 

      <ion-navbar  color="secondary"> 

           <ion-title> 

                                                     151 

----------------------- Page 153-----------------------

             CHECKLIST  TITLE 

         </ion-title> 

         <ion-buttons  end> 

             <button  ion-button  icon-only  (click)="uncheckItems ()"><ion-icon 

                name="refresh-circle"></ion-icon></button> 

             <button  ion-button  icon-only  (click)="addItem ()"><ion-icon 

                name="add-circle"></ion-icon></button> 

         </ion-buttons> 

    </ion-navbar> 

</ion-header> 

<ion-content> 

  <ion-list  no-lines> 

    <ion-item-sliding> 

         <ion-item> 

             <ion-label>ITEM TITLE</ion-label> 

             <ion-checkbox  [checked]="item .checked"  (click)="toggleItem (item)"> 

             </ion-checkbox> 

         </ion-item> 

         <ion-item-options> 

             <button  ion-button  icon-only  color="light" 

                 (click)="renameItem (item)"><ion-icon 

                name="clipboard"></ion-icon>  Edit</button> 

             <button  ion-button  icon-only  color="danger" 

                 (click)="removeItem (item)"><ion-icon  name="trash"></ion-icon> 

                Delete</button> 

                                        152 

----------------------- Page 154-----------------------

            </ion-item-options> 

      </ion-item-sliding> 

   </ion-list> 

</ion-content> 

You already know how the navbar works, this time we’ve just got an extra button inside of our 

<ion-buttons> and it is still using the end attribute, so both items will be aligned to the right. We are 

using the <ion-title> in a more traditional way this time to display the title of the checklist that is 

currently being viewed (at least, we will be doing that soon). The buttons also both have click handlers 

to different functions, but since we are in the ChecklistPage component now, these functions will be 

triggered in the checklist.ts file (which we also have not created yet). 

You also know how the sliding items work now, but this time we have an <ion-checkbox> as the main 

item instead of the title of the checklist and when it is clicked it will trigger the toggleItem () function 

which we will need to define later. Notice that we are just using a plain <ion-item> now instead of 

<button     ion-item>, this is because we’re attaching the click handler directly to the checkbox rather 

than having it on the entire item. 

There’s also a bit of new syntax here, let’s take a closer look: 

 [checked]="item .checked" 

When something is surrounded by [square  brackets] it means we will be modifying a property on 

that element, and we will be setting it to the expression contained in the quotes, not a string. So in this 

case it would set the checked property to the value of item.checked. Right now we haven’t created a 

referenceto item soitwon’tworkanyway,butlateritwill. Theimportantthingtorememberhereisthatthe 

squarebracketswillevaluatewhateverisinsidethequotationmarks. Let’simagineyouhavethefollowing 

defined in the class for your component: 

this .myName  =      "Josh" 

                                                      153 

----------------------- Page 155-----------------------

If I were to use the following code: 

<something  myName="myName "> 

the myName attribute would be set to literally “myName”, but if I were to use this code instead: 

<something       [myName]="myName "> 

themyName property wouldbesetto“Josh”,becausemyNamewouldgetevaluatedfirstinthisinstance. 

Movingon,there’snothingelsesurprisingintherestofthetemplate-wesimplyaddthe‘Edit’and‘Delete’ 

buttons to our sliding list like we did on the last page. 

If you run ionic  serve now, you should see something like this: 

                                                      154 

----------------------- Page 156-----------------------

Ithinkwecanbothagreethat’sprettyugly,butthestructureisthere. Pleasekeepinmindthatwehaven’t 

styled the logo properly yet, so depending on what size device you are looking at it with it may not fit as 

nicely as the image above does. 

                                                    155 

----------------------- Page 157-----------------------

In the following lessons we will be getting the list to pull in real data and styling it so that it looks a lot 

better. ThetemplatesyntaxinIonic2looksalittleconfusingatfirst,butonceyougetyourheadaroundit 

it’s quite nice to use. 

                                                          156 

----------------------- Page 158-----------------------

Lesson 4: Data Models and Observables 

In this lesson we’re going to design a data model for the checklists that we will use in the application, 

whichwillalsoincorporateObservables. AdatamodelisnotsomethingthatisspecifictoIonic2,amodel 

inprogrammingisagenericconcept. Dependingonthecontext,theexactdefinitionofamodelmayvary, 

but in general a model is used to store or represent data. 

InthecontextofIonic2&Angular2,ifwewantedtokeepareferencetosomedatawemightdosomething 

like this: 

this .myDataArray  =  [ '1 ',  '2 ',  '3 ']; 

However, if we were to create a model it might look something like this: 

this .myDataArray  =  [ 

      new  MyDataModel ('1 '), 

      new  MyDataModel ('2 '), 

      new  MyDataModel ('3 ') 

]; 

Soinsteadofstoringplaindata,wearecreatingan object thatholdsthatdatainstead. Atfirstitmightbe 

hard to see why we would want to do this, for simple data like the example above it just looks a lot more 

complicated, but it does provide a lot of benefits. The main benefit for us in this application will be that it: 

     • Allows us to clearly define the structure of our data 

     • Allows us to create helper functions on the data model to manipulate our data 

     • Allows us to reuse the data model in multiple places, simplifying our code 

Hopefully this lesson will show you how useful creating a data model can be, but let me preface this by 

saying this isn’t something that is absolutely required. You can quite easily just define some data directly 

in your class if you like. 

We’realsogoingtobecreatingandmakinguseofourown Observable inthisdatamodel,butlet’scross 

that bridge when we get there. 

                                                        157 

----------------------- Page 159-----------------------

Creating a Data Model 

Usually if we wanted to create a data model we would create a class that defines it (it’s basically just a 

normal object), along with its helper functions, like this: 

class  PersonModel  { 

      constructor(name , age){ 

           this .name  =  name ; 

           this .age  =  age ; 

      } 

      increaseAge(){ 

           this .age++; 

      } 

      changeName(name){ 

           this .name  =  name ; 

      } 

} 

Then we could create any number of instances (objects) from it like this: 

let  person1  =  new  PersonModel ('Jason ',  43); 

let  person2  =  new  PersonModel ('Louise ',  22); 

and we can call the helper functions on any individual instance (object) like this: 

person1 .increaseAge(); 

TheideainIonic2isprettymuchexactlythesame,excepttodoitintheIonic2/Angular2waywecreate 

an Injectable (whichwediscussedinthebasicssection). Rememberthatan Injectable isusedtocreate 

                                                   158 

----------------------- Page 160-----------------------

services that can be injected into any of our other components, so if we want to use the data model we 

create we can just inject it anywhere that we want to use it. 

Let’s take a look at what the data model will actually look like, and then walk through the code. 

> Modify src/models/checklist-model .ts to reflect the following: 

export  class  ChecklistModel  { 

   checklist : any ; 

   checklistObserver : any ; 

   constructor(public  title : string, public  items : any []){ 

     this .items  =  items; 

   } 

   addItem (item): void  { 

     this .items .push ({ 

        title : item, 

        checked : false 

     }); 

   } 

   removeItem (item): void  { 

     let  index  =  this .items .indexOf(item); 

     if(index  >  -1){ 

                                                  159 

----------------------- Page 161-----------------------

       this .items .splice(index,  1); 

     } 

   } 

   renameItem (item, title): void  { 

     let  index  =  this .items .indexOf(item); 

     if(index  >  -1){ 

       this .items [index].title  =  title ; 

     } 

   } 

   setTitle(title): void  { 

     this .title  =  title ; 

   } 

  toggleItem (item): void  { 

     item .checked  =  !item .checked; 

   } 

} 

Whatwe’retryingtodowiththisdatamodelisessentiallycreateablueprintforwhatanindividualchecklist 

is. Achecklisthasatitleanditcanhaveanynumberofitemsassociatedwithitthatneedtobecompleted. 

Sowesetupmembervariablestoholdthesevalues: asimplestringforthetitle,andanarrayfortheitems. 

Noticethatweallowthetitleandtheitemstobepassedinthroughtheconstructor. Atitlemustbesupplied 

tocreateanewchecklist,butprovidinganarrayofitemsisoptional. Ifwewanttoimmediatelyadditems 

                                             160 

----------------------- Page 162-----------------------

to a checklist we can supply an items array when we instantiate it, otherwise it will just be initialised with 

an empty array. 

Weincludeabunchofhelperfunctionswhichareallprettystraightforward,theyallowustoeitherchange 

the title of the checklist, or modify any of the checklists items (by changing their name, removing an item, 

adding a new item to the checklist, or toggling the completion state of an item). 

Alsonoticethatwehaveadded : void aftereachofthefunctions. Justlikewecandeclarethatavariable 

has a certain type by doing something like this: 

checklist : any ; 

we can also declare what type of data a function returns. In this case, no data is being returned so we 

use void. If one of these functions were to return a string, then we would instead use : string on the 

function. 

Withallofthatsetup,wecaneasilycreateanewchecklistinanycomponentwherewehaveimportedthe 

Checklist Model (which we will be doing in the next lesson) by using the following code: 

let  newChecklist  =  new  ChecklistModel ('My  Checklist ',  []); 

or 

let  newChecklist  =  new  ChecklistModel ('My  Checklist ', myItemsArray); 

We’re going to get a little bit fancier now and incorporate an Observable into our data model so that we 

can tell when any checklist has been modified (which will allow us to trigger a save to memory later). 

Adding an Observable 

You’ve had a little bit of exposure to Observables already in the basics section of this course - to refresh 

your memory we can use the Observable the Http service returns like this: 

      this .http .get ('https ://www .reddit .com/r/gifs/new/.json?limit=10 ').map (res 

           =>  res .json ()).subscribe(data  =>  { 

                                                      161 

----------------------- Page 163-----------------------

           console .log(data); 

      }); 

We call the get method, and then subscribe to the Observable it returns. Remember that an Observ- 

able,unlikeaPromise,isastreamofdataandcanemitmultiplevaluesovertime,ratherthanjustonce. This 

concept isn’t really demonstrated when using the Http service, since in most cases we are just retrieving 

the data once. The Observable is also already created for us in the case of Http. 

We are about to create our very own Observable from scratch in our data model, which will allow other 

partsofourapplicationtolistenforwhenchangesoccurtoourchecklist(becausewewillemitsomedata 

everytimeachangeoccurs). WhenimplementingthisObservableyouwillseehowtocreateanobservable 

from scratch, and you’ll also see how an Observer can emit more than one value over time. 

Beforewegettoimplementingit,let’stalkaboutObservablesinalittlemoredetail,inthecontextofwhat 

we’re actually trying to do here. In the subscribe method in the code above we are only handling one 

response: 

this .http .get (url).subscribe(data  =>  { 

      console .log(data); 

}); 

whichisactuallythe onNext responsefromtheObservable. Observersalsoprovidetwootherresponses, 

onError and onCompleted, and we could handle all three of those if we wanted to: 

this .http .get (url).subscribe( 

      (data)  =>  { 

           console .log(data); 

      }, 

      (err)  =>  { 

           console .log(err); 

      }, 

                                                   162 

----------------------- Page 164-----------------------

      ()  =>  { 

           console .log("completed"); 

     } 

); 

Inthecodeabovethefirsteventhandlerhandlesthe onNext response,whichbasicallymeans“whenwe 

detect the next bit of data emitted from the stream, do this”. The second handler handles the onError 

response, which as you might have guessed will be triggered when an error occurs. The final handler 

handles the onCompleted event, which will trigger once the Observable has returned all of its data. 

Themostusefulhandlerhereis onNext andifwecreateourownobservable,wecantriggerthat onNext 

responseasmanytimesasweneedbycallingthe next methodontheObservable,andprovidingitsome 

data. 

Now that we have the theory out of the way, let’s look at how to implement the observable. 

> Modify src/models/checklist-model .ts to reflect the following: 

import  {Observable}  from        'rxjs/Observable '; 

export  class  ChecklistModel  { 

   checklist : any ; 

   checklistObserver : any ; 

   constructor(public  title : string, public  items : any []){ 

     this .items  =  items; 

     this .checklist  =  Observable .create(observer  =>  { 

        this .checklistObserver  =  observer ; 

                                                  163 

----------------------- Page 165-----------------------

  }); 

} 

addItem (item): void  { 

  this .items .push ({ 

     title : item, 

     checked : false 

  }); 

  this .checklistObserver .next (true); 

} 

removeItem (item): void  { 

  let  index  =  this .items .indexOf(item); 

  if(index  >  -1){ 

     this .items .splice(index,  1); 

  } 

  this .checklistObserver .next (true); 

} 

renameItem (item, title): void  { 

  let  index  =  this .items .indexOf(item); 

                                         164 

----------------------- Page 166-----------------------

     if(index  >  -1){ 

        this .items [index].title  =  title ; 

     } 

     this .checklistObserver .next (true); 

   } 

   setTitle(title): void  { 

     this .title  =  title ; 

     this .checklistObserver .next (true); 

   } 

   toggleItem (item): void  { 

     item .checked  =  !item .checked; 

     this .checklistObserver .next (true); 

   } 

} 

The first thing to notice here is that we are now importing Observable from the RxJS library. Then in our 

constructor, we set up the Observable: 

     this .checklist  =  Observable .create(observer  =>  { 

        this .checklistObserver  =  observer ; 

     }); 

Our this .checklist member variable in the code above is now our very own observable. Since it is 

anobservable,wecansubscribetoit,andsinceitispartofourdatamodel,wecansubscribetoitonany 

checklist we have created in our application. For example: 

                                                  165 

----------------------- Page 167-----------------------

let  newChecklist  =  new  ChecklistModel ('My  Checklist ',  []); 

newChecklist .checklist .subscribe(data  =>  { 

      console .log(data); 

}); 

Of course, we aren’t doing anything with the Observable yet so it’s never going to trigger that onNext 

response. This is why we have added the following bits of code to each of our helper functions: 

this .checklistObserver .next (true); 

Sowheneverweuseoneofourhelperfunctionstochangethetitle,oraddanewitem,oranythingelse,it 

willnotifyanythingthatissubscribedtoitsObservable. Allwewanttoknowisthatachangehasoccurred 

so we are just passing back a boolean (true or false), but we could also easily pass back some data if we 

wanted. 

The result of this is that now we can “observe” any checklists we create for changes that occur. Later on 

we will make use of this by listening for these changes and then triggering a save. 

Summary 

Inthislessonwe’vegonealittlebitbeyondthebeginnerlevelandcreatedaprettyrobustdatamodel. As 

I’ve mentioned, this certainly has it’s benefits but don’t feel too intimidated if you had trouble following 

alongwiththislesson-asabeginneryoucanmostlygetawaywithjustdefiningdatadirectlyontheclass 

and not worrying about data models and observables. 

I particularly don’t want to freak you out too much with the Observabes - they are confusing (until you 

get your head around them) and outside of subscribing to responses from the Http service, you really 

don’thavetousetheminmostsimpleapplications. Butonceyoudounderstandthem,youcandosome 

powerful stuff with them. 

Although this lesson was a little more advanced, it’s a great way to demonstrate how you might make 

                                                    166 

----------------------- Page 168-----------------------

useofObservablesinyourproject,andifyou’vekeptupthroughthislessonthenhopefullythenextones 

should be a breeze! 

                                                 167 

----------------------- Page 169-----------------------

Lesson 5: Creating Checklists and Checklist Items 

We’vedonealotofsettingupandstructuringsofar,butinthislessonwe’llbegettingtothebonesofwhat 

we’rebuilding. We’llbe adding ways to create new checklists, viewing those checklists and adding items 

to them (as well as modifying any items or the checklist itself). It’s going to be a big one so strap in and 

get some coffee ready if you are so inclined. 

Checklists 

The first thing we are going to do is add everything we need for creating and viewing checklists. This will 

meanaddingtoourclassdefinition,aswellasmodifyingthetemplatewecreatedbeforetoactuallydisplay 

the checklist data. 

Let’s start off by setting up our class definition. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from       '@angular/core '; 

import  {  NavController , AlertController , Platform  }  from                 'ionic-angular '; 

import  {  ChecklistPage  }  from         '../checklist/checklist '; 

import  {  ChecklistModel  }  from         '../../models/checklist-model '; 

import  {  Data  }  from      '../../providers/data '; 

import  {  Keyboard  }  from       'ionic-native '; 

@Component ({ 

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   checklists : ChecklistModel []  =  []; 

                                                    168 

----------------------- Page 170-----------------------

constructor(public  nav : NavController , public  dataService : Data , public 

    alertCtrl : AlertController , public  platform : Platform)  { 

} 

ionViewDidLoad()  { 

} 

addChecklist (): void  { 

} 

renameChecklist (checklist): void  { 

} 

viewChecklist (checklist): void  { 

} 

removeChecklist (checklist): void{ 

} 

save(): void{ 

} 

                                       169 

----------------------- Page 171-----------------------

} 

We’reimportingafewthingsfromtheIoniclibraryhere. NavControlleryoushouldalreadybeprettyfamiliar 

with,butyoumightnotknowwhat AlertController is. AlertControllerallowsustopresentvariousalertsto 

the user, including a basic prompt, prompts with input, confirmation prompts and more. We will be using 

these as a method to add new checklists. 

We’re also importing our ChecklistPage which we will finish implementing later, but most importantly we 

are importing the Checklist Model we created in the last lesson. 

WealsoimporttheDataproviderwegeneratedearlier,butwewon’tbeimplementingitsfunctionalityuntil 

later. Finally,weimportthe‘Keyboard’fromIonicNative,sothatwewillbeabletomakesuretheKeyboard 

closes when a user adds checklists later. 

By adding the public keyword in the constructor we are simply setting up a reference to the Nav- 

Controller and Data provider that we can use throughout the class later by referencing this .nav and 

this .dataService. Basically it’s shorthand for this: 

constructor(nav : NavController , dataService : Data){ 

   this .nav  =  nav ; 

   this .dataService  =  dataService ; 

} 

which you may have seen used before. 

We’vealsodeclareda checklists arrayatthetopoftheclasswhichwillmakeitaccessiblethroughout 

theclassbyreferencing this .checklists. Therestoftheclassisvariousfunctionswhichwewillstep 

through creating one by one now. 

addChecklist 

This function will be responsible for allowing the user to create a new checklist. It will launch a prompt, 

and use the data that is entered to create a new checklist (making use of the data model we created). 

                                                    170 

----------------------- Page 172-----------------------

> Modify the addChecklist function to reflect the following: 

  addChecklist (): void  { 

     let  prompt  =  this .alertCtrl .create({ 

       title :  'New  Checklist ', 

       message :  'Enter  the  name  of  your  new  checklist below :', 

       inputs :  [ 

          { 

            name :  'name ' 

          } 

       ], 

       buttons :  [ 

          { 

            text :  'Cancel ' 

          }, 

          { 

            text :  'Save ', 

            handler : data  =>  { 

               let  newChecklist  =  new  ChecklistModel (data .name ,  []); 

              this .checklists .push (newChecklist); 

              newChecklist .checklist .subscribe(update  =>  { 

                 this .save(); 

               }); 

              this .save(); 

            } 

          } 

       ] 

     }); 

                                              171 

----------------------- Page 173-----------------------

      prompt .present (); 

   } 

Wearepresentingaprompttotheuserthatwillcontainasingle name inputfield,andtwobuttons Cancel 

and Save. The cancel button does nothing except dismiss the prompt, but we add a handler to the save 

button that will pass in the data that was entered into the input field. 

Insideofthishandlerwefirstgenerateanewchecklistbypassingtheenterednameintoanewinstanceof 

ourchecklistmodel,andthenwe push thatobjectintoour this .checklists array. Thenwesubscribe 

to the observable we added to the data model in the last lesson to listen for whenever the checklist is 

modifiedinanyway,andwhenitiswetriggerthesavefunction. Noticethatwehavetwocallstosavehere, 

one that is triggered by the observable and one that fires straight away (since we have just added a new 

checklist). 

Finally, we trigger the prompt by calling its present method. 

Ifyoutakealookatyourtemplatefileagain,you’llrememberthatwe’vealreadyaddedacalltothisfunction 

for when the add button is clicked: 

<button     (click)="addChecklist ()"><ion-icon 

     name="add-circle"></ion-icon></button> 

renameChecklist 

Next we’re going to define the renameChecklist function which, obviously, will allow us to rename a 

checklist. 

> Modify the renameChecklist function to reflect the following: 

   renameChecklist (checklist): void  { 

      let  prompt  =  this .alertCtrl .create({ 

         title :  'Rename  Checklist ', 

                                                      172 

----------------------- Page 174-----------------------

     message :  'Enter  the  new  name  of  this  checklist below :', 

     inputs :  [ 

       { 

         name :  'name ' 

       } 

     ], 

     buttons :  [ 

       { 

         text :  'Cancel ' 

       }, 

       { 

         text :  'Save ', 

         handler : data  =>  { 

            let  index  =  this .checklists .indexOf(checklist); 

            if(index  >  -1){ 

              this .checklists [index].setTitle(data .name); 

              this .save(); 

            } 

          } 

       } 

     ] 

  }); 

  prompt .present (); 

} 

                                           173 

----------------------- Page 175-----------------------

The first thing that you may notice is that it looks very similar to our addChecklist function, and that is 

becauseitis. Weusethesamepromptwiththesameinputsandbuttons,wejusthaveaslightlydifferent 

handler. 

Notice that we are passing in a parameter to this function, which will be a reference to the checklist that 

we want to rename. We will be updating the template shortly to pass in this reference, but for now just 

pretend that we have it. 

Weusethisreferencetothechecklisttofinditinour this .checklists arrayandthensetittothenew 

title that was entered, then we trigger a save. 

Again, if you recall from before, we have already set up a click handler that will call this function in the 

template: 

      <button  light  (click)="renameChecklist (checklist)"><ion-icon 

          name="clipboard"></ion-icon></button> 

removeChecklist 

Next up we are going to add the ability to delete a checklist. 

> Modify the removeChecklist function to reflect the following: 

   removeChecklist (checklist): void{ 

      let  index  =  this .checklists .indexOf(checklist); 

      if(index  >  -1){ 

        this .checklists .splice(index,  1); 

        this .save(); 

      } 

   } 

                                                     174 

----------------------- Page 176-----------------------

This function is quite a lot simpler because it doesn’t require any user input, we just need to get rid of the 

checklist. Justaswedidbefore,wearepassinginareferencetothechecklistandthenfindingthechecklist 

in our this .checklists array. We then simply remove it from the array using the splice method and 

trigger a save. 

Here’s the code from the template that triggers this function: 

      <button  danger  (click)="removeChecklist (checklist)"><ion-icon 

          name="trash"></ion-icon>  Delete</button> 

viewChecklist 

We can create and modify our checklists now, but we also need to be able to see the details of specific 

checklists, and to add individual items to checklists. To do this, we’re going to use our NavController to 

push a new page and pass in a reference to the checklist that was clicked. 

> Modify the viewChecklist function to reflect the following: 

   viewChecklist (checklist): void  { 

      this .nav .push (ChecklistPage ,  { 

         checklist : checklist 

      }); 

   } 

Wepassinthe ChecklistPage weimportedbefore(whichweareyettofinish)tothepushmethod,aswell 

asthedatawewanttosendalongtothenewpage,whichisareferencetothechecklisttheuseristrying 

to view. We will be able to use NavParams in the class for our checklist page to grab this data later. 

save 

Thisonefunctionisgoingtobetheoddoneoutfornowaswearen’tactuallygoingtoimplementit. There’s 

quite a lot that needs to go into it so we’ll be covering saving and loading data in its own lesson later. 

                                                      175 

----------------------- Page 177-----------------------

To bring everything together, we need to finish off the template for the home page. We can do all of this 

stuff with our data now, but we can’t even see the results. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="secondary"> 

     <ion-title> 

        <img  src  =  "assets/images/logo .png" /> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="addChecklist ()"><ion-icon 

            name="add-circle"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list  no-lines> 

     <ion-item-sliding  *ngFor="let  checklist  of  checklists"> 

        <button  ion-item  (click)="viewChecklist (checklist)"> 

             {{checklist .title}} 

             <span>{{checklist .items .length}}  items</span> 

        </button> 

        <ion-item-options> 

          <button  ion-button  icon-only  color="light" 

               (click)="renameChecklist (checklist)"><ion-icon 

              name="clipboard"></ion-icon></button> 

                                               176 

----------------------- Page 178-----------------------

           <button  ion-button  icon-only  color="danger" 

                (click)="removeChecklist (checklist)"><ion-icon 

                name="trash"></ion-icon></button> 

         </ion-item-options> 

      </ion-item-sliding> 

   </ion-list> 

</ion-content> 

We’re doing a few interesting things here now, most notably we have added an ngFor loop: 

<ion-item-sliding  *ngFor="let  checklist  of  checklists"> 

What this will do is loop over every entry we have in our this .checklists array and create a sliding 

item for it in the list. Remember, the * syntax used in front of the ngFor here is a shortcut for creating 

embeddedtemplatesinAngular2,sowhatwearedoingessentiallyiscreatingatemplatethatis“stamped” 

out for as many times as we have items in our array. Each time this template is “stamped” it will contain 

theinformationforthespecificitemitwasstampedoutfor,soanywhereinsideofthe ngFor loopwecan 

grab the data of the specific checklist that is being rendered using: 

{{checklist .title}} 

Notice that we also have a let infront of checklist in the ngFor loop. In Angular 2 using let like 

this allows us to create a local variable, and this is what then allows us to pass a reference to the specific 

checklist into all of the functions we just created. To make the concept more clear, if we were to use the 

following code instead: 

<ion-item-sliding  *ngFor="let  check  of  checklists"> 

Then we would render the data like this: 

{{check .title}} 

                                                     177 

----------------------- Page 179-----------------------

and pass the reference into our functions like this: 

removeChecklist (check) 

Thatjustaboutfinishesupourhomepage,andyoushouldnowbeabletoadd,editanddeletechecklists, 

aswellaslaunchthedetailspageforaspecificchecklist(whichwon’tcontainanythingjustyet,andwon’t 

really work). 

If you fire up ionic  serve now you should see something like this: 

                                                        178 

----------------------- Page 180-----------------------

It is important to note that you must remove this line from checklist.html: 

        <ion-checkbox  [checked]="item .checked" 

                                                   179 

----------------------- Page 181-----------------------

              (click)="toggleItem (item)"></ion-checkbox> 

ifyouwanttocreateanitemandthengotoitsdetailpage. Inalaterlessonwewillonlyincludethisif 

there is item data available, but right now we aren’t doing that so an error will be caused since it is trying 

to access data that does not exist. 

We will get to all of this later anyway, so you only need to do these extra steps if you want to have a play 

around with the app right now. 

Checklist Items 

Now that we can trigger the checklist detail page, we’d best get some content in there and add a way 

for people to create and modify individual checklist items. In this section we will be implementing our 

ChecklistPage,whichislaunchedbythehomepageandissuppliedsomedataregardingwhichchecklist 

is being viewed. 

Let’s start by setting up the class definition again. 

> Modify src/pages/checklist/checklist .ts to reflect the following: 

import  {  Component  }  from        '@angular/core '; 

import  {  NavController , NavParams , AlertController  }  from                   'ionic-angular '; 

@Component ({ 

   selector :  'page-checklist ', 

   templateUrl :  'checklist .html ' 

}) 

export  class  ChecklistPage  { 

   checklist : any ; 

                                                     180 

----------------------- Page 182-----------------------

   constructor(public  nav : NavController , public  navParams : NavParams , public 

       alertCtrl : AlertController){ 

     this .checklist  =  this .navParams .get ('checklist '); 

   } 

   addItem (): void  { 

   } 

   toggleItem (item): void  { 

   } 

   removeItem (item): void  { 

   } 

   renameItem (item): void  { 

   } 

   uncheckItems (): void  { 

   } 

} 

There’snothingmuchgoingonherethatyouarenotalreadyfamiliarwith,theonlythingoutoftheordinary 

is the use of NavParams. When we pass in data to another page, we can grab it by injecting NavParams 

andusingthe get method. Inthisinstancewearejustpassinginthechecklistdatathatwewanttoview, 

                                                181 

----------------------- Page 183-----------------------

but you can also pass in multiple values if you like. 

Just as we did before, we are going to go through implementing these functions one by one now. A lot of 

these will be quite similar to what we just did for the home page. 

addItem 

> Modify the addItem function to reflect the following: 

     addItem (): void  { 

           let  prompt  =  this .alertCtrl .create({ 

             title :  'Add  Item ', 

             message :  'Enter  the  name  of  the  task  for  this  checklist below :', 

             inputs :  [ 

                { 

                   name :  'name ' 

                } 

             ], 

             buttons :  [ 

                { 

                   text :  'Cancel ' 

                }, 

                { 

                   text :  'Save ', 

                   handler : data  =>  { 

                               this .checklist .addItem (data .name); 

                   } 

                } 

             ] 

           }); 

                                                  182 

----------------------- Page 184-----------------------

           prompt .present (); 

     } 

This should all look very familiar, but notice the difference in the handler. Since we created an addItem 

helpfunctiononourdatamodel,allwehavetodoiscallthatandpassinthenameoftheitemwewantto 

create (I told you the data model would come in handy!). 

renameItem 

> Modify the renameItem function to reflect the following: 

     renameItem (item): void  { 

           let  prompt  =  this .alertCtrl .create({ 

             title :  'Rename  Item ', 

             message :  'Enter  the  new  name  of  the  task  for  this  checklist below :', 

              inputs :  [ 

                { 

                   name :  'name ' 

                } 

             ], 

             buttons :  [ 

                { 

                   text :  'Cancel ' 

                }, 

                { 

                   text :  'Save ', 

                   handler : data  =>  { 

                     this .checklist .renameItem (item, data .name); 

                                                  183 

----------------------- Page 185-----------------------

                   } 

                } 

             ] 

           }); 

           prompt .present (); 

     } 

Once again, almost the exact same idea except we are calling the renameItem helper function on our 

data model in the handler, and we are also passing through a reference to the specific item that we are 

renaming. 

removeItem 

> Modify the removeItem function to reflect the following: 

     removeItem (item): void  { 

           this .checklist .removeItem (item); 

     } 

Thisoneisevensimpler,wesimplycallthe removeItem helperfunctiononthedatamodelandpassita 

reference to the item we want to delete. 

toggleItem 

> Modify the toggleItem function to reflect the following: 

     toggleItem (item): void  { 

           this .checklist .toggleItem (item); 

     } 

                                                  184 

----------------------- Page 186-----------------------

Thisfunctionisusedtotogglethecheckmarksonanindividualitemonandoff,andoncemorewesimply 

pass through a reference to the item we want to toggle to the data model. 

uncheckItems 

> Modify the uncheckItems function to reflect the following: 

     uncheckItems (): void  { 

           this .checklist .items .forEach ((item)  =>  { 

                if(item .checked){ 

                     this .checklist .toggleItem (item); 

                } 

           }); 

     } 

Thisfunctionistiedtotheresetbuttonweaddedtoourtemplate,andwillloopthrougheveryitemwehave 

in the checklist and call the toggleItem function in the data model if the current item is checked. This 

allows the user to uncheck all items at once. 

Nowallwehavelefttodoisupdatethetemplateforourchecklistpage. We’vealreadysetupmostofthe 

structure for this template, but just like with the home page we will need to add a little bit more to handle 

displaying data. 

> Modify src/pages/checklist/checklist .html to reflect the following 

<ion-header> 

   <ion-navbar  color="secondary"> 

     <ion-title> 

           {{checklist .title}} 

     </ion-title> 

     <ion-buttons  end> 

           <button  ion-button  icon-only  (click)="uncheckItems ()"><ion-icon 

               name="refresh-circle"></ion-icon></button> 

                                                  185 

----------------------- Page 187-----------------------

         <button  ion-button  icon-only  (click)="addItem ()"><ion-icon 

            name="add-circle"></ion-icon></button> 

    </ion-buttons> 

  </ion-navbar> 

</ion-header> 

<ion-content> 

  <ion-list  no-lines> 

    <ion-item-sliding  *ngFor="let  item  of  checklist .items"> 

         <ion-item> 

         <ion-label>{{item .title}}</ion-label> 

             <ion-checkbox  [checked]="item .checked"  (click)="toggleItem (item)"> 

             </ion-checkbox> 

         </ion-item> 

         <ion-item-options> 

             <button  ion-button  icon-only  color="light" 

                 (click)="renameItem (item)"><ion-icon 

                 name="clipboard"></ion-icon></button> 

             <button  ion-button  icon-only  color="danger" 

                 (click)="removeItem (item)"><ion-icon 

                 name="trash"></ion-icon></button> 

         </ion-item-options> 

    </ion-item-sliding> 

  </ion-list> 

                                         186 

----------------------- Page 188-----------------------

</ion-content> 

Thisshouldalllookprettysimilartothehomepagetemplate,butthereareafewdifferences. Weareusing 

the checklist data from our class to display the title of the current checklist in the navbar. We are again 

looping through data using ngFor but this time we are only looping through the items, which are a child 

of the checklist. Also notice that as well as rendering data using double braces like this: 

{{item .title}} 

we can also set properties on elements using the square brackets like this: 

 [checked]="item .checked" 

this will set checked to be the value of whatever item .checked evaluates to. 

Summary 

You should now be able to perform just about every function of the application, which includes creating 

checklists, modifying them, viewing individual checklists, and adding items to individual checklists. 

Try running the application in your browser and adding your own checklists and checklist items. 

In the next lesson we’ll work on saving data and then we’ll look into prettying up the application (function 

before form right?). 

                                                     187 

----------------------- Page 189-----------------------

Lesson 6: Saving and Loading Data 

You know what would be really annoying? If you create an entire checklist full of items for some task you 

need to complete, come back to use it later and it’s just gone. Well that’s exactly how the application 

works right now, so we are going to need to add a way to save any data the user adds to the application 

for use later. 

We’ve already set up a lot of the structure for this, we’re subscribing to our Observables and calling the 

save function every time some data changes, we just need to implement that function now. 

> Modify the save function in src/pages/home/home .ts to reflect the following: 

   save(): void  { 

      Keyboard .close(); 

      this .dataService .save(this .checklists); 

   } 

Ifyourecall,earlierwealreadygeneratedandimportedadataservice,soallweneedtochangehereisto 

add a call to it and pass in the current checklists data. Of course, we haven’t actually implemented that 

dataserviceyetsoitwon’tdoanythingwiththedata,solet’sfixthatnow. Noticethatwealsomakeacall 

toclosetheKeyboardhere,sincethe save methodiscalledwheneveranyitemisupdated,wecanuseit 

to make sure that the keyboard is closed after a user is done adding or editing any data. 

Saving Data 

We’regoingtoaddthecodefor data.ts nowsothatitwillsaveintostorageanydatathatitispassed. The 

code for this service is actually surprisingly simple, so let’s take a look at it first and then talk through it. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Storage  }  from        '@ionic/storage '; 

import  {  Injectable  }  from         '@angular/core '; 

                                                      188 

----------------------- Page 190-----------------------

@Injectable () 

export  class Data  { 

   constructor(public  storage : Storage){ 

   } 

   getData (): Promise<any>  { 

     return  this .storage .get ('checklists '); 

   } 

   save(data): void  { 

     let  saveData  =  []; 

     //Remove  observables 

     data .forEach ((checklist)  =>  { 

        saveData .push ({ 

          title : checklist .title , 

          items : checklist .items 

        }); 

     }); 

     let  newData  =  JSON .stringify(saveData); 

     this .storage .set('checklists ', newData); 

   } 

} 

There’s a new import here that we haven’t seen before: 

import  {  Storage  }  from    '@ionic/storage '; 

                                                189 

----------------------- Page 191-----------------------

Storage is Ionic’s generic storage service, and it handles storing data in the best way possible whilst 

providing a consistent API for us to use. 

Whenrunningonadevice,andiftheSQLitepluginisavailable(whichweinstalledearlier),itwillstoredata 

usinganativeSQLitedatabase. SincetheSQLitedatabasewillonlybeavailablewhenrunningnativelyon 

adevice, Storage willalsouse IndexedDB,WebSQL,orstandardbrowser localStorage iftheSQLite 

database is not available. 

It’sbesttouseSQLitewherepossible,becausethebrowserbasedlocalstorageisnotcompletelyreliable 

andcanpotentiallybewipedbythe operating system. Havingyourdatawipedrandomlyisobviouslynot 

ideal. 

Let’s take a look at the getData function: 

   getData (): Promise<any>  { 

      return  this .storage .get ('checklists '); 

   } 

Thisfunctionwillallowustoretrievethelatestdatathathasbeenstored,anditwillreturnitintheformofa 

Promise. WearesettingthereturntypeforthisfunctionasaPromisethatreturns <any> type,thisisone 

ofthemorecomplicatedtypes. Remember,addingtypeslikethisisnotrequiredsoifyouareconfusedby 

this and would prefer to leave it out you could just do this instead: 

  getData (){ 

      return  this .storage .get ('checklists '); 

   } 

Noticethatwearenotsettingupthehandlerforwhenthepromisefinisheshere,insteadwejustreturnthe 

result of the get method (which will be a promise which resolves with the data that is currently in storage). 

Remember that this operation is not instant, and this allows us to set up the handler from wherever in the 

code this method is being called, which makes more sense for the flow of the application (hopefully this 

will be made more clear shortly). 

Then we have our saveData function, which handles actually saving the data into storage: 

                                                       190 

----------------------- Page 192-----------------------

   save(data): void  { 

      let  saveData  =  []; 

      //Remove  observables 

      data .forEach ((checklist)  =>  { 

        saveData .push ({ 

           title : checklist .title , 

           items : checklist .items 

        }); 

      }); 

      let  newData  =  JSON .stringify(saveData); 

      this .storage .set('checklists ', newData); 

   } 

AsImentioned,wearestoringthedataasasingleJSONencodedstring,sowecallthe JSON .stringify 

function and then store the data using the set method on our storage object. Before we do that though, 

we remove the observable stuff from the data by only pushing the title and the items since it doesn’t 

play nice with JSON (it causes a circular object error), and we’ll just be recreating them later anyway. 

That’sallthereistosavingthedata,whichisn’treallyallthatcomplex. Nowwejustneedtohandleloading 

that data back into the application. 

Loading Data 

We are going to want to load the checklists data from storage whenever the user opens the application, 

so a good place to do this is the ionViewDidLoad hook on our home page, which triggers as soon as 

the page is loaded. We are also going to make a slight modification to the constructor. 

> Modify the constructor and ionViewDidLoad in src/pages/home/home .ts to reflect the 

                                                    191 

----------------------- Page 193-----------------------

following: 

   constructor(public  nav : NavController , public  dataService : Data , public 

       alertCtrl : AlertController , public  platform : Platform)  { 

   } 

   ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

        this .dataService .getData ().then ((checklists)  =>  { 

          let  savedChecklists : any  =  false ; 

          if(typeof (checklists)  !=  "undefined"){ 

             savedChecklists  =  JSON .parse (checklists); 

          } 

          if(savedChecklists){ 

             savedChecklists .forEach ((savedChecklist)  =>  { 

               let  loadChecklist  =  new  ChecklistModel (savedChecklist .title , 

                    savedChecklist .items); 

               this .checklists .push (loadChecklist); 

               loadChecklist .checklist .subscribe(update  =>  { 

                  this .save(); 

               }); 

                                                192 

----------------------- Page 194-----------------------

              }); 

           } 

         }); 

      }); 

   } 

We’remakinga callto the getData function thatwe justdefined in ourdata service. As Imentioned,the 

getData function returns a promise rather than the data directly, which allows us to handle the response 

here once it has finished loading. If the getData function just returned the data directly, rather than a 

promise, then the data would likely not have even been returned yet when we try to access it. 

Sowewaitforthedatatoberetrieved,andthenpassthechecklistsdataintoourhandler. Firstwedecode 

the JSON string into an array that we can work with, and then we loop through every item in the array 

and create a new Checklist Model based on it’s data. The reason we loop through the data and create 

new models rather than just settings this .checklists to be savedChecklists directly is because 

by converting the checklists into a JSON string when we store it we lose the ability to use the helper 

functions we defined on the model. So we just use the title and items data to recreate new objects for all 

the checklists. 

Finally,wesetupthelistenerfortheObservableagainsothatthesavefunctionwillbetriggeredwhenever 

thedatachanges. It’simportantthatwedoallofthiswithinthe platform .ready ()call,whichwillonly 

execute after the device is ready. Since we are interacting with the devices storage, if we try to do that 

before the device is ready it will cause some issues. 

                                                     193 

----------------------- Page 195-----------------------

Summary 

That’s all there is to it, the data will now be saved to the SQLite database whenever changes are made, 

andwhentheapplicationisreopenedallofthedatawillbeloadedbackin. Tryaddingsomechecklistsor 

modifying the state of your checklists and reloading the application to see if the changes stick around. 

                                                    194 

----------------------- Page 196-----------------------

Lesson 7: Creating an Introduction Slider & Theming 

In the last lesson for the Quick Lists application we are going to be adding a few final touches to improve 

theuserexperience. Wewilladdaslideshowtutorialtoshowtheuserhowtousetheapp(whichwillonly 

display on their first time using the app) and we will also add some styles to make the application look a 

bit prettier. 

Let’s start off with the slider. 

Slider Component 

It’s pretty common for mobile applications to display some instructions to the user through the use of a 

sliding card style tutorial. Ionic has a slide component built-in so we are going to make use of that, and 

tomakesuretheuserdoesn’thavetogothroughthetutorialeverytimewewillbekeepingtrackofifthey 

have already seen it or not. 

The slider itself is going to be pretty simple, it will allow us to display a series of images and on the last 

slide there will be a button to start using the application. 

First, we’re going to build the slider component and then we are going to look at how to integrate it into 

our application. We’ll start by creating the template. 

> Modify src/pages/intro/intro .html to reflect the following 

<ion-content> 

   <ion-slides  [options]="slideOptions"> 

      <ion-slide> 

         <img  src="assets/images/slide1 .png" /> 

      </ion-slide> 

                                                       195 

----------------------- Page 197-----------------------

     <ion-slide> 

        <img  src="assets/images/slide2 .png" /> 

     </ion-slide> 

     <ion-slide> 

        <img  src="assets/images/slide3 .png" /> 

     </ion-slide> 

     <ion-slide> 

        <ion-row> 

          <ion-col> 

             <button  ion-button  color="light"  (click)="goToHome ()" 

                 style="margin-top :20px ;">Start  Using  Quicklists</button> 

          </ion-col> 

        </ion-row> 

        <ion-row> 

          <ion-col> 

             <img  src="assets/images/slide4 .png" /> 

          </ion-col> 

        </ion-row> 

     </ion-slide> 

   </ion-slides> 

</ion-content> 

The first thing you might notice about this is that it doesn’t contain a navbar, only the content area. It’s 

notnecessarytoincludethenavigationbaroneverypage,andwedonotwanttodisplayithere. Therest 

of the code is pretty simple, we use <ion-slides> with a options property so that we can configure it 

with some options in our class definition in a moment, and we use <ion-slide> to define each one of 

                                               196 

----------------------- Page 198-----------------------

our slides. 

Sointhecodeabove,theuserwillfirstseeaslidecontainingthe slide1 image,thenwhentheyswipethey 

will see slide2 and so on until they reach the last slide which contains a button to go to the home page. 

The last slide is a little more complicated because we are making use of <ion-row> and <ion-col> 

so that we can position the button where we want it. These two directives make up Ionic 2’s grid system, 

where rows get placed underneath one another, and cols within those rows appear side by side. This 

diagram should help illustrate that: 

This is a very simple example because we just want the button to appear above the image, but you can 

create quite complex layouts by supplying a width to the cols like this: 

<ion-row> 

      <ion-col width-10></ion-col> 

      <ion-col width-50></ion-col> 

                                                      197 

----------------------- Page 199-----------------------

</ion-row> 

and you can include as much nesting as you like. The result of our grid layout will look like this: 

                                                     198 

----------------------- Page 200-----------------------

Now we need to define the class for our intro component. 

> Modify src/pages/intro/intro .ts to reflect the following 

import  {  Component  }  from      '@angular/core '; 

import  {  NavController  }  from       'ionic-angular '; 

import  {  HomePage  }  from      '../home/home '; 

@Component ({ 

   selector :  'page-intro ', 

   templateUrl :  'intro .html ' 

}) 

export  class  IntroPage  { 

   slideOptions : any ; 

   constructor(public  nav : NavController){ 

     this .slideOptions  =  { 

        pager : true 

     }; 

   } 

   goToHome (): void  { 

     this .nav .setRoot(HomePage); 

   } 

} 

Isn’t this just the simplest class you’ve seen so far? All it does is import the home page, set the pager 

optionforourslider,andchangetherootpagetoitusingtheNavControllerwhenthe goToHome function 

is called. This allows us to tap the button on the last slide to go to our main home page view, but we will 

have a bit of a problem. Every time the user opens the application they are going to have to go through 

                                                  199 

----------------------- Page 201-----------------------

this tutorial to get to the main app. To solve this, we are going to make one more change to our home.ts 

file. 

> Modify src/pages/home/home .ts to reflect the following imports: 

import  {  Component  }  from      '@angular/core '; 

import  {  NavController , AlertController , Platform  }  from              'ionic-angular '; 

import  {  ChecklistPage  }  from       '../checklist/checklist '; 

import  {  ChecklistModel  }  from        '../../models/checklist-model '; 

import  {  Data  }  from    '../../providers/data '; 

import  {  Keyboard  }  from      'ionic-native '; 

import  {  IntroPage  }  from      '../intro/intro '; 

import  {  Storage  }  from     '@ionic/storage '; 

> Modify ionViewDidLoad in src/pages/home/home .ts to reflect the following: 

   checklists : ChecklistModel []  =  []; 

   constructor(public  nav : NavController , public  dataService : Data , public 

       alertCtrl : AlertController , public  storage : Storage , public  platform : 

       Platform)  { 

   } 

   ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

        this .storage .get ('introShown ').then ((result)  =>  { 

           if(!result){ 

             this .storage .set('introShown ', true); 

             this .nav .setRoot(IntroPage); 

                                                  200 

----------------------- Page 202-----------------------

  } 

}); 

this .dataService .getData ().then ((checklists)  =>  { 

  let  savedChecklists : any  =  false ; 

  if(typeof (checklists)  !=  "undefined"){ 

     savedChecklists  =  JSON .parse (checklists); 

  } 

  if(savedChecklists){ 

     savedChecklists .forEach ((savedChecklist)  =>  { 

       let  loadChecklist  =  new  ChecklistModel (savedChecklist .title , 

           savedChecklist .items); 

       this .checklists .push (loadChecklist); 

       loadChecklist .checklist .subscribe(update  =>  { 

         this .save(); 

       }); 

     }); 

  } 

}); 

                                    201 

----------------------- Page 203-----------------------

      }); 

   } 

We’re importing and making use of the Storage service again now. We’re going to use this to store a flag 

that will tell us whether or not the tutorial has already been viewed. 

Sowesetupournewstorageandwecheckfortheexistenceofan introShown flag. Ifitdoesnotexist 

then we switch to our intro tutorial page and then set that flag to be true so it doesn’t show next time. 

NOTE: Fortestingpurposes,ifyouwanttoclearthisflagyouwillneedtodeletetheWebSQLdatabasethat 

is created in your browser. On Chrome, you can do that by going to chrome ://settings/cookies, 

searching for localhost, and then deleting _ionicstorage. This will of course delete all data that is 

stored in the WebSQL database, not just the introShown flag. 

Theming 

As far as functionality in the application goes, we’re 100% done. Now we’re just going to add a bit of 

styling to the application to make it look quite a bit better than it currently does. 

If you remember from the basics section, there’s quite a few different ways we can add styles to the 

application. We will be basically using all of these methods. We will be adding specific styles to each of 

our components, we will be adding some generic styles in our core file, and we will be overriding some 

SASS variables in the variables file. If you skipped over that part or are not entirely sure what I’m talking 

about here, I’d recommend going back and reading about theming in the basics sections. 

Since we use SASS for CSS in Ionic 2, we are able to nest CSS styles. Since each page is its own 

component,wecaneasilymakesureweonlytargetelementsthatarewithinthatcomponent. Eventhough 

we have individual .scss files for each component, the CSS rules still apply globally. So if you were to 

add the following style to one of your components: 

p  { 

                                                      202 

----------------------- Page 204-----------------------

   font-size :  1.2em       !important; 

} 

It would apply to every component in the application. 

> Modify src/pages/intro/intro .scss to reflect the following: 

page-intro  { 

   ion-slide  { 

      background-color :  #32db64 ; 

   } 

   ion-slide  img  { 

      height :  85vh     !important; 

      width : auto     !important; 

   } 

} 

As you can see, we have defined the styles for the page inside of page-intro, so the styles will only 

apply to elements inside of the <page-intro> element which will be added to the DOM (because this 

component has a selector of page-intro), not the entire application. These styles will make the 

background colour of the slides green, and also set the images inside of the slides to take up 85% of the 

available viewport height. 

The rest of our components are going to require us adding some classes into our template that we can 

hook into, so from now on I’ll post both the finalised template code, as well as the styles to go along with 

it. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

                                                      203 

----------------------- Page 205-----------------------

  <ion-navbar  color="secondary"> 

    <ion-title> 

      <img  src  = "assets/images/logo .png" /> 

    </ion-title> 

    <ion-buttons  end> 

      <button  ion-button  icon-only  (click)="addChecklist ()"><ion-icon 

          name="add-circle"></ion-icon></button> 

    </ion-buttons> 

  </ion-navbar> 

</ion-header> 

<ion-content> 

  <ion-list  no-lines> 

    <ion-item-sliding  *ngFor="let  checklist  of  checklists"> 

      <button  ion-item  (click)="viewChecklist (checklist)" class="home-item"> 

           {{checklist .title}} 

           <span  class="secondary-detail">{{checklist .items .length}} 

              items</span> 

      </button> 

      <ion-item-options> 

         <button  ion-button  icon-only  color="light" 

            (click)="renameChecklist (checklist)"><ion-icon 

            name="clipboard"></ion-icon></button> 

         <button  ion-button  icon-only  color="danger" 

            (click)="removeChecklist (checklist)"><ion-icon 

            name="trash"></ion-icon></button> 

      </ion-item-options> 

                                         204 

----------------------- Page 206-----------------------

     </ion-item-sliding> 

   </ion-list> 

</ion-content> 

> Modify src/pages/home/home .scss to reflect the following: 

page-home  { 

   ion-item-sliding  { 

     margin :  5px ; 

   } 

   .home-item  { 

       font-size :  1.2em ; 

       font-weight : bold ; 

       color :  #282828; 

       padding-top :  10px ; 

       padding-bottom :  10px ; 

   } 

   .secondary-detail  { 

     display : block ; 

     color :  #cecece; 

     font-weight :  400; 

     margin-top :  10px ; 

   } 

} 

                                              205 

----------------------- Page 207-----------------------

We’re not doing anything too crazy here, just adding a few tweaks to the margins, padding and colours. 

Now let’s do the same to the checklist page. 

> Modify src/pages/checklist/checklist .scss to reflect the following: 

page-checklist  { 

   ion-item-sliding  { 

     margin :  5px ; 

   } 

   ion-checkbox  { 

        font-size :  0.9em ; 

        font-weight : bold ; 

        color :  #282828; 

        padding-top :  0px ; 

        padding-bottom :  0px ; 

        padding-left :  4px ; 

        border : none    !important; 

   } 

   ion-item-content  { 

     border : none     !important; 

   } 

   ion-checkbox  { 

     border-bottom : none       !important; 

   } 

   ion-checkbox     .item-inner  { 

     border-bottom : none       !important; 

                                                 206 

----------------------- Page 208-----------------------

   } 

} 

Once again, just a few minor tweaks here. Now we are going to add the styles that will apply across the 

entire application: 

> Add the following styles to src/app/app .scss: 

ion-content  { 

     background-color :  #32db64         !important; 

} 

 .logo  { 

     max-height :  39px ; 

} 

button  { 

     border : none      !important; 

} 

Here we’re making the entire application have a background colour of green, we set a maximum height 

for the logo and remove borders from our buttons. Finally, we are going to override some of the SASS 

variables. 

> Modify the Named  Color  Variables section in src/theme/variables .scss to reflect the 

following: 

$colors :  ( 

   primary :       #387ef5 , 

   secondary :     #32db64 , 

   danger :        #f53d3d , 

   light :         #f4f4f4 , 

                                                   207 

----------------------- Page 209-----------------------

   dark :          #222, 

   favorite :      #69BB7B 

); 

$list-background-color :  #fff ; 

$list-ios-activated-background-color :  #3aff74 ; 

$list-md-activated-background-color :  #3aff74 ; 

$checkbox-ios-background-color-on :  #32db64 ; 

$checkbox-ios-icon-border-color-on :  #fff ; 

$checkbox-md-icon-background-color-on :  #32db64 ; 

$checkbox-md-icon-background-color-off :  #fff ; 

$checkbox-md-icon-border-color-off :  #cecece; 

$checkbox-md-icon-border-color-on :  #32db64 ; 

We’ve modified the colours for the application and set a few iOS and Android specific styles (the names 

should make it pretty clear what is being changed). One of the coolest things about Ionic 2 is how well it 

handles UI differences between iOS and Android, for the most part it just works flawlessly out of the box. 

If you take a look at the application on iOS and on Android, you will see the differences: 

                                                  208 

----------------------- Page 210-----------------------

NOTE: A handy way to see iOS and Android side by side is to use Ionic Lab, which can be activated 

by using the ionic  serve  -l command. You may notice that the applications have a scrollbar on the 

edgewhenviewingthroughIonicLab,Ibelievethisisabuganditisnotpresentwhenrunningonanactual 

device (or on the Chrome Dev Tools emulator). 

Asyoucansee,Ionic2automaticallyconformstothenormsofwhateverplatformtheapplicationisrunning 

on. 

                                                  209 

----------------------- Page 211-----------------------

Summary 

That’s it! The application should now be completely finished and it finally actually looks pretty nice too. 

                                                 210 

----------------------- Page 212-----------------------

Conclusion 

Congratulations on making it through the Quick Lists tutorial. This application is a great example for 

beginners to start getting their feet wet, and the main take aways from it are: 

     • How to create, read, update and delete data 

     • How to permanently store data and retrieve it 

     • How to create and use your own observables 

     • How to navigate and pass data between pages 

     • How to create a data model 

There’s always room to take things further though, especially when you’re trying to learn something. Fol- 

lowing tutorials is great, but it’s even better when you figure something out for yourself. Hopefully you 

have enough background knowledge now to start trying to extend the functionality of the application by 

yourself, here’s a few ideas to try out: 

     • Retheme the application with your own styling, try different colours, padding, margins and so on 

       [EASY] 

     • Adda‘DateCreated’fieldtothedatamodelthatrecordswhenachecklistwascreated,anddisplay 

       it in the template (don’t forget to make sure it gets loaded from memory too!) [MEDIUM] 

     • Figure out how many items have been marked as completed in a single checklist, and display a 

       progress indicator (i.e 5/7 completed) [MEDIUM] 

     • Add the ability to attach notes to any specific checklist item [HARD] 

Remember, the Ionic 2 documentation is your best friend when trying to figure things out. 

What next? 

You have a completed application now, but that’s not the end of the story. You also need to get it running 

on a real device and submitted to app stores, which is no easy task. The final sections in this book will 

walk through how to take what you have done here, and get it onto the app stores so make sure to give 

                                                      211 

----------------------- Page 213-----------------------

that a read. 

                                                      212 

----------------------- Page 214-----------------------

Chapter 4 

Giflist 

                                 213 

----------------------- Page 215-----------------------

Lesson 1: Introduction 

Giflist was the first application I created with Ionic 2, and it was originally built on one of the really early 

alpha versions of Ionic 2. It’s been updated a bit since then, and more recently with the Ionic 2 beta for 

this book. Even though it was the first app I built it’s still my favourite, so I’m excited to walk you through 

building it. 

Ithinkit’smyfavouritebecauseit’sjustareallyfunapp. It’safunapptobuildbecausealotofinteresting 

topics are covered like using the Reddit API and using HTML5 video, and it’s a fun app to use because… 

who doesn’t like looking at funny GIFs? 

About Giflist 

Giflist is a pretty simple application, the general idea is that a user can enter in any subreddit from reddit, 

and the app will fetch and display GIFs from that subreddit. 

I’m going to assume if you’re reading this book then you know what reddit is - but - I don’t really like to 

makeanyassumptionssoifyou’resomehownot familiarwithReddit,basicallyit’sasitewherepeoplecan 

submit links to anything and the user base votes up stuff that they think is cool or relevant. A “subreddit” 

is basically a category on reddit, a few popular ones being: 

     • gifs 

     • askreddit 

     • worldnews 

As well as just fetching GIFs from reddit, users will also be able to supply some settings to configure the 

application to their preferences. Although the concept is pretty simple, there are a few interesting things 

that you will learn through building it, this will include: 

     • Fetching data from a 3rd party API 

     • Data storage 

     • Theming 

                                                          214 

----------------------- Page 216-----------------------

     • Lists 

     • Modals 

     • Data models 

     • HTML5 Video 

Here’s a quick run down on the exact features of the application: 

     • The user will be able to input any subreddit 

     • An endless list of GIFs will be displayed as a list (assuming GIFs are available) 

     • The user will be able to play a GIF by tapping it 

     • The user will be able to set the following options: default subreddit, sort order, GIFs per page 

     • The users settings will be remembered upon returning to the application 

and a couple of screenshots to put it into context: 

                                                    215 

----------------------- Page 217-----------------------

       216 

----------------------- Page 218-----------------------

       217 

----------------------- Page 219-----------------------

Lesson Structure 

1. Getting Ready 

2. The List Page 

3. The Reddit API and HTML5 Video 

4. Settings 

5. Theming 

Ready? 

Now that you know what you’re in for, let’s get to building it! 

                                                    218 

----------------------- Page 220-----------------------

Lesson 2: Getting Ready 

In this lesson we are going to prepare our application for the journey ahead. We are going to of course 

generate the application, and we are also going to set up all of the components and Cordova plugins we 

will need. At the end of this first lesson we should have a nice skeleton application set up with everything 

we need to start diving into coding. 

A good rule of thumb before starting any new application is to make sure you have the latest version of 

Ionic and Cordova, so if you haven’t done it recently then make sure to run: 

npm   install  -g     ionic  cordova 

or 

sudo  npm    install  -g     ionic  cordova 

beforeyoucontinue. IfyourunintoanytroubleinstallingIonicorgeneratingnewprojects,makesurethat 

you have a recent Node version installed. After you have that installed, you should also run the following 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

Generate a new application 

We will be using the blank starter template for this application which, as the name implies, is basically an 

emptyIonicproject. Itcomeswithonepagebuiltincalled home whichwewillrepurposeasourlistpage 

in the next lesson. 

> Run the following command to generate a new application 

ionic  start  giflist  blank  --v2 

                                                     219 

----------------------- Page 221-----------------------

> Make the new project your current working directory by running the following command: 

cd  giflist 

Your project should now be generated - now you can open up the project folder in your favourite editor. 

You can take a look at how your application looks by running the following command: 

ionic  serve 

which for now should look something like this: 

                                                   220 

----------------------- Page 222-----------------------

       221 

----------------------- Page 223-----------------------

Create the Required Components 

The structure of this application is pretty simple, so all we’re going to have is 2 pages: the list page and 

the settings page. We’ve already got a home component which we will use as our list page, so we only 

need to create the Settings page. 

> Run the following command to generate a Settings page: 

ionic  g  page  Settings 

Create the Required Services 

Aswellasour2pages,wearealsogoingtocreateadataservicetohandlestoringandretrievingtheuser’s 

settings: 

> Run the following command to generate a Data provider: 

ionic  g  provider  Data 

and a provider that will handle fetching data from reddit for us: 

> Run the following command to generate a Reddit provider: 

ionic  g  provider  Reddit 

Add Pages & Services to the App Module 

In order to use these pages and services throughout our application, we need to add them to our 

app.module.ts file. All of the pages we created need to be added to both the declarations array and 

the entryComponents array, all of the providers we create need to be added to the providers array, 

and any custom components or pipes only need to be added to the declarations array. Our model is 

just a simple class we willimport wherever we need, there is no need to set it up anywhere in the module. 

                                                     222 

----------------------- Page 224-----------------------

> Modify src/app/app.module.ts to reflect the following 

import  {  NgModule  }  from   '@angular/core '; 

import  {  IonicApp, IonicModule  }  from      'ionic-angular '; 

import  {  MyApp  }  from  './app .component '; 

import  {  Storage  }  from   '@ionic/storage '; 

import  {  HomePage  }  from   '../pages/home/home '; 

import  {  SettingsPage  }  from    '../pages/settings/settings '; 

import  {  Reddit  }  from   '../providers/reddit '; 

import  {  Data  }  from  '../providers/data '; 

@NgModule ({ 

  declarations :  [ 

     MyApp , 

     HomePage , 

     SettingsPage 

  ], 

   imports :  [ 

     IonicModule .forRoot (MyApp) 

  ], 

  bootstrap :  [IonicApp], 

  entryComponents :  [ 

     MyApp , 

     HomePage , 

     SettingsPage 

  ], 

  providers :  [Storage , Data , Reddit] 

}) 

export  class  AppModule  {} 

Noticethatwealsohavea Storage provideraswellasthe Data  provider  we        created .Storage‘is 

                                              223 

----------------------- Page 225-----------------------

provided by Ionic and allows us to save and retrieve data - we will be making use of this later. 

Add Required Platforms 

Before you can build for certain platforms, you need to add them to your project. This is something we 

will be doing way later on in this course, but you may as well just set them up now. 

> Run the following command to add the iOS platform to your application 

ionic  platform  add  ios 

       Run the following command to add the Android platform to your application 

ionic  platform  add  android 

Add Required Cordova Plugins 

This application will use a few different Cordova plugins. Remember, Cordova plugins can only be used 

when running on a real device. I’ll explain each plugin as we run through the commands for adding them. 

> Run the following command to add the SQLite plugin: 

ionic  plugin  add  cordova-sqlite-storage 

ThisplugingivesyouaccesstonativestoragewithanSQLitedatabase. Weareaddingittothisapplication 

because the Ionic local storage service can make use of this plugin to provide more stable data storage. 

> Run the following command to add the In App Browser plugin: 

ionic  plugin  add  cordova-plugin-inappbrowser 

Thispluginmakesawebviewavailabletousthatwecanlaunchexternalwebsitesin. Wewillbeusingthis 

plugin in this application to allow the users to view the original Reddit submission of a GIF in a browser. 

> Run the following command to add the Status Bar plugin: 

                                                     224 

----------------------- Page 226-----------------------

ionic  plugin  add  cordova-plugin-statusbar 

Wewillbeaddingthisplugintoallprojectstogiveuscontroloverthestatusbarinourapplication(thebar 

at the top of the devices screen that contains the time, battery information and so on). 

> Run the following command to add the Splash Screen plugin: 

ionic  plugin  add  cordova-plugin-splashscreen 

This plugin allows us to control the splash screen (the fullscreen graphic that briefly displays when you 

open an app) 

> Run the following command to add the Keyboard plugin: 

ionic  plugin  add  ionic-plugin-keyboard 

This plugin allows us to control the software Keyboard. 

> Run the following command to add the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

This plugin is required for all applications, and helps to define what resources should be allowed to be 

loaded in your application. Without it, resources you try to load will fail. 

As well as adding the plugin, you also need to define a “Content Security Policy” in your index.html 

file. We will be adding a very permissive policy which will essentially allow us to load any resources. 

Depending on your application, you may look into providing a more strict policy, but an open policy is 

good for development. 

> Modify your src/index .html file to include the following meta tag: 

<meta  http-equiv= "Content-Security-Policy" content="font-src                         'self ' data :; 

     img-src  *  data :; default-src  gap ://ready  file ://* *;  script-src                     'self ' 

     'unsafe-inline '  'unsafe-eval ' *            ; style-src      'self '  'unsafe-inline ' *"> 

       Run the following command to add the Crosswalk plugin: 

                                                      225 

----------------------- Page 227-----------------------

ionic  plugin  add  cordova-plugin-crosswalk-webview 

This is another plugin that we will add to every application, but you may decide you want to leave it out. 

By adding this plugin, when you build for Android “Crosswalk” will be used. Android has a lot of issues, 

especiallywitholderdevices,becausethereissomanydifferentsoftwareversionsoutthereanddifferent 

versions have different browsers (remember, since we are building HTML5 applications it is actually a 

browserenginepoweringandrunningourapplication). WhatCrosswalkdoesisbundleamodernbrowser 

into your application so no matter what device you are running on your app will be powered by the same 

browser, and the Crosswalk browser can improve performance a lot. 

The only real downside to this is that it increases the size of your application by a significant amount. In 

general,Ithinkit’sworthitandI’drecommendyouincludeitbutyoumayleaveitoutifyoulike. Formore 

information take a look at the Crosswalk Project website: https://crosswalk-project.org/ 

Set up Images 

Whenbuildingthisapplicationwearegoingtobemakinguseofafewimages. I’veincludedtheseinyour 

download pack but you will need to set them up in the application you generate. 

> Copy the images folder in the download pack for this application from src/assets to your own 

src/assets folder 

Summary 

That’s it! We’re all set up and ready to go, now we can start working on the interesting stuff. 

                                                    226 

----------------------- Page 228-----------------------

Lesson 3: The List Page 

In the last lesson we worked on getting everything set up correctly, and now we’re going to start actually 

building stuff. In this lesson we’ll mostly be focusing on modifying the Home page to act as the list that 

will contain our feed of GIFs. 

The Reddit Provider 

Thelayoutthatweareabouttocreatereliesheavilyonpullingindatafromreddit,andwehavedecidedthat 

wewillcreateaprovidertohandlethoseoperationsforus. We’renotgoingtojumprightintoimplementing 

thenittygrittydetailsoftheredditproviderjustyet,butwedowanttosetupthefunctionswewilleventually 

create so that we will be able to reference them in the rest of this lesson. 

> Modify src/providers/reddit .ts to reflect the following: 

import  {  Injectable  }  from        '@angular/core '; 

import  {  Http  }  from      '@angular/http '; 

import    'rxjs/add/operator/map '; 

@Injectable () 

export  class Reddit  { 

   settings : any ; 

   loading : boolean  =  false ; 

   posts : any  =  []; 

   subreddit : string  =       'gifs '; 

   page : number  =  1; 

   perPage : number  =  15; 

   after : string; 

   stopIndex : number ; 

   sort : string  =     'hot ' 

                                                    227 

----------------------- Page 229-----------------------

   moreCount : number  =  0; 

   constructor(public  http : Http)  { 

   } 

   fetchData (): void  { 

   } 

} 

Thisisthebasicskeletonforyourprovider,itdefinesabunchofmembervariablesanda fetchData func- 

tionthatwillhandlegrabbingthedatafromreddit. Whatthemembervariablesdomaynotbeimmediately 

obvious, so let’s go through them (in order): 

     • The settings the user has supplied 

     • Whether new GIFs are currently being fetched 

     • The entries for all the GIFs currently loaded 

     • The current subreddit 

     • The current page (i.e. how many times the user has clicked “Load More”) 

     • The amount of GIFs to display per page 

     • A reference to the last post retrieved from Reddit (so we know where to start for the next page) 

     • This will be used to store a reference to the length of the posts array 

     • The sort order for GIFs 

     • The app will keep trying to load more posts from reddit until it has enough for a full page of GIFs, 

       moreCountisusedtotellitwhenitshouldstoptryingtoloadmore(i.e.ifnotenoughGIFsarefound 

       after hitting the API 20 times) 

We will finish up this provider later, but for now let’s move on to the home page layout. 

                                                      228 

----------------------- Page 230-----------------------

The Layout 

Before we start building the layout, which will be defined in home.html, let’s take a look at what we’re 

building: 

                                                      229 

----------------------- Page 231-----------------------

It’s a reasonably simple layout, we have a toolbar at the top that contains a search bar and a settings 

button (which will launch our Settings page later). Beneath that, we have a list that holds all of the GIFs 

returnedfromReddit. Notpicturedisthe‘LoadMore’buttonwhichsitsatthebottomofthelist,whenthe 

                                                     230 

----------------------- Page 232-----------------------

user taps this it will load in the next page of GIFS. 

First we’re going to look at the entire template to see everything in context, then we’re going to break it 

down into smaller chunks that we will discuss in detail. 

> Modify src/pages/home/home .html to reflect the following 

<ion-header> 

   <ion-navbar  color="secondary"> 

     <ion-title> 

        <ion-searchbar  color="primary" placeholder= "enter  subreddit 

            name ..."></ion-searchbar> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="openSettings()"><ion-icon 

            name="settings"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

     <ion-item  no-lines> 

        GIF  GOES  HERE 

     </ion-item> 

        <ion-list-header> 

                                                231 

----------------------- Page 233-----------------------

          TITLE  GOES  HERE 

       </ion-list-header> 

     <ion-item  *ngIf="redditService .loading" no-lines  style="text-align : 

         center;"> 

       <img  src="assets/images/loader .gif" style="width : 50px " /> 

     </ion-item> 

  </ion-list> 

  <button  ion-button  full  color="light"  (click)="loadMore()">Load 

      More ...</button> 

</ion-content> 

In the first part of this code we are setting up the navigation bar: 

  <ion-navbar  color="secondary"> 

     <ion-title> 

       <ion-searchbar  color="primary" placeholder= "enter  subreddit 

           name ..."></ion-searchbar> 

     </ion-title> 

     <ion-buttons  end> 

       <button  ion-button  icon-only  (click)="openSettings()"><ion-icon 

           name="settings"></ion-icon></button> 

     </ion-buttons> 

  </ion-navbar> 

                                               232 

----------------------- Page 234-----------------------

We add the secondary attribute to the <ion-navbar> which will alter it’s style to use the secondary 

colour, which we will be changing later. 

We’reusing <ion-title>,whichisusuallyusedtosupplyatitletobedisplayedonthenavbar,toposition 

our search bar in the middle of the navbar. Usually you’d have a separate toolbar for a searchbar so that 

it can take up the whole space, but I didn’t want to clutter the screen too much so we’re going to bend 

the rules a bit here with this. In order for it to display properly, we’ll need to add a few custom styles later. 

Notice that we are also supplying the primary attribute to give the searchbar the primary colour. 

Then we use <ion-buttons> to place our settings button, which will launch our settings page in the 

navbar. Using the end directive will place the button on the right, and if we wanted to place a button on 

theleftwecouldusethe start directive. We’vealsoaddeda (click) listenertothisbuttonsothatthe 

openSettings function will be called when the button is clicked. We haven’t created this function yet 

so nothing will happen, but we will define it later in home.ts. 

Next we define a list in the main content area: 

   <ion-list> 

      <ion-item  no-lines> 

         GIF  GOES  HERE 

      </ion-item> 

         <ion-list-header> 

           TITLE  GOES  HERE 

         </ion-list-header> 

      <ion-item  *ngIf="loading" no-lines  style="text-align : center;"> 

         <img  src="assets/images/loader .gif" style="width : 50px " /> 

      </ion-item> 

   </ion-list> 

                                                     233 

----------------------- Page 235-----------------------

Lists are one of the most frequently used components in mobile applications. In Ionic you can create an 

<ion-list> and supply it any number of <ion-item> tags to create a list. For now we just have a 

single item, but later we will modify this to automatically loop over every GIF we want to display. Notice 

thatwearealsousing <ion-list-header> tocreateaheaderareawherewewillbeabletodisplaythe 

title of the GIF, and we also add no-lines to the item so that there is no borders around list items. 

AswellasourGIFitems,wearegoingtoaddoneadditionalitematthebottomofthelistwhichwillcontain 

a loading animation. This will be used to display a spinning animation when new GIFs are being fetched, 

butsince we only want it to display when loading is occuring we use the *ngIf directive to controlwhen 

it displays. In this case, the loading animation will only display when loading evaluates to true (we will 

define this in our class definition later, and toggle it on and off when we are loading). 

The last bit of code we have in our template is the load more button: 

<button  ion-button  full  color="light"  (click)="loadMore()">Load 

     More ...</button> 

Nothingtoocrazyhappeninghere,wesupplythe light directivetoagainchangethecolourandwehave 

a (click) function set up that will eventually call the loadMore () function we will define in our class 

definition. 

The Class Definition 

Withthetemplatedefinedwehaveour“view”sorted,nowweneedtocreatetheclassdefinitiontohandle 

allthelogicourlistpagewilluse. Thisiswherewewilldefineallthefunctionsthatourtemplatereferences, 

as well as any other code we want to run on this page. 

Again, we are going to set up the code for the entire class first and then we will discuss it bit by bit. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from        '@angular/core '; 

import  {  ModalController , Platform  }  from             'ionic-angular '; 

                                                     234 

----------------------- Page 236-----------------------

import  {  Keyboard  }  from 'ionic-native '; 

import  {  SettingsPage  }  from  '../settings/settings '; 

import  {  Data  }  from '../../providers/data '; 

import  {  Reddit  }  from '../../providers/reddit '; 

import  {  FormControl  }  from  '@angular/forms '; 

import   'rxjs/add/operator/map '; 

import   'rxjs/add/operator/debounceTime '; 

import   'rxjs/add/operator/distinctUntilChanged '; 

@Component ({ 

  selector :  'page-home ', 

  templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

  subredditValue : string; 

  constructor(public  dataService : Data , public  redditService : Reddit , public 

      modalCtrl : ModalController , public  platform : Platform)  { 

  } 

  ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

       this .loadSettings(); 

     }); 

  } 

                                            235 

----------------------- Page 237-----------------------

   loadSettings(): void  { 

     console .log("TODO : Implement  loadSettings()"); 

   } 

   showComments(post): void  { 

     console .log("TODO : Implement  showComments()"); 

   } 

   openSettings(): void  { 

     console .log("TODO : Implement  openSettings()"); 

   } 

   playVideo (e , post): void  { 

     console .log("TODO : Implement playVideo ()"); 

   } 

   changeSubreddit(): void  { 

     console .log("TODO : Implement  changeSubreddit()"); 

   } 

   loadMore(): void  { 

     console .log("TODO : Implement  loadMore()"); 

   } 

} 

There’sobviouslystillquiteabitofcodethatneedstobeaddedtothisclass,buteventhebasicsetupof 

the class we’ve just added is looking pretty complicated. So let’s start talking through it. 

First up are our import statements: 

                                                236 

----------------------- Page 238-----------------------

import  {  Component  }  from        '@angular/core '; 

import  {  ModalController , Platform  }  from             'ionic-angular '; 

import  {  Keyboard  }  from       'ionic-native '; 

import  {  SettingsPage  }  from         '../settings/settings '; 

import  {  Data  }  from      '../../providers/data '; 

import  {  Reddit  }  from      '../../providers/reddit '; 

import  {  FormControl  }  from        '@angular/forms '; 

import    'rxjs/add/operator/map '; 

import    'rxjs/add/operator/debounceTime '; 

import    'rxjs/add/operator/distinctUntilChanged '; 

There’s a bunch of imports here because we are setting up everything we will use later, but this is still 

probably quite a few more imports than you will likely use in most of your classes. 

The first is pretty basic, ModalController allows us to create a modal page that can be displayed on top 

ofthecurrentpage,and Platform willallowustoexecuteoperations after thedevicehasfinishedloading. 

After that, we import the Keyboard plugin (which we will be making use of shortly). 

We also import the SettingsPage we generated earlier (but are yet to complete), our Data provider that 

we also generated earlier but haven’t completed, and our unfinished Reddit provider. The FormControl 

will allow us to create a “FormControl” for inputs (which will give us access to our Observable). All of the 

rxjs imports are from the RxJS library - somewhat annoyingly, you have to import any operator you want 

to use with an Observable, so we’re doing that here. We will be making use of these soon, so I will save 

the discussion around these imports until then. 

In the next section of code we have our constructor function and ionViewDidLoad hook. The con- 

structor is an important part of the class because it is the first bit of code that will be executed when the 

componentiscreated. Itallowsustoinjectandsetupreferencestoanycomponentsorservicesweareus- 

ingandit’salsoagoodspottomakeanyfunctioncallsthatyouneedtoexecuterightaway. Keepinmind 

thatitisgenerallyconsideredbestpracticetoavoiddoingtoomuch“work”inthe constructor,soyou 

mayprefertoinsteadplacecodethatyouneedtoexecuterightawayinsideofthe ionViewDidLoad() 

lifecycle hook (this will also execute when the page is first loaded). 

                                                    237 

----------------------- Page 239-----------------------

   subredditValue : string; 

   constructor(public  dataService : Data , public  redditService : Reddit , public 

       modalCtrl : ModalController , public  platform : Platform)  { 

   } 

   ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

        this .loadSettings(); 

     }); 

   } 

In ionViewDidLoad we are setting up references for our injected services (like our Data and Reddit 

providers) and above the constructor we set up a single member variable that we will bind to the search 

input in our template. We also make a call to the loadSettings () function which will load the user’s 

settings from memory if available. It’s important that we make this call after the platform is ready. 

Let’s take a look at the remaining code in the class: 

   loadSettings(): void  { 

     console .log("TODO : Implement  loadSettings()"); 

   } 

   showComments(post): void  { 

     console .log("TODO : Implement  showComments()"); 

   } 

   openSettings(): void  { 

                                                  238 

----------------------- Page 240-----------------------

      console .log("TODO : Implement  openSettings()"); 

   } 

   playVideo (e , post): void  { 

      console .log("TODO : Implement playVideo ()"); 

   } 

   changeSubreddit(): void  { 

      console .log("TODO : Implement  changeSubreddit()"); 

   } 

   loadMore(): void  { 

      console .log("TODO : Implement  loadMore()"); 

   } 

The rest is just a bunch of functions. These functions will either be called from the template, or from 

somewherewithintheclassitself(theconstructor,oranotherfunction). Clearlytheseareallblanknowbut 

we will be expanding on them later. 

Using an Observable to Control Searching 

We’re going to get a bit fancy now and make use of Observables. We’ve discussed what exactly an 

Observableisinthebasicssectionofthisbooksoifyoucan’tquiterememberI’drecommendgoingback 

and taking a look at the Fetching Data, Observables and Promises section. 

Most of the time when using Observables you will simply be subscribing to some Observable that is re- 

turningvaluesforyou,likewhenusingtheHttpservicetofetchsomedata(whichwewillbedoingforthis 

application in the next section). So you rarely have to create the Observables yourself. But, there’s a lot 

of fancy stuff you can do with them if you want to. 

We will be using the FormControl service we imported before to create a “FormControl” that will supply 

                                                   239 

----------------------- Page 241-----------------------

our Observable. FormControls work very similarly to two way data binding with [(ngModel)] in that it 

ties a variable in the class definition, to an input field in the template. So we are going to have to make 

some modifications first. 

> Modify the searchbar in src/pages/home/home .html to reflect the following: 

<ion-searchbar  color="primary" placeholder= "enter  subreddit name ..." 

     [(ngModel)]="subredditValue"          [formControl]="subredditControl" 

    value=""></ion-searchbar> 

What we’ve done here is add [formControl] which is used by the Control we will be creating. Next 

we’ll have to make some changes in the constructor for our class. 

> Modify the constructor and ionViewDidLoad in src/pages/home/home .ts to reflect the 

following: 

   subredditValue : string; 

   subredditControl : FormControl ; 

   constructor(public  dataService : Data , public  redditService : Reddit , public 

       modalCtrl : ModalController , public  platform : Platform)  { 

        this .subredditControl  =  new  FormControl (); 

   } 

   ionViewDidLoad(){ 

     this .subredditControl .valueChanges .debounceTime (1500) 

      .distinctUntilChanged ().subscribe(subreddit  =>  { 

        if(subreddit      !=  '' &&  subreddit){ 

           this .redditService .subreddit  =  subreddit; 

                                                  240 

----------------------- Page 242-----------------------

           this .changeSubreddit(); 

           Keyboard .close(); 

         } 

      }); 

      this .platform .ready ().then (()  =>  { 

        this .loadSettings(); 

      }); 

   } 

Firstwecreateanew FormControl,andthenwesubscribetothe valueChanges Observableitsupplies. 

Ifyou’vereadthesectiononObservablesinthebasicssectionofthisbookthenmostofthisshouldn’tlook 

too strange. We subscribe to the observable so that every time it emits a value we run some code. The 

weird stuff here though is the valueChanges .debounceTime (1500).distinctUntilChanged (). 

Basically, we can chain together as many of these operators as we want (because each function we call 

will also return an Observable, so we can still subscribe to the result) and they all do different things. For 

example if we just did this: 

this .subredditControl .valueChanges .subscribe 

Then we would run the code we have supplied above every time the value of the subredditControl input 

changes. If we then changed it to this: 

this .subredditControl .valueChanges .debounceTime (1500).subscribe 

We would only run the code when the input has changed, and when there hasn’t been another change 

within 1.5 seconds. This prevents us from sending out too many pointless requests to the API. If the user 

wastyping‘chemicalreactiongifs’forexample,thethecodewouldbetriggeredfor‘c’,then‘ch’,then‘che’, 

                                                    241 

----------------------- Page 243-----------------------

then ‘chem’ and so on until the full string has been typed. Not only will this send off a bunch of useless 

queries to the API, it’s going to be a bad experience for the user as well as the list is constantly flickering 

and changing as they type. By adding debouncing, the code will only run once the full string has been 

typed in (assuming the user doesn’t take more than 1.5 seconds between typing each letter). 

Finally, we can add one final operator: 

this .subredditControl .valueChanges .debounceTime (1500) 

 .distinctUntilChanged ().subscribe 

This will only run the code if the value is different to the last time it ran. So if a user typed ‘gifs’, hit the 

backspace key to make it ‘gif’ but then retyped the ‘s’ to make it ‘gifs’ again nothing would happen. We 

don’t need to reload the data for ‘gifs’ because we are already there. 

Theendresultisthatthecodewillonlytriggerwhenthevaluehaschanged,theuserisnotcurrentlytyping 

and the input value is different to what it was last time. The code that we are triggering simply checks 

if a non empty value was supplied, and then changes the active subreddit by changing the subreddit 

member variable in the Reddit provider,and calling the changeSubreddit ()function. We also callthe 

close () method on the Keyboard plugin; since we are kind of going against the default behaviour of 

aninputfield(whichwouldusuallybesubmitted)thekeyboarddoesn’tknowwhentoclose,sowetrigger 

that manually after the operation has finished. 

This will probably be one of the most confusing parts of this application, especially if you’re completely 

new to Observables. As you can tell this has allowed us to create some pretty useful functionality really 

easily, but we could have just as easily used the normal ngModel approach and just used a button for 

triggering searches instead. 

Summary 

We’ve got off to a really good start in this lesson, and we’re well on the way to getting some cool stuff 

happening. We have a really nice basic structure which will allow us to easily build on functionality in the 

next lessons. If you take a look at the application now by running: 

                                                      242 

----------------------- Page 244-----------------------

ionic  serve 

you should see something that looks like this: 

                                                   243 

----------------------- Page 245-----------------------

Pretty ugly right? And you’re even going to get some errors in the console too. Trust me, it’ll all come 

together in the end! In the next lesson we’re going to look at pulling in some real data from reddit. 

                                                     244 

----------------------- Page 246-----------------------

Lesson 4: The Reddit API and HTML5 Video 

One of the most interesting things about Giflist is that it won’t ever contain any actual GIF files at all. The 

GIF file format can be quite large and slow to load, which is especially a problem on mobile when people 

may be more wary about using their data. 

So what we are going to do is make sure we only ever pull in GIFs that provide a .webm or .gifv format. 

This means we won’t be displaying GIFs at all, we will be displaying videos. 

We’re going to display those videos using the HTML5 <video> tag. It’s important to remember when 

building HTML5 mobile applications, we can use any HTML5 feature within our applications. A great 

example of this is Geolocation - we can use the native API to access the devices GPS, but we can also 

just use the plain old HTML5 Geolocation API available to any website. Basically, anything that you can 

do on a website you can do in your mobile application (but obviously we can do a lot more as well, given 

that we can also access native functionality). 

Before we get into building this functionality, let’s talk about a few important issues with HTML5 video. 

HTML5 Video Behaviour on iOS and Android 

Using a framework like Ionic means a lot of the platform differences are handled pretty seamlessly for us, 

but there’s still going to be problems with platform differences that you will run into when creating cross 

platform applications. 

First, there’s a few things you should know about the <video> element: 

     • It can be played both inline and in fullscreen 

     • It has a poster attribute that can be used to display an image before the video is loaded 

     • Whether controls are displayed, whether it autoplays video and whether it plays inline can all be 

       controlled 

Oneofthemostimportantthingstoknowthoughisthatthebehaviourofthe <video> elementisdifferent 

                                                     245 

----------------------- Page 247-----------------------

depending on which platform the application is running on. 

     • On iOS videos play in fullscreen by default, but can be forced to play inline by using the webkit- 

       playsinline attribute. However, this is not universal across all iOS devices. On smaller devices, 

       fullscreen will still be forced even if you specify the webkit-playsinline attribute (basically, it’s not 

       possible to change this) 

     • On Android videos play inline by default, but can be made fullscreen 

Given those behavioural differences, we then need to figure out how we want to approach the problem. 

We basically have two options: 

    1. Accept the default behaviour and maintain the same code for both platforms 

    2. Check for the platform we are running on and run different code to achieve the desired behaviour. 

Personally, I think playing the videos inline achieves a more desirable result. But since it’s not possible to 

achievethatonsmalliOSdevices,Idecidedtojustgowiththedefaultbehaviour. Thismeansthattherewill 

be a difference in behaviour between iOS and Android, but I think both solutions are perfectly acceptable 

and it will keep our code base nice and simple. 

So,let’sgettowork. We’regoingtofinishimplementingafewmoreofthefunctionswedefinedin home.ts 

now and we’ll go through them one at a time. 

Fetching Data from Reddit 

We’re going to start off with the most interesting and complicated function, which is pretty much the core 

feature of the entire application: fetchData (). We will add the code first and then walk through it 

> Modify the fetchData function in src/app/providers/reddit .ts 

   fetchData (): void  { 

      //Build     the  URL  that will  be used  to  access  the API  based  on  the users 

           current preferences 

                                                      246 

----------------------- Page 248-----------------------

let  url  = 'https ://www .reddit .com/r/ ' +  this .subreddit  +   '/ ' +  this .sort 

    +  '/.json?limit= '+  this .perPage ; 

//If  we  aren 't  on  the first  page , we  need  to  add  the after parameter  so 

    that we  only get  new  results 

//this parameter    basically  says   "give  me  the posts   that  come AFTER   this 

    post " 

if(this .after){ 

  url  +=  '&after= ' +  this .after ; 

} 

//We  are  now  currently fetching  data, so  set  the  loading variable  to  true 

this .loading  =  true ; 

//Make  a Http  request  to  the  URL  and  subscribe  to  the response 

this .http .get (url).map (res  =>  res .json ()).subscribe(data  =>  { 

  let  stopIndex  =  this .posts .length ; 

  this .posts  =  this .posts .concat(data .data .children); 

  //Loop   through all NEW  posts    that have  been  added. We  are  looping 

       through 

  //in reverse  since  we  are  removing  some  items. 

  for (let  i  =  this .posts .length  -  1;  i  >=  stopIndex; i--){ 

     let  post  =  this .posts [i]; 

     //Add  a  new property   that will  later be used  to  toggle  a  loading 

         animation 

     //for  individual posts 

                                        247 

----------------------- Page 249-----------------------

post .showLoader  =  false ; 

post .alreadyLoaded  =  false ; 

//Add  a NSFW   thumbnail  to NSFW  posts 

if(post .data .thumbnail  ==    'nsfw '){ 

  this .posts [i].data .thumbnail  =     'images/nsfw .png '; 

} 

   /* 

   * Remove  all posts    that  are  not  in  the  .gifv  or  .webm format  and 

       convert  the  ones  that 

   *  are  to  .mp4  files . 

   */ 

if(post .data .url .indexOf('.gifv ')  >  -1  || 

    post .data .url .indexOf('.webm ')  >  -1){ 

  this .posts [i].data .url  =  post .data .url .replace ('.gifv ',  '.mp4 '); 

  this .posts [i].data .url  =  post .data .url .replace ('.webm ',  '.mp4 '); 

       //If  a preview    image  is  available,  assign  it  to  the post    as 

            'snapshot ' 

   if(typeof (post .data .preview)  !=  "undefined"){ 

     this .posts [i].data .snapshot  = 

         post .data .preview .images [0].source .url .replace (/&amp ;/g ,  '& '); 

          //If  the snapshot  is undefined,  change  it  to  be  blank  so  it 

              doesnt use  a  broken  image 

     if(this .posts [i].data .snapshot  ==     "undefined"){ 

       this .posts [i].data .snapshot  =    ""; 

     } 

   } 

                                    248 

----------------------- Page 250-----------------------

     else  { 

       this .posts [i].data .snapshot  =  ""; 

     } 

  } 

  else  { 

     this .posts .splice(i,  1); 

  } 

} 

//Keep  fetching  more  GIFs  if we  didn 't retrieve  enough  to fill  a page 

//But  give  up  after 20  tries  if we  still  don 't have  enough 

if(data .data .children .length  ===  0  ||  this .moreCount  >  20){ 

  this .moreCount  =  0; 

  this .loading  =  false ; 

} 

else  { 

  this .after  =  data .data .children [data .data .children .length  - 

      1].data .name ; 

  if(this .posts .length  <  this .perPage  *  this .page){ 

     this .fetchData (); 

     this .moreCount++; 

  } 

  else  { 

this .loading  =  false ; 

     this .moreCount  =  0; 

  } 

                                     249 

----------------------- Page 251-----------------------

         } 

      },  (err)  =>  { 

         //Fail  silently,  in  this  case  the  loading spinner  will  just  continue  to 

              display 

         console .log("subreddit  doesn 't  exist !"); 

      }); 

   } 

That’s a pretty big function. I’ve added some inline comments to help clear things up a little bit, but let’s 

also talk about each bit of code in detail. 

First, we build the URL that we are going to use to fetch data from the Reddit API. We use whatever 

subreddit, sort and perPage values the user currently has set. You can modify this URL with any values 

for these that you like and it will spit out the relevant JSON. If we have an after value set then we supply 

thataswell. ThisishowtheRedditAPIdoes“pagination”,iftheuserhashitthe“LoadMore”buttonthree 

timesthenweonlywanttoreturnthepostsforthethirdpage,e.gresults10-15iftheuserhasapagesize 

of 5. With the reddit API you can supply a posts “name” as the after parameter and it will return only the 

posts after that post. 

ThenweusethatURLtomakeaHttprequestandsubscribetotheObservablereturnedafterwemapthe 

responsetoaJSONobject,thisconvertstheJSONstringreturnedfromtheRedditAPIintoanobjectthat 

we can more easily use. 

After that, we want to loop through all of the posts we loaded to perform some magic. We don’t want 

to loop through every single post we have stored on our this .posts variable though because a lot of 

these have already been “processed”, we just want to loop through the new posts loaded - so we create 

a “stopIndex” that is the length of the current this .posts array, and then we add the new posts to it. 

When we are looping through the newly loaded posts we are doing a few things: 

     • Removing any posts that are not in the .gifv or .webm formats 

                                                      250 

----------------------- Page 252-----------------------

     • Converting .gifv and .webm links to .mp4 

     • Creating a new ‘showLoader’ property on the posts that will be used to toggle a loading animation 

       later 

     • Assigning a NSFW thumbnail to NSFW posts 

     • Assigning a preview image to be used as the video poster if it is available 

Once we have finished the loop we should have an array of posts in the format we need, ready to be 

displayed in the list. There’s one more important issue we need to take care of though. If we are loading 

in say 10 posts per page from the Reddit API, but then only 3 of those are suitable GIFS, our page size is 

only going to be 3. This might not fly too well with the user. 

To solve this issue, we will recursively fetch more data by calling the fetchData () function from within 

the fetchData ()function. This will keep adding more and more posts to the posts array until we have 

ourfull10(orwhateverthepagesizecurrentlyis)GIFs. Weneedtosetalimitthough,becausethisfunction 

could just run infinitely, so if we still don’t have enough GIFs after 20 tries then we give up. 

Also notice that we have an error handler for the http .get request as well. If a successful request is 

made,allofthecodewejustdiscussedwillrun,butifnot(i.e.ifthesubreddittheuseristryingtoretrieve 

results in a 404) then the error will be passed into the error handler and that will run instead. 

NowthatwehaveourlistofGIFsloadingintotheapplication,wecandisplayrealdatainourlist. Butfirst, 

we will need to update our template to actually use the data. 

> Modify src/pages/home/home .html to reflect the following 

<ion-header> 

   <ion-navbar  color="secondary"> 

      <ion-title> 

         <ion-searchbar  color="primary" placeholder= "enter  subreddit name ..." 

              [(ngModel)]="subredditValue"               [formControl]="subredditControl" 

              value=""></ion-searchbar> 

      </ion-title> 

                                                       251 

----------------------- Page 253-----------------------

    <ion-buttons  end> 

       <button  ion-button  icon-only  (click)="openSettings()"><ion-icon 

          name="settings"></ion-icon></button> 

    </ion-buttons> 

  </ion-navbar> 

</ion-header> 

<ion-content> 

  <ion-list> 

    <div  *ngFor="let  post  of  redditService .posts"> 

       <ion-item  (click)="playVideo ($event, post)" no-lines 

          style="background-color : #000;"> 

         <img  src="assets/images/loader .gif"  *ngIf="post .showLoader" /> 

         <video  loop  [src]="post .data .url" [poster]="post .data .snapshot"> 

         </video> 

       </ion-item> 

       <ion-list-header  (click)="showComments(post)" style="text-align : left ;"> 

         {{post .data .title}} 

       </ion-list-header> 

    </div> 

    <ion-item  *ngIf="redditService .loading" no-lines  style="text-align : 

        center;"> 

       <img  src="assets/images/loader .gif" style="width : 50px " /> 

    </ion-item> 

  </ion-list> 

                                          252 

----------------------- Page 254-----------------------

   <button  ion-button  color="light" full  (click)="loadMore()">Load 

        More ...</button> 

</ion-content> 

As you can see above we are now using the URL of the post as the source of the video element, as well 

as suplying the preview snapshot as the poster and the title in the header. We’ve also added a few more 

things here as well. 

We’veaddedaclickeventthatwillcallthe playVideo functionwhenthevideoistapped,whichwillpass 

alongthe $event (whichIwillexplaininjustamoment)andareferencetothe post thatwasclicked. We 

have a seperate click event for the <ion-list-header> that shows the GIFs title which will launch the 

InAppBrowser. 

We also add the loader GIF to the item in the list. When a user taps on a video it will still need some time 

to load in, so we add the loading animation so that the user knows something is happening. Without it, 

the user will likely just think the application isn’t working. 

Let’s also add a bit of code to the loadSettings function so that the fetchData function gets called 

whenweruntheapplication(since loadSettings iscalledfromtheconstructor). Thisisjustsowecan 

see some stuff happening now, we will change it later. 

> Modify the loadSettings function in src/pages/home/home .ts to reflect the following: 

   loadSettings(): void  { 

      this .redditService .fetchData (); 

   } 

If you load up your application in the browser now, you should see something like this: 

                                                      253 

----------------------- Page 255-----------------------

It’s still not looking great, but it’s looking a lot better and we have some cool GIFs displaying in there now 

(which unfortunately we can’t actually play just yet). Let’s change that. 

                                                      254 

----------------------- Page 256-----------------------

Playing our GIFs (videos) 

Our GIFs are sitting in our list now ready to go, we just need to get them movin’ and shakin’. To do that, 

we are going to have to finish implementing the playVideo function. 

> Modify the playVideo function in src/pages/home/home .ts 

   playVideo (e , post): void  { 

     //Create  a  reference  to  the video 

     let  video  =  e .target .getElementsByTagName ('video ')[0]; 

     if(!post .alreadyLoaded){ 

        post .showLoader  =  true ; 

     } 

     //Toggle  the video playing 

     if(video .paused){ 

        //Show   the  loader gif 

        video .play (); 

        //Once  the video  starts playing, remove  the  loader gif 

        video .addEventListener ("playing", function (e){ 

           post .showLoader  =  false ; 

           post .alreadyLoaded  =  true ; 

        }); 

     }  else  { 

        video .pause (); 

     } 

                                                  255 

----------------------- Page 257-----------------------

   } 

If the user taps on the video then we want to play the video (or pause it if it is already playing). We use 

the event that we passed in from the template to grab a reference to the video itself, which allows us 

to do things like play it and pause it. We also toggle the showLoader property here to determine if the 

loading icon should display or not. We only want the loading to display the first time the user taps the 

video, otherwise the loading icon would trigger when they pause the video as well, so we check for the 

alreadyLoaded flag before turning it on. 

Launching Comments in the In App Browser 

Rememberwhenweweresettingupthisapplication,weinstalledtheInAppBrowserplugin? Well,weare 

goingtomakeuseofthatnow. Whentheuserclicksonthetitleofthevideowewanttolaunchabrowser 

with the link to the original submission of the post. 

> Add the following import to the top of src/pages/home/home .ts 

import  {  InAppBrowser  }  from         'ionic-native '; 

> Modify the showComments function in src/pages/home/home .ts 

   showComments(post): void  { 

      let  browser  =  new  InAppBrowser('http ://reddit .com ' +  post .data .permalink , 

           '_system '); 

   } 

Compared to the others, this is a pretty simple function. We simply grab the link from the posts data and 

use InAppBrowser to launch it. 

                                                     256 

----------------------- Page 258-----------------------

Loading More GIFS 

One important function we haven’t go to yet is the loadMore function, this is what is called when the 

userhitsthe‘LoadMore’button. WhatwewanttodowhenthishappensisloadinthenextpageofGIFs. 

Given the setup of our fetchData function, this is actually really easy to do. 

> Add the following function to src/providers/reddit .ts: 

   nextPage (){ 

     this .page++; 

     this .fetchData (); 

   } 

> Modify the loadMore function in src/pages/home/home .ts: 

   loadMore(): void  { 

     this .redditService .nextPage (); 

   } 

All we do is increase the page number and then call fetchData again, simple! 

Changing Subreddits 

Thefinalfunctionwewanttofinishupfornow(thereisstillabitmoretodolater)isthe changeSubreddit 

function. But first, we are going to add a new function to our Reddit provider to handle changing the 

subreddit. 

> Add the following function to src/providers/reddit .ts: 

   resetPosts (){ 

     this .page  =  1; 

     this .posts  =  []; 

     this .after  =  null ; 

                                                  257 

----------------------- Page 259-----------------------

      this .fetchData (); 

   } 

> Modify the changeSubreddit function in src/pages/home/home .ts 

   changeSubreddit(): void  { 

      this .redditService .resetPosts (); 

   } 

Wereallygotthehardstuffoutofthewayearly,asthisisanotherprettysimplefunction. Whenthesubreddit 

changesweneedtoreseteverything. Ifwewereuptothe5thpageof‘chemicalreactiongifs’thenwedon’t 

wanttoloadthe5thpagewhenweswitchto‘perfectloops’. Allwehavetodohereisresetthepage,clear 

the posts data, and clear the after value, then we just call the fetchData function again. We’ve already 

setthesubredditelsewhere,socallingthe fetchData functionwillpullindatafromwhateverthecurrent 

subreddit is now. 

Summary 

This lesson was really the bulk of the whole application, there’s still a bit more to do but you can take a 

breatherifyou’vemadeitthisfar. Youshouldnowhaveanappthatprettymuchworks-it’llstillbepretty 

ugly and doesn’t have the ability to save settings, but it works. We’ll be getting to both of those things in 

the next two lessons. 

                                                    258 

----------------------- Page 260-----------------------

Lesson 5: Settings 

Wehaveeverythingworkingprettynicelynow -there’sGIFscoming in from reddit,filteredtoonlyinclude 

the file format we want and we have them displaying nicely using <video> elements. 

We currently have the gifs subreddit set as the default, which is certainly a good choice for this app, and 

the user can change this if they like. When they leave the application and come back though, it is going 

to get set back to the default gifs subreddit. This would get pretty annoying if they aren’t interested in 

looking at the gifs subreddit. 

So what we are going to do is create a Settings page, where the user can set the following: 

     • Default subreddit 

     • GIFs to load per page 

     • Sort order 

The cool thing about implementing a feature like this is that it also gives us a chance to cover how to 

store data permanently so that the application will remember the settings upon the user returning to the 

application. 

Creating the Settings Page 

To open the settings page we are going to use a Modal. Opening a page as a Modal is a bit different to 

justopeningapagenormallyinthatitiscompletelyseparatetothenavigationflowoftheapp. AModalis 

basically a single page that can be opened over the top of the current content and then closed (I’m sure 

you’re familiar with other modal windows around the web like Facebook’s photo viewer). 

Any page can be opened as a Modal, so when we create our Settings page we are going to do it just like 

we would any other page. Let’s start off by defining the template for our Settings page. 

> Modify src/pages/settings/settings .html to reflect the following: 

<ion-header> 

                                                     259 

----------------------- Page 261-----------------------

  <ion-toolbar  color="secondary"> 

     <ion-title>Settings</ion-title> 

     <ion-buttons  end> 

       <button  ion-button  icon-only  (click)="close()"><ion-icon 

           name="close"></ion-icon></button> 

     </ion-buttons> 

  </ion-toolbar> 

</ion-header> 

<ion-content padding> 

     <ion-card> 

       <ion-card-header> 

         About 

       </ion-card-header> 

       <ion-card-content> 

         <p><strong>Giflist</strong>  is  a  client  for  <strong>reddit</strong> 

             that  will  endlessly  <strong>stream  GIFs</strong>  from  <strong>any 

             subreddit  that  predominantly  contains  gifs</strong>.  By  default 

             it uses  the  popular  <strong>gifs</strong>  subreddit, but  you  can 

             change  this  to  whatever  you  like, e .g : perfectloops , me_irl , 

             chemicalreactiongifs .</p> 

         <br  /> 

         <p>To  play  a  GIF , just  tap  it . To  view  the  original  submission  for 

             any  GIF , just  tap  the  title  section  and  it will  open  in  reddit . 

             You  can  configure  some  settings  for  the  application  below . 

             Enjoy !</p> 

       </ion-card-content> 

                                            260 

----------------------- Page 262-----------------------

</ion-card> 

<h3>Subreddit</h3> 

<ion-input type="text" placeholder= "enter  subreddit name ..." 

    [(ngModel)]="subreddit"></ion-input> 

<h3>Sort</h3> 

<ion-segment  color="secondary"  [(ngModel)]="sort"> 

    <ion-segment-button  value="hot"> 

      Hot 

    </ion-segment-button> 

    <ion-segment-button  value="top"> 

      Top 

    </ion-segment-button> 

    <ion-segment-button  value="new"> 

      New 

    </ion-segment-button> 

</ion-segment> 

<h3>Per  Page</h3> 

<ion-segment  color="secondary"  [(ngModel)]="perPage"> 

    <ion-segment-button  value="5"> 

      5 

    </ion-segment-button> 

    <ion-segment-button  value="10"> 

      10 

    </ion-segment-button> 

                                    261 

----------------------- Page 263-----------------------

           <ion-segment-button  value="15"> 

              15 

           </ion-segment-button> 

     </ion-segment> 

     <button  ion-button  full  (click)="save()" color="secondary" style="margin : 

          20px  0px ;">Save  Settings</button> 

</ion-content> 

There’s nothing too crazy going on in this template. We define our navbar as usual, and we add a button 

to it which will call a close method we will define shortly to dismiss the modal window. 

We add an <ion-card> to display some information about the app to the user, and then we define a 

few different inputs. We use a simple text input for setting the subreddit, but we use segment compo- 

nents to control the sort and perPage values. All of these inputs have two way data binding set up with 

   ngModel)] sowewilleasilybeabletoaccessthesevaluesinourclassdefinition,whichwewillcreate 
 [( 

now. 

> Modify src/pages/settings/settings .ts to reflect the following: 

import  {  Component  }  from      '@angular/core '; 

import  {  ViewController , NavParams  }  from          'ionic-angular '; 

@Component ({ 

   selector :  'page-settings ', 

   templateUrl :  'settings .html ' 

}) 

export  class  SettingsPage  { 

   perPage : number ; 

   sort : string; 

                                                  262 

----------------------- Page 264-----------------------

   subreddit : string; 

   constructor(public  view : ViewController , public  navParams : NavParams)  { 

     this .perPage  =  this .navParams .get ('perPage '); 

     this .sort  =  this .navParams .get ('sort '); 

     this .subreddit  =  this .navParams .get ('subreddit '); 

   } 

   save(): void  { 

     let  settings  =  { 

           perPage : this .perPage , 

           sort : this .sort, 

           subreddit : this .subreddit 

     }; 

     this .view .dismiss (settings); 

   } 

   close(): void  { 

     this .view .dismiss (); 

   } 

} 

The first strange thing you might notice here is that we are using navParams to grab some values. We 

willpassthesevaluesintotheSettingspagefromtheHomepagewhenwelaunchtheModalbecausewe 

want to pre set the values on the settings page to whatever they are currently. 

Anotherstrangethingaboutthispageisthatweareimportingthe ViewController -weneedthisinorder 

                                                  263 

----------------------- Page 265-----------------------

to allow us to dismiss this page from within its own class when it is launched as a Modal. In this case we 

want to close the page both when the user hits the save button, and when the user hits the close button. 

If the user hits the close button, then we won’t save the settings they supplied. 

We are going to be working on saving the settings in the next portion of this lesson, but you might be 

wondering how exactly that is going to happen - shouldn’t the save function here actually do something 

withthedata? WiththewayModalswork,wecanreturndatafromthePagethatwaslaunchedasaModal 

when it is dismissed, so in this case when we call the dismiss function on the view we will be sending 

thesettingsvaluesbacktotheHomepage,whichwillbethepagethatlaunchedtheModal-thisiswhere 

we will handle saving the data. 

Opening the Settings Page as a Modal 

NowthatwehaveourSettingspagedefined,wejustneedtolaunchitasaModal. We’vealreadysetupa 

buttonintheheadertoopenthesettingspage,soallweneedtodoisfinishdefiningthe openSettings 

function. 

> Modify the openSettings function in src/pages/home/home .ts: 

   openSettings(): void  { 

      let  settingsModal  =  this .modalCtrl .create(SettingsPage ,  { 

        perPage : this .redditService .perPage , 

        sort : this .redditService .sort, 

        subreddit : this .redditService .subreddit 

      }); 

      settingsModal .onDidDismiss(settings  =>  { 

        if(settings){ 

           this .redditService .perPage  =  settings .perPage ; 

                                                    264 

----------------------- Page 266-----------------------

           this .redditService .sort  =  settings .sort; 

           this .redditService .subreddit  =  settings .subreddit; 

           //this.dataService.save (settings); 

           this .changeSubreddit(); 

         } 

      }); 

      settingsModal .present (); 

   } 

Asyoucanseeabove,wepasstheSettingspagewecreatedintotheModalwearecreating,andwealso 

pass through the data we are grabbing in the Settings page here. 

Wesetupan onDidDismiss listenerthatwilldetectwhentheModalisclosedandpassinanydatathat 

was sent back when the Modal was dismissed. Since we are only supplying data through the dismiss 

function when the user hits save, this is the only time this code will run. If there are settings passed back 

then we update the current values with the new values, and we also use our dataService to save the 

values to storage (we still need to define this service though). Since we have new settings values now we 

also call changeSubreddit to reset everything and load new GIFs based on the new settings. 

NOTE: Since we haven’t implemented the data service yet, we comment out the call to it for now. 

Finally we call the present method to display the Modal to the user. 

Saving Data 

The final piece of the puzzle is to create our Data service to handle saving our settings to memory, and 

also retrieving those settings from memory. 

                                                     265 

----------------------- Page 267-----------------------

To save the data, we are going to use the Storage service provided by Ionic. This is one of my favourite 

additionsinIonic2,becauseitmakesthecomplicatedprocessofstorageextremelyeasy. There’svarious 

issues with storing data, like the operating system randomly clearing local storage data, but this storage 

service will automatically use the best option available. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Injectable  }  from       '@angular/core '; 

import  {  Storage  }  from      '@ionic/storage '; 

@Injectable () 

export  class Data  { 

   constructor(public  storage : Storage)  { 

   } 

   getData (): Promise<any>  { 

     return  this .storage .get ('settings '); 

   } 

   save(data): void  { 

      let  newData  =  JSON .stringify(data); 

     this .storage .set('settings ', newData); 

   } 

} 

First,inourconstructorweinjectthestorageservice. Thenwejusthavetwofunctions,oneforgettingdata 

and one for saving data. The getData () function will return all of the data we have stored on ‘settings’ 

in storage, and save ()will update ‘settings’ in storage with a new set of data. We’ve already set up the 

                                                   266 

----------------------- Page 268-----------------------

call to save () when the Settings Modal is dismissed, now we just need to define the loadSettings 

function that will handle loading previously saved settings when the app is opened. 

> Modify the loadSettings function in src/pages/home/home .ts 

   loadSettings(): void  { 

     this .dataService .getData ().then ((settings)  =>  { 

        if(settings  &&  typeof (settings)  !=  "undefined"){ 

           let  newSettings  =  JSON .parse (settings); 

           this .redditService .settings  =  newSettings ; 

           if(newSettings .length        !=  0){ 

             this .redditService .sort  =  newSettings .sort; 

             this .redditService .perPage  =  newSettings .perPage ; 

             this .redditService .subreddit  =  newSettings .subreddit; 

           } 

        } 

        this .changeSubreddit(); 

     }); 

   } 

Here we are simply calling the getData function we defined in our data service, and when that returns 

our settings data we parse the JSON into an object and read the values into the member variables in the 

Reddit provider. Then we call the changeSubreddit function to trigger posts from reddit to be fetched 

                                                   267 

----------------------- Page 269-----------------------

with the new settings. 

Nowthatwehaveimplementedthedataservice,wecanuncommentthecalltothedataservicewemade 

earlier. 

> Modify the openSettings function in home .ts to reflect the following: 

   openSettings(): void  { 

     let  settingsModal  =  this .modalCtrl .create(SettingsPage ,  { 

        perPage : this .redditService .perPage , 

        sort : this .redditService .sort, 

        subreddit : this .redditService .subreddit 

     }); 

     settingsModal .onDidDismiss(settings  =>  { 

        if(settings){ 

           this .redditService .perPage  =  settings .perPage ; 

           this .redditService .sort  =  settings .sort; 

           this .redditService .subreddit  =  settings .subreddit; 

           this .dataService .save(settings); 

           this .changeSubreddit(); 

        } 

     }); 

     settingsModal .present (); 

   } 

                                                  268 

----------------------- Page 270-----------------------

Summary 

Now that we’ve finished up our settings page and data service, the functionality of the application is 

completely finished! It’s still pretty ugly though. 

Sowehaveonelessonremainingwherewearegoingtoaddinafewstylestomakeeverythinglookalot 

nicer. 

                                                      269 

----------------------- Page 271-----------------------

Lesson 6: Styling 

We’realmostthere,justalittlebitofstylingtogoandwe’llhaveacompletedapplication. Beforewedefine 

our styles we are going to add a few classes to our template files. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="secondary"> 

     <ion-title> 

        <ion-searchbar  color="primary" placeholder= "enter  subreddit name ..." 

            [(ngModel)]="subredditValue"        [formControl]="subredditControl" 

            value=""></ion-searchbar> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="openSettings()"><ion-icon 

            name="settings"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

     <div  *ngFor="let  post  of  redditService .posts"> 

        <ion-item  (click)="playVideo ($event, post)" no-lines 

            style="background-color : #000;"> 

          <img  src="assets/images/loader .gif"  *ngIf="post .showLoader" 

                                               270 

----------------------- Page 272-----------------------

              class="video-loader" /> 

          <video  loop  [src]="post .data .url"       [poster]="post .data .snapshot"> 

          </video> 

        </ion-item> 

        <ion-list-header  (click)="showComments(post)" style="text-align : left ;"> 

          {{post .data .title}} 

        </ion-list-header> 

     </div> 

     <ion-item  *ngIf="redditService .loading" no-lines  style="text-align : 

         center;"> 

        <img  src="assets/images/loader .gif" style="width : 50px " /> 

     </ion-item> 

   </ion-list> 

   <button  ion-button  color="light" full  (click)="loadMore()">Load 

       More ...</button> 

</ion-content> 

If you’ve ready the basics section then you’ll know that there’s quite a few ways we can define styles, if 

you skipped over theming in the basics section then I highly recommend going back to read it now. 

> Modify src/pages/home/home .scss to reflect the following 

page-home  { 

     ion-item  { 

          background-color :  #000; 

          position : relative ; 

                                                271 

----------------------- Page 273-----------------------

} 

ion-item    .video-loader  { 

     position : absolute ; 

     top :  10px ; 

     right :  10px ; 

     width :  25px ; 

     height :  25px ; 

} 

ion-list-header  { 

     background-color :  #fff ; 

} 

ion-label  { 

     margin :  0px  !important; 

} 

ion-list  { 

     margin :  0px  !important; 

} 

ion-item-content,  .item-inner,  .item  { 

     margin :  0  !important; 

     padding :  0  !important; 

     text-align : center; 

} 

video  { 

     max-width :  100%; 

     height : auto ; 

                                          272 

----------------------- Page 274-----------------------

           background-color :  #000; 

      } 

} 

Theseareallprettybasicstyles,forthemostpartwearejustchangingsomecoloursandremovingpadding 

andmargins. Themostimportantstylesherearethe ion-item-content and video styleswhichserve 

tomakesurethevideoscalesandsitsnicelyinthelist. Ideallywewantthevideototakeupthefullwidth 

of the item but in the case of portrait GIFs this isn’t always possible, so in that case we would center the 

GIF and have a black background which looks pretty good. 

Now we are going to define just one style that effects iOS only. Our searchbar in the header is a bit small 

sincewe’veaddedittothe <ion-title> section,sowearegoingtomakeitalittlebigger. Thesearchbar 

already displays fine on Android though, so we don’t want the style to apply there. 

> Add the following styles to src/app/app .scss: 

 .ios  { 

      ion-title  { 

           padding :  0px  35px      1px  0px ; 

      } 

} 

When runnin on iOS Ionic will automatically add a ios class to the <body> so we can specifically target 

iOS using the above method. You can do the same for Android using md and also for Windows using wp. 

Next we are going to add a background colour to the body tag, which we will add to the generic .scss 

file. 

We are also going to add one more app wide style. 

> Add the following style to src/app/app .scss: 

body  { 

      background-color :  #e74c3c ; 

                                                     273 

----------------------- Page 275-----------------------

} 

Finally, we will define some shared variables to be used in the application using the variables.scss file. 

> Modify the styles in src/theme/variables .scss to reflect the following: 

$colors :  ( 

   primary :       #ecf0f1, 

   secondary :     #e74c3c, 

   danger :        #f53d3d , 

   light :         #e74c3c, 

   dark :          #222222 

); 

$searchbar-ios-background-color :  #e74c3c ; 

$searchbar-ios-input-background-color :  #c94234; 

$button-ios-border-radius :  0px ; 

We’vechangedafewofthecoloursuphere,madesomemodificationstothesearchbar,andsettheiOS 

button border radius so that our ‘Load More’ button is square instead of rounded. 

If you load up the application should now look something like this: 

                                                  274 

----------------------- Page 276-----------------------

Much better! If you take a look at the Android version (you can do this by setting the Emulator in Chrome 

Dev Tools to emulate a Samsung or other Android device, or just use the ionic  serve  -l command) 

you will find it looks like this: 

                                                          275 

----------------------- Page 277-----------------------

(ignore the white bar on the right, this isn’t present on actual devices) 

It certainly looks a little different, but it still looks good. One of the best things about Ionic is that it au- 

tomatically conforms to design conventions of the platform it is running on as best it can. So in general, 

the less you mess with this the better. If you mainly use an iOS device, or if you mainly use an Android 

device, the styling of the other platform may look a little weird to you, but it won’t look weird to users of 

that platform. Unless you have good reason to, you shouldn’t modify the styling of one platform to look 

like the other (which is certainly possible). 

                                                       276 

----------------------- Page 278-----------------------

Summary 

This was a pretty short lesson compared to the others, but it shows how easy it can be with a little effort 

to create a nice custom theme for your app. 

                                                   277 

----------------------- Page 279-----------------------

Conclusion 

CongratulationsonmakingitthroughtheGiflisttutorial. We’velearnedalotthroughdevelopingthisappli- 

cation, but the main take aways are: 

     • How to fetch data from a 3rd party API 

     • How to store and retrieve data locally 

     • How to use Observables 

     • How to use conditionals in templates 

     • How to make use of events 

There’s always room to take things further though, especially when you’re trying to learn something. Fol- 

lowing tutorials is great, but it’s even better when you figure something out for yourself. Hopefully you 

have enough background knowledge now to start trying to extend the functionality of the application by 

yourself, here’s a few ideas to try out: 

     • Create your own custom theme for the application [EASY] 

     • Create a ‘Random’ button that willtake you to a random subredditfrom a predefined array [EASY] 

     • Modify the application to return pictures instead of GIFs [MEDIUM] 

     • Modify the application to return pictures and GIFs [HARD] 

     • Allow users to save their favourite GIFs into its own list that can be viewed by typing ‘favorites’ in 

       the search bar [VERY HARD] 

Remember, the Ionic 2 documentation is your best friend when trying to figure things out. 

What next? 

You have a completed application now, but that’s not the end of the story. You also need to get it running 

on a real device and submitted to app stores, which is no easy task. The final sections in this book will 

walk through how to take what you have done here, and get it onto the app stores so make sure to give 

that a read. 

                                                      278 

----------------------- Page 280-----------------------

Chapter 5 

Snapaday 

                              279 

----------------------- Page 281-----------------------

Lesson 1: Introduction 

Snapadayisbasedaroundeverybody’sfavouritenativeplugin,thecamera. Idon’tactuallyhaveanydata 

tobackthatclaimup,butthecameraisdefinitelyoneofthecoolestintegrations. It’salsoapluginpeople 

often struggle with, it’s one of those things that looks easy on the surface but there’s a few tricks to it. 

In fact, Snapaday is pretty much the “native plugin app” in this book - as well as covering how to use the 

camera we’ll also be integrating local notifications and social sharing (we’ve got to get those selfies on 

Facebook right?). 

About Snapaday 

Snapaday was actually the Ionic 1 example used in my Mobile Development for Web Developers course, 

so I figured when transitioning from Ionic 1 to Ionic 2 it would be a great example to use - especially for 

those of you who have built the Ionic 1 version of Snapday. 

Thegeneralideaisthattheusertakesaphotowiththeapplicationeveryday,andthentheycanplayback 

their photos in a fast slideshow to see how they’ve changed over time (ever see this video?). To be more 

precise, the exact features of the application will include: 

     • Allowing the user to take a photo (only once per day) 

     • Displaying a list of all photos the user has taken in a list 

     • Allowing the user to delete any photos they no longer want 

     • The ability to play photos back in a fast slideshow format 

     • The ability to share photos 

     • Reminders with local notifications 

Throughout building this some concepts you will learn are: 

     • How to integrate native plugins 

     • How to use the Camera API 

     • How to use the File API 

                                                      280 

----------------------- Page 282-----------------------

     • How to use local notifications 

     • How to use modals 

     • How to create a custom provider 

     • How to store data permanently 

and here’s a look at what we’ll be building: 

                                                     281 

----------------------- Page 283-----------------------

       282 

----------------------- Page 284-----------------------

Lesson Structure 

1. Getting Ready 

2. The Layout 

3. Taking Photos with the Camera 

4. Storing and Retrieving Photos 

5. Creating a Custom Pipe and Flipbook of all Photos 

6. Integrating Local Notifications 

7. Styling 

Ready? 

Now that you know what you’re in for, let’s get to building it! 

Lesson 2: Getting Ready 

In this lesson we are going to prepare our application for the journey ahead. We are going to of course 

generate the application, and we are also going to set up all of the components and Cordova plugins we 

will need. At the end of this first lesson we should have a nice skeleton application set up with everything 

we need to start diving into coding. 

A good rule of thumb before starting any new application is to make sure you have the latest version of 

Ionic and Cordova, so if you haven’t done it recently then make sure to run: 

npm   install  -g     ionic  cordova 

                                                     283 

----------------------- Page 285-----------------------

or 

sudo  npm    install  -g     ionic  cordova 

beforeyoucontinue. IfyourunintoanytroubleinstallingIonicorgeneratingnewprojects,makesurethat 

you have a recent Node version installed. After you have that installed, you should also run the following 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

Generate a new application 

We will be using the blank starter template for this application which, as the name implies, is basically 

an empty Ionic project. It comes with one page built in called home which we will repurpose in the next 

lesson. 

> Run the following command to generate a new application 

ionic  start  snapaday  blank  --v2 

       Make the new project your current working directory by running the following command: 

cd  snapaday 

Your project should now be generated - now you can open up the project folder in your favourite editor. 

You can take a look at how your application looks by running the following command: 

ionic  serve 

which for now should look something like this: 

                                                     284 

----------------------- Page 286-----------------------

###Create the Required Components 

The structure of this application is pretty simple, so all we’re going to have is 2 pages: the home page 

                                                   285 

----------------------- Page 287-----------------------

which will contain the photos and a page for the slideshow. We’ve already got a home component which 

we will use as our list page, so we only need to create the Slideshow page. 

> Run the following command to generate a Slideshow page: 

ionic  g  page  Slideshow 

Create the Required Services 

As well as our 2 pages, we are also going to create a data service to handle storing and retrieving the 

photos and since we’ll be using quite a lot of alerts in the application we will be creating a service to 

handle those more easily. 

> Run the following command to generate a Data provider: 

ionic  g  provider  Data 

> Run the following command to generate a our Alert provider: 

ionic  g  provider  SimpleAlert 

We’ll also be creating our own custom Pipe in this application to handle converting the dates our photos 

were taken into something more user friendly like “5 days ago”. Let’s create that now as well. 

> Run the following command to generate the Days Ago pipe: 

ionic  g  pipe  DaysAgo 

Create the Model 

Wewillbecreatingadatamodelforourphotoswhichwillallowustomoreeasilycreateandupdatethem. 

Unforuntately, there is no generate command for this, so you will need to create it manually. 

> Create a new folder inside of the src folder called models 

                                                   286 

----------------------- Page 288-----------------------

> Create a new file inside of the models folder called photo-model.ts 

Add Pages & Services to the App Module 

In order to use these pages and services throughout our application, we need to add them to our 

app.module.ts file. All of the pages we created need to be added to both the declarations array and 

the entryComponents array, all of the providers we create need to be added to the providers array, 

and any custom components or pipes only need to be added to the declarations array. Our model is 

just a simple class we willimport wherever we need, there is no need to set it up anywhere in the module. 

> Modify src/app/app.module.ts to reflect the following 

import  {  NgModule  }  from      '@angular/core '; 

import  {  IonicApp, IonicModule  }  from          'ionic-angular '; 

import  {  MyApp  }  from     './app .component '; 

import  {  Storage  }  from      '@ionic/storage '; 

import  {  HomePage  }  from      '../pages/home/home '; 

import  {  DaysAgo  }  from      '../pipes/days-ago '; 

import  {  SlideshowPage  }  from        '../pages/slideshow/slideshow '; 

import  {  SimpleAlert  }  from       '../providers/simple-alert '; 

import  {  Data  }  from     '../providers/data '; 

@NgModule ({ 

   declarations :  [ 

     MyApp , 

     HomePage , 

     SlideshowPage , 

     DaysAgo 

   ], 

   imports :  [ 

                                                  287 

----------------------- Page 289-----------------------

      IonicModule .forRoot (MyApp) 

   ], 

   bootstrap :  [IonicApp], 

   entryComponents :  [ 

     MyApp , 

     HomePage , 

     SlideshowPage 

   ], 

   providers :  [Storage , Data , SimpleAlert] 

}) 

export  class  AppModule  {} 

Notice that we also have a Storage provider as well as the Data provider we created. Storage is 

provided by Ionic and allows us to save and retrieve data - we will be making use of this later. 

Add Required Platforms 

Before you can build for certain platforms, you need to add them to your project. This is something we 

will be doing way later on in this course, but you may as well just set them up now. 

> Run the following command to add the iOS platform to your application 

ionic  platform  add  ios 

> Run the following command to add the Android platform to your application 

ionic  platform  add  android 

                                                  288 

----------------------- Page 290-----------------------

Add Required Cordova Plugins 

This application will use a few different Cordova plugins. Remember, Cordova plugins can only be used 

when running on a real device. I’ll explain each plugin as we run through the commands for adding them. 

> Run the following command to add the SQLite plugin: 

ionic  plugin  add  cordova-sqlite-storage 

ThisplugingivesyouaccesstonativestoragewithanSQLitedatabase. Weareaddingittothisapplication 

because the Ionic local storage service can make use of this plugin to provide more stable data storage. 

> Run the following command to add the local notification plugin: 

ionic  plugin  add  de .appplant .cordova .plugin .local-notification 

This plugin is what will allow us to create local notifications for the application. Unlike push notifications, 

local notifications are handled completely on the user’s device and don’t require any external services. 

> Run the following command to add the Camera plugin: 

ionic  plugin  add  cordova-plugin-camera 

This plugin adds the ability to access the user’s camera and return photos from it. As well as providing 

access to the camera, it also allows for the retrieval of photos from the user’s photo library. 

> Run the following command to add the File plugin: 

ionic  plugin  add  cordova-plugin-file 

TheFilepluginallowsustointeractwiththefilesystemonthedevice,whichwewillbeusingtomovethe 

photos that are taken with the application to somewhere permanent. 

> Run the following command to add the Social Sharing plugin: 

ionic  plugin  add  cordova-plugin-x-socialsharing 

                                                     289 

----------------------- Page 291-----------------------

Thesocialsharingpluginisgenericandallowsuserstosharetoawholebunchofdifferentplatforms(like 

social media, but also email, SMS and more) or you can just trigger a share to one specific platform. 

> Run the following command to add the Status Bar plugin: 

ionic  plugin  add  cordova-plugin-statusbar 

Wewillbeaddingthisplugintoallprojectstogiveuscontroloverthestatusbarinourapplication(thebar 

at the top of the devices screen that contains the time, battery information and so on). 

> Run the following command to add the Splash Screen plugin: 

ionic  plugin  add  cordova-plugin-splashscreen 

This plugin allows us to control the splash screen (the fullscreen graphic that briefly displays when you 

open an app) 

> Run the following command to add the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

This plugin is required for all applications, and helps to define what resources should be allowed to be 

loaded in your application. Without it, resources you try to load will fail. 

As well as adding the plugin, you also need to define a “Content Security Policy” in your index.html 

file. We will be adding a very permissive policy which will essentially allow us to load any resources. 

Depending on your application, you may look into providing a more strict policy, but an open policy is 

good for development. 

> Modify your src/index .html file to include the following meta tag: 

<meta  http-equiv= "Content-Security-Policy" content="font-src                         'self ' data :; 

     img-src  *  data :; default-src  gap ://ready  file ://* *;  script-src                     'self ' 

     'unsafe-inline '  'unsafe-eval ' *            ; style-src      'self '  'unsafe-inline ' *"> 

> Run the following command to add the Crosswalk plugin: 

                                                      290 

----------------------- Page 292-----------------------

ionic  plugin  add  cordova-plugin-crosswalk-webview 

This is another plugin that we will add to every application, but you may decide you want to leave it out. 

By adding this plugin, when you build for Android “Crosswalk” will be used. Android has a lot of issues, 

especiallywitholderdevices,becausethereissomanydifferentsoftwareversionsoutthereanddifferent 

versions have different browsers (remember, since we are building HTML5 applications it is actually a 

browserenginepoweringandrunningourapplication). WhatCrosswalkdoesisbundleamodernbrowser 

into your application so no matter what device you are running on your app will be powered by the same 

browser, and the Crosswalk browser can improve performance a lot. 

The only real downside to this is that it increases the size of your application by a significant amount. In 

general,Ithinkit’sworthitandI’drecommendyouincludeitbutyoumayleaveitoutifyoulike. Formore 

information take a look at the Crosswalk Project website: https://crosswalk-project.org/ 

Set up Images 

Whenbuildingthisapplicationwearegoingtobemakinguseofafewimages. I’veincludedtheseinyour 

download pack but you will need to set them up in the application you generate. 

> Copy the images folder in the download pack for this application from src/assets to your own 

src/assets folder 

Summary 

That’s it! We’re all set up and ready to go, now we can start working on the interesting stuff. 

                                                    291 

----------------------- Page 293-----------------------

Lesson 3: The Layout 

I find creating a basic layout is usually a good first step when building an application - it even serves as a 

sortofwireframingexercise,tohelpsolidifytherequirementsoftheapplication. There’snothingtoocrazy 

weneedtodoforthelayoutofthisapplication,butthereisonelittletricky(andIthinkclever)userinterface 

element that we are going to add. 

We have two pages in this application, the home page and the slideshow page, and we will create both 

of them in this lesson. The slideshow page is very simple though, so most of this will be about the home 

page. 

The Home Page 

The home page in this application will contain a list of all of the photos that the user has taken with the 

abilitytodeletethem,anoptiontotakeanewphoto(butonlyiftheyhavenotalreadytakenonethatday), 

and an option to play a slideshow of all of their photos. Here’s what it will look like: 

                                                      292 

----------------------- Page 294-----------------------

The trickiest part of this layout is that “SMILE!” image at the top, which is actually a button that will serve 

as our take a photo option, but again, only if the user has not already taken a photo. If they have already 

                                                       293 

----------------------- Page 295-----------------------

taken a photo then we don’t want to display that image. 

Let’sstartoffbycreatingthebasiclayout,andthenwewilllookathowwecanimplementthattakephoto 

button. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="danger"> 

     <ion-title> 

        <img  src="assets/images/logo .png" /> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="playSlideshow ()"><ion-icon 

            name="play"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

     <ion-item-sliding> 

        <ion-item> 

          <img  src="http ://placehold .it/100x100" /> 

          <ion-badge  item-right  light>0  days  ago</ion-badge> 

        </ion-item> 

                                                294 

----------------------- Page 296-----------------------

        <ion-item-options> 

           <button  ion-button  icon-only  light 

               (click)="removePhoto (photo)"><ion-icon 

               name="trash"></ion-icon></button> 

        </ion-item-options> 

     </ion-item-sliding> 

   </ion-list> 

</ion-content> 

Let’s break this template down bit by bit now. The first section of this template is our navigation bar: 

   <ion-navbar  color="danger"> 

     <ion-title> 

        <img  src="assets/images/logo .png" /> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="playSlideshow ()"><ion-icon 

            name="play"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

The <ion-navbar> allows us to add a header bar to the top of our application that can hold buttons, 

titlesandevenintegratesdirectlywithIonic’snavigationsystemtodisplayabackbuttonwhennecessary. 

We add the danger attribute to the navbar to style it with our danger colour, which is defined in vari- 

able.scss (we will configure these later). 

                                                 295 

----------------------- Page 297-----------------------

Inside of this navbar we use <ion-title>, which is typically used to display a text title for the current 

page, to display our logo. We also use <ion-buttons> to create a button in the navbar. By specifying 

the end attribute,thebuttonswillbeplacedontherightside,butifweweretospecifythe‘start’attribute 

it would be displayed on the left instead. 

Finally we have the button itself inside of <ion-buttons>. This button uses a play icon and has a click 

handlerattachedtoit,whichwillcallthe playSlideshow ()functioninour home.ts file(whichwehave 

not created yet of course). 

The next part of our template is the content section, which includes a list: 

<ion-content> 

   <ion-list> 

      <ion-item-sliding> 

        <ion-item> 

           <img  src="http ://placehold .it/100x100" /> 

           <ion-badge  item-right  light>0  days  ago</ion-badge> 

        </ion-item> 

        <ion-item-options> 

           <button  ion-button  icon-only  color="light" 

                (click)="removePhoto (photo)"><ion-icon 

               name="trash"></ion-icon></button> 

        </ion-item-options> 

      </ion-item-sliding> 

   </ion-list> 

                                                   296 

----------------------- Page 298-----------------------

</ion-content> 

Beforewegettothelist,noticethateverythingiswrappedinsideof <ion-content> -thisiswhatholds 

the main content for the page and in most cases everything except the navbar will be inside of here. 

Much like a list is created with plain HTML, e.g: 

<ul> 

      <li></li> 

      <li></li> 

      <li></li> 

</ul> 

A list in Ionic is created in basically the same way: 

<ion-list> 

      <ion-item></ion-item> 

      <ion-item></ion-item> 

      <ion-item></ion-item> 

</ion-list> 

Of course, ours looks a little more complicated than that so let’s talk through it. The first thing out of 

the ordinary we are doing is adding the no-lines attribute to the <ion-list>. Just like the danger 

attribute we added to navbar, this attribute also styles our list except that it will cause the items in the list 

not to display with borders. 

Thenextbitget’salittletrickier,asitiswherewesetupourslidingitem. An <ion-sliding-item>,op- 

posedtoanormal <ion-item>,hastwosetsofcontent-theitemitself,andthenthe<ion-item-options> 

which will be revealed when the user slides the item. 

The first block of code inside of <ion-sliding-item> is the normal <ion-item> definition. Inside of 

thisitemwillbeoneofthephotostheuserhastaken(eventuallywewillturnthisintoaloopforallphotos), 

but for now we are just using a placeholder image. We also add a badge that will be aligned to the right 

                                                    297 

----------------------- Page 299-----------------------

oftheitemtodisplayhowmanydaysagothephotowastaken. We’realsojustusingdummydataforthe 

days ago label, but we will of course change that later. 

Finally,wehavethesecondblockofcode, <ion-item-options>,whichsimplyallowsustodefinewhat 

contentwewanttodisplaywhentheuserslidestheitem. Inthiscasewearejustaddinga‘Delete’button 

which will also pass in a reference to the photo it was called on. The photo reference it is trying to pass 

now won’tactually work (norwillthe function because we haven’tcreated ityet), later on when we create 

the loop for all photos we will discuss how to create this reference. 

Now we’re going to add in that conditional photo button I mentioned earlier. 

> Modify the content section of src/pages/home/home .html to reflect the following: 

<ion-content> 

   <ion-list> 

     <button  ion-item  *ngIf="!photoTaken" detail-none  (click)="takePhoto ()"> 

        <img  src="assets/images/smile .png" /> 

     </button> 

     <ion-item-sliding> 

        <ion-item> 

           <img  src="http ://placehold .it/100x100" /> 

           <ion-badge  item-right  light>0  days  ago</ion-badge> 

        </ion-item> 

        <ion-item-options> 

           <button  ion-button  icon-only  color="light" 

               (click)="removePhoto (photo)"><ion-icon 

               name="trash"></ion-icon></button> 

                                                  298 

----------------------- Page 300-----------------------

         </ion-item-options> 

      </ion-item-sliding> 

   </ion-list> 

</ion-content> 

Notice now that we have included another item in our list now above the sliding item, but rather than 

using <ion-item> we are using <button> with an ion-item directive. Visually, these two methods 

areexactlythesame,butonmobileeverythingthatisnota <button> or <a> thathasaclickhandlerwill 

have a slight tap delay. We don’t want to have this delay so we use the button instead. 

We also add the detail-none attribute here since buttons come with some styling by default that we 

don’t want in this case. We of course also have a click handler set up to trigger the takePhoto function 

that we will create later, but the most important thing here is the *ngIf directive. 

*ngIf isoneoftheconditionaldirectivesprovidedbyAngular2,whichallowsyoutochangeyourtemplate 

basedonsomedata. Inthecaseof *ngIf itwilldisplaytheelementitisattachedto,andeverythingthat 

element contains, only if the expression evaluates to be true. So since we have: 

*ngIf="!photoTaken " 

the extra button we added will only display if the photoTaken value is false, since we are essentially 

saying “display this button if the photoTaken variable is not true”. Later on, we will create a photoTaken 

variable in home.js which will keep track of whether a user has already taken a photo on the current day 

or not. 

If you take a look at the application now by running: 

ionic  serve 

you should see something like this: 

                                                      299 

----------------------- Page 301-----------------------

Obviously there’s a lot left to do but that’s all we need to do for now for the home page, so let’s move on 

to the slideshow page. 

                                                     300 

----------------------- Page 302-----------------------

The Slideshow Page 

As I mentioned, the slideshow page is going to be super simple. It is just going to be a modal that pops 

up to display all of the user’s photos in a quick slideshow. To do this, all we need is a container for the 

photos, a button to restart the slideshow and a button to close the page. 

> Modify src/pages/slideshow/slideshow .html to reflect the following 

<ion-header> 

   <ion-toolbar  color="danger"> 

     <ion-title>Play</ion-title> 

     <ion-buttons  start> 

        <button  ion-button  icon-only  (click)="playPhotos ()"><ion-icon 

            name="refresh"></ion-icon></button> 

     </ion-buttons> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="closeModal()"><ion-icon 

            name="close"></ion-icon></button> 

     </ion-buttons> 

   </ion-toolbar> 

</ion-header> 

<ion-content> 

     <div  class="image-container"> 

        <img  #imagePlayer  id="imagePlayer" src  =         "" /> 

     </div> 

</ion-content> 

You already know how the navbar and buttons work, so the only new thing here is the image player. All 

                                                301 

----------------------- Page 303-----------------------

we’re doing is adding an image element inside of the content area. Later on, we will add some code that 

will cycle through all the photos the user has taken and change the src property to briefly display each 

photo. To do this we will need to grab a reference to the <img> element, so we create a local variable of 

#imagePlayer that we will be able to grab from within our class definition later. 

But for now, that’s all we have to do - told you it was going to be simple. 

Summary 

We now have the templates set up for both of the pages in our application, so in the next lesson we can 

startdivingintosomemoreinterestingstuff. Infact,itwillprobablybeoneofthemostinterestinglessons 

because we will be learning how to integrate with the native Camera API and take photos! 

                                                    302 

----------------------- Page 304-----------------------

Lesson 4: Taking Photos with the Camera 

The primary goal of this lesson is to integrate the Camera to allow users to take photos, but we are going 

to be doing quite a bit to make that work. 

Of course we need to trigger the camera to take a photo, but we also need to: 

     • Move the photo to permanent storage on the phone 

     • Display the photo in our template 

     • Display all the other photos 

     • Allow the photo to be deleted 

Sothisisgoingtobeaprettylargelesson. InthegettingstartedsectionforthisapplicationwesetupIonic 

Native, which if you remember from the basics section is a service created by Ionic that wraps Cordova 

plugins to make using them a bit easier. 

We’re going to be using Ionic Native in the lesson to use the Camera plugin, and the File API plugin. 

Let’s get started! 

Creating a Photo Model 

Before we start adding the photo functionality, we are going to create a model to represent our photo 

object. When we create a photo we want to store a path to the where the photo is located, and the date 

the photo was taken. Creating a data model will allow us to easily create photo objects, by doing this: 

let  photo  =  new  PhotoModel ('path/to/image ', new  Date ()); 

rather than this: 

let  photo  =  { 

      image :  'path/to/image ', 

      date : newDate 

}; 

                                                       303 

----------------------- Page 305-----------------------

Thedifferenceisn’tthatgreat,andit’snotatallnecessaryforourapplicationtowork,butitisanicepattern 

tofollow,especiallywhenyourdatastartsgettingmorecomplex. Foranexampleofamorecomplexdata 

model, and a more detailed explanation about why you might want to create one, check out the Quick 

Lists lessons if you haven’t already. 

> Modify src/models/photo-model .ts to reflect the following: 

export  class  PhotoModel  { 

   constructor(public  image : string, public  date : Date){ 

   } 

} 

This model is pretty straightforward, we just pass in the image and the date and set it in the constructor. 

Now to make the model available in our home.ts file we will need to import it. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from      '@angular/core '; 

import  {  NavController  }  from        'ionic-angular '; 

import  {  PhotoModel  }  from       '../../models/photo-model '; 

@Component ({ 

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   constructor(public  navCtrl : NavController)  { 

   } 

                                                   304 

----------------------- Page 306-----------------------

} 

Creating a Simple Alert Service 

Surprise! I’ve got one more little thing for us to do before we get into the fun stuff. We’re going to be 

triggeringalotofdifferentalertsinthisapplicationbecausethere’smanydifferentplaceswhereerrorscan 

occur that the users needs to be notified about (taking the photo, moving the photo) and we will also be 

alerting the user when things have gone well as well. 

To create an alert, the syntax looks this: 

let  alert  =  this .alertCtrl .create({ 

      title : "My  Title", 

      message : "My  Message", 

      buttons :  [ 

           { 

                 text :  'Ok ' 

           } 

      ] 

}); 

alert .present (); 

Which is quite a bit of code, and if we are going to be calling this multiple times in the same file it’s going 

to get pretty messy. So we’re going to create another service, just like our data model, which will handle 

creating the alert for us. Once we have created it, we will instead be able to create an alert by doing this: 

let  alert  =  this .simpleAlert .createAlert('Oops !',  'Something  went  wrong .'); 

alert .present (); 

> Modify src/providers/simple-alert .ts to reflect the following: 

                                                     305 

----------------------- Page 307-----------------------

import  {  Injectable  }  from      '@angular/core '; 

import  {  AlertController  }  from        'ionic-angular '; 

@Injectable () 

export  class  SimpleAlert  { 

   constructor(public  alertCtrl : AlertController){ 

   } 

   createAlert(title : string, message : string):  any  { 

     return  this .alertCtrl .create({ 

        title : title , 

        message : message , 

        buttons :  [ 

           { 

             text :  'Ok ' 

           } 

        ] 

     }); 

   } 

} 

We’ve imported the AlertController service here so that we can create an alert, and then we have just 

created a single function that takes in a title and a message, and returns an alert using those values. This 

just creates the alert for us, we will still need to display it ourselves by presenting it wherever we need it. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from      '@angular/core '; 

                                                  306 

----------------------- Page 308-----------------------

import  {  NavController  }  from       'ionic-angular '; 

import  {  PhotoModel  }  from      '../../models/photo-model '; 

import  {  SimpleAlert  }  from       '../../providers/simple-alert/simple-alert '; 

@Component ({ 

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   constructor(public  navCtrl : NavController , public  simpleAlert : SimpleAlert) 

       { 

   } 

} 

NoticethatweareinjectingSimpleAlertthroughourconstructorjustlikewedowiththeNavController,but 

we didn’t with the photo model. This is because we are manually creating a new instance of PhotoModel 

everytimeweuseit,butwithSimpleAlertwearejustcallingthesamefunctionfromoneinstanceoverand 

over again. 

Taking a Photo with the Camera 

Ok,we’vegotourphotomodelandalertservicereadytouse-wecanfinallyfocusonthefunstuffwhich 

is actually taking the photo. We’ll be using Ionic Native to use the Camera plugin, which means we will 

need to first import the Camera plugin. 

> Add the following imports to src/pages/home/home .ts 

import  {  Camera , File  }  from      'ionic-native '; 

                                                  307 

----------------------- Page 309-----------------------

Now we can access the functionality through the Camera object that will be available in our component. 

I’m going to walk you through how to use it, but remember that you can find the documentation for all 

plugins available in Ionic Native here: http://ionicframework.com/docs/v2/native/Camera/ 

Before we add the code for taking a photo, we are going to add a few variables to our constructor and, 

so we don’t need to constantly modify our imports, import all of the things we will require for the rest of 

the application. We’re also going to be adding quite a few functions to this file, and some functions will 

reference other functions. So that we don’t run into any trouble with undefined functions, we’re going to 

add all of them now but just leave them blank. We will then step through implementing each function in 

detail (not all in this lesson though). 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from        '@angular/core '; 

import  {  ModalController , AlertController , Platform  }  from                    'ionic-angular '; 

import  {  PhotoModel  }  from         '../../models/photo-model '; 

import  {  SimpleAlert  }  from         '../../providers/simple-alert '; 

import  {  SlideshowPage  }  from          '../slideshow/slideshow '; 

import  {  Data  }  from      '../../providers/data ' 

import  {  Camera , File  }  from        'ionic-native '; 

declare  var  cordova; 

@Component ({ 

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   loaded : boolean  =  false ; 

   photoTaken : boolean  =  false ; 

   photos : PhotoModel []  =  []; 

                                                     308 

----------------------- Page 310-----------------------

constructor(public  dataService : Data , public  platform : Platform , public 

    simpleAlert : SimpleAlert, public  modalCtrl : ModalController , public 

    alertCtrl : AlertController)  { 

} 

ionViewDidLoad(){ 

  //  Uncomment  to use  test  data 

  /*this.photos  =     [ 

     new PhotoModel ('http://placehold .it/100x100 ', new Date ()), 

     new PhotoModel ('http://placehold .it/100x100 ', new Date ()), 

     new PhotoModel ('http://placehold .it/100x100 ', new Date ()) 

  ]*/ 

  this .platform .ready ().then (()  =>  { 

     this .loadPhotos(); 

  }); 

  document .addEventListener ('resume ',  ()  =>  { 

     if(this .photos .length  >  0){ 

       let  today  =  new  Date (); 

       if(this .photos [0].date .setHours(0,0,0,0)  === today .setHours(0,0,0,0)){ 

          this .photoTaken  =  true ; 

       }  else  { 

          this .photoTaken  =  false ; 

                                            309 

----------------------- Page 311-----------------------

       } 

    } 

  },  false); 

} 

loadPhotos(): void  { 

} 

takePhoto (): any  { 

} 

createPhoto(photo): void  { 

} 

removePhoto (photo): void  { 

} 

playSlideshow (): void  { 

} 

sharePhoto(image): void  { 

} 

                                       310 

----------------------- Page 312-----------------------

   save(): void  { 

   } 

} 

In the code above, we’ve added a member variable loaded to keep track of whether the photos have 

been loaded from storage yet (which is something we will do in the next lesson), photoTaken to tell if a 

photo has already been taken today and photos to hold all of our photo data. Since photos can only be 

addedwhenrunningonarealdevice,we’veaddedsometestdatatothe ionViewDidLoad hook,which 

will set some dummy data on this .photos so that you can test through the browser. If you need to do 

any testing with photos present, just uncomment that section (make sure to remove it later though!). 

Wehaveinjectedandsetupreferencestoalltheserviceswewillrequire,includingthedataservicewewill 

create later and the platform service. 

We’ve also added a weird resume listener here. The resume event will fire whenever a person sends 

your application to the background and then resumes using it again later. For example they have your 

application open, switch to Facebook, and then back to yours. The reason we’re doing this is because 

there’s a bit of an edge case with our photoTaken variable. Imagine someone has taken their photo for 

theday,butwhentheyclosetheapplicationtheydon’tfullycloseit,itjustgoestothebackground. When 

theycomebackthenextdaythelogicwewillrunlaterinour loadPhotos functionwon’truntodetermine 

if the photo was taken or not, because the application is just being resumed not reloaded. So whenever 

the application is resumed, we check if the date of the last photo taken is equal to today’s date, and then 

set the photoTaken variable according to that. 

NOTE: We have added declare  var          cordova here so that TypeScript does not complain about not 

knowing what it is. It does not do anything apart from that. 

Nowwe’regoingtoimplementthe takePhoto functionwhichwillhandletakingthephoto,solet’screate 

a basic version of that now. 

                                                    311 

----------------------- Page 313-----------------------

> Modify the takePhoto function to reflect the following: 

  takePhoto (): any  { 

     if(!this .loaded    || this .photoTaken){ 

       return  false ; 

     } 

     if(!this .platform .is('cordova ')){ 

       console .log("You  can  only  take  photos  on  a  device !"); 

       return  false ; 

     } 

     let  options  =  { 

       quality :  100, 

       destinationType :  1, //return  a path       to  the  image  on  the  device 

       sourceType :  1, //use  the  camera  to grab  the  image 

       encodingType :  0, //return  the  image  in jpeg format 

       cameraDirection :  1, //front  facing  camera 

       saveToPhotoAlbum : true  //save  a  copy  to  the users photo        album  as  well 

     }; 

     Camera .getPicture (options).then ( 

          (imagePath)  =>  { 

               console .log(imagePath); 

          }, 

          (err)  =>  { 

               let  alert  =  this .simpleAlert .createAlert('Oops !',  'Something  went 

                   wrong .'); 

                                              312 

----------------------- Page 314-----------------------

                 alert .present (); 

            } 

      ); 

   } 

Before we execute the Camera code, we check a few conditions first. If the variables we just recently 

created indicate that the data has not finished loading yet, or that a photo has already been taken, then 

the rest of the function will not finish executing. We also check to see if we are running on the ‘cordova’ 

platform,i.e.onarealdevice,andifwearenotthenitwillalsoexitthefunction. Sinceyoucanonlyaccess 

this plugin on a real device, it will just throw errors when it is not running on a device. 

Then we set up some options to pass to the Camera plugin, these configure what exactly we want to do 

andwhatwewantreturned. Thesevaluescanconfigurethingslikewhethertousethecameraortheuser’s 

photolibrary,theformattoreturntheimagein,whethertousethebackfacingorfrontfacingcameraand 

so on. I’ve added comments next to each option in the code to indicate what they do. 

Oncewe’vecreatedthatoptionsobject,wecallthe getPicture methodontheCameraobjectandpass 

in the options. This will return a promise which, when resolved, will give us a path to the image on the 

user’s device. Right now we are just logging out that value but we’re about to do a lot more with it. If an 

error value is returned then we use our SimpleAlert service to display a message to the user. 

Theimagethatistakenwiththecamera,andthepaththatisreturned,isinatemporarystoragefolder. So 

the image will display for a little while but if we want to keep the photo around for a while it’s not going to 

work,becauseeventuallyitwilljustbedeleted. Tosolvethisissue,wearegoingtohavetotakethatphoto 

and move it somewhere else, and then we are going to store a reference to that location for the photo. 

We’re going to do this with the File plugin. 

Moving the Photo to Permanent Storage 

In order to use the File API plugin, we’re going to modify the takePhoto function to do the following: 

                                                      313 

----------------------- Page 315-----------------------

     • Use the imagePath returned to find the photo in temporary storage 

     • Renameandmoveittoourown‘snapaday’folderonthedevice(whichwillbeinpermanentstorage) 

     • Create a new photo object in the application based on the new location of the photo 

So the takePhoto function is about to get a whole lot more complicated. Since there is so much code 

in this function, I will add detailed comments directly into the code, but I will also discuss it afterward as 

well. 

> Modify the getPicture call in the takePhoto function to reflect the following: 

      Camera .getPicture (options).then ( 

         (imagePath)  =>  { 

              //Grab  the file  name 

              let  currentName  =  imagePath .replace (/^.*[\\\/]/,  ''); 

              //Create  a  new  file  name 

              let  d  =  new  Date (), 

                    n  =  d .getTime (), 

                    newFileName  =  n  +     ".jpg"; 

              if(this .platform .is('ios ')){ 

                 //Move    the file     to permanent  storage 

                 File .moveFile (cordova .file .tempDirectory , currentName, 

                      cordova .file .dataDirectory , newFileName).then ((success : any) 

                      =>  { 

                    this .photoTaken  =  true ; 

                    this .createPhoto(success .nativeURL); 

                    this .sharePhoto(success .nativeURL); 

                                                     314 

----------------------- Page 316-----------------------

                },  (err)  =>  { 

                  console .log(err); 

                  let  alert  =  this .simpleAlert .createAlert('Oops !',  'Something 

                       went  wrong .'); 

                  alert .present (); 

                }); 

             }  else  { 

                this .photoTaken  =  true ; 

                this .createPhoto(imagePath); 

                this .sharePhoto(imagePath); 

             } 

        }, 

        (err)  =>  { 

           let  alert  =  this .simpleAlert .createAlert('Oops !',  'Something  went 

               wrong .'); 

           alert .present (); 

        } 

     ); 

Hopefully the comments in the code above make it reasonably easy to follow what’s going on, but here’s 

a high level step-by-step of what’s going on after the imagePath is returned from the camera: 

   1. Work out the current file name by removing everything before the last / in the imagePath 

   2. Create a new unique file name using the date so that we do not overwrite anything 

   3. If we are running on iOS then we move the photo out of the temp directory and into a permanent 

                                                  315 

----------------------- Page 317-----------------------

       directory. 

    4. Set the photoTaken variable to true, and pass the new path to the image to the createPhoto 

       and sharePhoto functions 

After all of this we should have the photo stored in a permanent location, along with a path to the image 

in its new location. Keep in mind that we haven’t actually created the createPhoto and sharePhoto 

functions yet. We’re going to create the createPhoto function now, but we will save the sharePhoto 

function for a later lesson when we integrate the social sharing plugin. 

The createPhoto functionwilltakethepath(thenativeURL)andkeepareferencetoitintheapplication. 

> Modify the createPhoto function to reflect the following: 

   createPhoto(photo): void  { 

      let  newPhoto  =  new  PhotoModel (photo , new  Date ()); 

      this .photos .unshift (newPhoto); 

      this .save(); 

   } 

As you can see it’s pretty simple. We pass in the path to the image on the device and the current date to 

our Photo Model to create a new photo object, and then we add it to our this .photos array. Rather 

than using the push method to add it to the array (which adds it to the end) we add it to the start of the 

array with unshift. We do this because we want to display the photos in reverse order (most recent first) 

and doing it this way makes our lives easier later. 

Wealsohaveacalltothe save function,whichwillsaveourdataintostoragebutwehaven’timplemented 

that functionality yet. 

Updating the Template 

We have photos being added to our this .photos array now, so now we can update our template to 

loopthroughanddisplayallofthem. Sinceyou’relikelytestingthroughthebrowserandcan’taddphotos 

                                                       316 

----------------------- Page 318-----------------------

throughthecamera,feelfreetouncommentthetestdataintheconstructorsothatyoucanseetheresults 

of the code in this section. 

Let’s update the template now. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="danger"> 

     <ion-title> 

        <img  src="assets/images/logo .png" /> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="playSlideshow ()"><ion-icon 

            name="play"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

     <button  ion-item  *ngIf="!photoTaken" detail-none  (click)="takePhoto ()"> 

        <img  src="assets/images/smile .png" /> 

     </button> 

     <ion-item-sliding  *ngFor="let  photo  of  photos"> 

        <ion-item> 

                                                317 

----------------------- Page 319-----------------------

           <img   [src]="photo .image" /> 

           <ion-badge  item-right  light>0  days  ago</ion-badge> 

        </ion-item> 

        <ion-item-options> 

           <button  ion-button  icon-only  color="light" 

                (click)="removePhoto (photo)"><ion-icon 

                name="trash"></ion-icon></button> 

        </ion-item-options> 

      </ion-item-sliding> 

   </ion-list> 

</ion-content> 

There’s two main additions to the template here. First we are using *ngFor to loop through our array of 

photos and create an <ion-item-sliding> entry for all of them. Using let  photo in let  photo 

of  photos allows us to reference the specific photo that is being rendered in the loop by using photo, 

e.g: photo .image to access the image path stored on the photo. 

Since we can access the path of each photo, we can now also set the <img> element to display it. No- 

tice that we use square brackets around [src], this allows us to set the src property to the expression 

photo .image on the image element. This means that photo .image will first be evaluated to whatever 

valueitstores(i.e. /path/to/image),andthensetasthe src. Ifwedidn’tusethesquarebrackets,then 

the src would literally be set to the string “photo.image”. 

We also have a delete button here that passes a reference to the photo (which we created by using let 

photo) through to the removePhoto function. Let’s implement that function now so that the photo is 

removed when the delete button is clicked. 

> Modify the removePhoto function in src/pages/home/home .ts to reflect the following: 

                                                    318 

----------------------- Page 320-----------------------

   removePhoto (photo): void  { 

     let  today  =  new  Date (); 

     if(photo .date .setHours(0,0,0,0)  === today .setHours(0,0,0,0)){ 

        this .photoTaken  =  false ; 

     } 

     let  index  =  this .photos .indexOf(photo); 

     if(index  >  -1){ 

        this .photos .splice(index,  1); 

        this .save(); 

     } 

   } 

Thesecondpartofthisfunctionisstraightforwardenough,wefindthephotoinourphotosarray,remove 

it,andtriggerasave. Thefirstbitisalittletrickierthough. Theissuewehaveisthatifausertakesaphoto, 

and then deletes the photo they took, they should be able to take another photo (since now they don’t 

haveaphotoforthatday). Butiftheydeleteanolderphoto,thentheyshouldn’tgettotakeanotherphoto. 

Sowhatwedoisgrabthedateofthephotothatwasdeleted,andcompareittotoday’sdate. Ifthephoto 

beingdeletedwastakentoday,thenweset this .photoTaken tofalsetoallowtheusertotakeanother 

photo. 

Summary 

What a lesson! There was some pretty complex stuff covered in this lesson but we’ve implemented the 

corefunctionalityoftheapplicationnow. There’sstillquiteabitlefttodo,butwecantakephotoswiththe 

                                                 319 

----------------------- Page 321-----------------------

camera and see them displayed in a list which is pretty cool. To give it a try for yourself you’ll need to run 

theapplicationonarealdevice. Ifyoudon’tknowhowtodothatalready,youcanskiptothe Testingand 

Debugging section of this book to see how to get the app installed on your device, and then come back 

to finish the rest of the application. 

IMPORTANT: If you want to test taking a photo on a real device now, you will have to update the 

loadPhotos function to reflect the following: 

   loadPhotos(): void  { 

      this .loaded  =  true ; 

   } 

You can’t take a photo until the data has finished loading, so we can just fake that for now. In the next 

lesson, we’ll be looking at how to create a data service to store our photos data permanently, so that it 

is available when the user comes back to the application the next time. 

                                                      320 

----------------------- Page 322-----------------------

Lesson 5: Saving and Loading Photos 

Wecannowtakephotosintheapplicationanddisplaythosephotosinalist,wecanevendeletethemas 

well. Theproblemisthatthedatastoredin this .photos willbelostassoonastheapplicationisclosed. 

Obviously the user isn’t going to be very happy when they find their selfie missing the next time they try 

tousetheapplication,sointhislessonwearegoingtolearnhowtocreateadatastorageservicetoboth 

save data to permanent storage, and to load it into the application. 

We’ve already got a lot of this process set up, we’ve already generated a ‘Data’ provider which we have 

imported into our home.ts file, and we even have a save function created that we are calling whenever 

we want data saved. So all we really have to do is: 

     • Implement the save function so that calls the data service 

     • Modify the empty Data provider to provide save and load functionality 

     • Load the photo data into the application when the application is opened 

Implementing the Data Service 

We’regoingtoaddthecodefor data.ts nowsothatitwillsaveintostorageanydatathatitispassed. The 

code for this service is actually surprisingly simple, so let’s take a look at it first and then talk through it. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Storage  }  from       '@ionic/storage '; 

import  {  Injectable  }  from        '@angular/core '; 

@Injectable () 

export  class Data  { 

   constructor(public  storage : Storage){ 

   } 

                                                     321 

----------------------- Page 323-----------------------

   getData (): Promise<any>  { 

      return  this .storage .get ('photos '); 

   } 

   save(data): void  { 

      let  newData  =  JSON .stringify(data); 

      this .storage .set('photos ', newData); 

   } 

} 

Let’s take a look at the import at the top of this file: 

import  {  Storage  }  from       '@ionic/storage '; 

Storage is Ionic’s generic storage service, and it handles storing data in the best way possible whilst 

providing a consistent API for us to use. 

Whenrunningonadevice,andiftheSQLitepluginisavailable(whichweinstalledearlier),itwillstoredata 

usinganativeSQLitedatabase. SincetheSQLitedatabasewillonlybeavailablewhenrunningnativelyon 

adevice, Storage willalsouse IndexedDB,WebSQL,orstandardbrowser localStorage iftheSQLite 

database is not available. 

It’sbesttouseSQLitewherepossible,becausethebrowserbasedlocalstorageisnotcompletelyreliable 

andcanpotentiallybewipedbythe operating system. Havingyourdatawipedrandomlyisobviouslynot 

ideal. 

Let’s take a look at the getData function: 

   getData (): Promise<any>  { 

      return  this .storage .get ('photos '); 

   } 

                                                     322 

----------------------- Page 324-----------------------

Thisfunctionwillallowustoretrievethelatestdatathathasbeenstored. The get methodofourstorage 

will return a promise, but notice that we are not setting up the handler for when the promise finishes here, 

instead we just return the result of the get method directly. This allows us to set up the handler from 

wherever in the code this method is being called, which makes more sense for the flow of the application 

(hopefully this will be made more clear shortly). 

Then we have our save function, which handles actually saving the data into storage: 

   save(data): void  { 

      let  newData  =  JSON .stringify(data); 

      this .storage .set('photos ', newData); 

   } 

We are storing all the data as a single JSON encoded string, so we first call the JSON.stringify function 

and then store the data using the set method on our storage object. 

That’sallthereistosavingthedata,whichisn’treallyallthatcomplex. Nowwejustneedtohandleloading 

that data back into the application. We’re going to do this by defining the loadPhotos function. 

> Modify the loadPhotos function in src/pages/home/home .ts to reflect the following: 

   loadPhotos(): void  { 

      this .dataService .getData ().then ((photos)  =>  { 

         let  savedPhotos : any  =  false ; 

         if(typeof (photos)  !=  "undefined"){ 

           savedPhotos  =  JSON .parse (photos); 

         } 

         if(savedPhotos){ 

                                                     323 

----------------------- Page 325-----------------------

           savedPhotos .forEach (savedPhoto  =>  { 

             this .photos .push (new  PhotoModel (savedPhoto .image, new 

                  Date (savedPhoto .date))); 

           }); 

        } 

        if(this .photos .length  >  0){ 

           let  today  =  new  Date (); 

           if(this .photos [0].date .setHours(0,0,0,0)  === today .setHours(0,0,0,0)){ 

             this .photoTaken  =  true ; 

           } 

        } 

        this .loaded  =  true ; 

      }); 

   } 

Thefirstthingwearedoinghereiscallingthe getData ()functionwejustimplementedinourdataservice. 

ThiswillreturnallofthephotodataasaJSONencodedstring,sothefirstthingwedoisdecodeitintoan 

object we can work with, or an empty array if no photos are returned. 

If there are photos loaded from storage, we use the data to recreate each photo using our photo model. 

Then, once again, we do a little trickery to determine whether or not the user is allowed to take a photo 

today. Wesimplycheckthedateofthephotointhefirstpositionandcompareittothecurrentdate,ifthey 

match then we set the photoTaken variable to true. 

Onceallthis hasfinished executing,we setthe this .loaded flagtotrueto indicate thatthephotos are 

                                                  324 

----------------------- Page 326-----------------------

loaded and ready to go. Now all we have left to do is make our save function actually make a call to the 

data service. 

Now let’s move on to defining the save function. 

> Modify the save function in home .ts to reflect the following: 

   save(): void  { 

      this .dataService .save(this .photos); 

   } 

Now wheneverthe save function is called itwillpassin allthe currentvaluesin this .photos andsave 

them into storage. 

Summary 

Thatlessonwascertainlyalotshorter,sohopefullyyouenjoyedabitofabreakafterthelastone. Saving 

and loading data sounds like a pretty complex topic, but as you can see storing simple data is actually 

quite easy. 

Inthenextlessonwe’regoingtogetbacktodoingsomethingalittlemorefun,we’regoingtofinishofthe 

Slideshow page so that it shows a slideshow of all of the user’s photos, as well as implementing our own 

custom “Days Ago” pipe. 

                                                    325 

----------------------- Page 327-----------------------

Lesson 6: Creating a Custom Pipe and Flipbook of all Photos 

In this lesson we will be creating our own custom pipe to display the dates photos were taken in a more 

userfriendlyway,andwewillalsobefinishingoffacriticalportionofourapplicationwhichistheslideshow. 

It won’t be quite as complex as actually taking the photo was, but the slideshow is pretty much the point 

of the whole application. 

Creating a Custom Pipe 

We’vealreadycoveredwhatapipeisinthebasicssectionofthisbook,buttorefreshyourmemoryapipe 

essentially allows us to modify some data before displaying it to the user. 

Thegoalforushereistocreatealabelthatdisplayshowmanydaysagoaphotowastaken,e.g. “3days 

ago”, “10 days ago”. Right now, the only data we have stored on our photo that we can use is a date 

object, unfortunately for us that looks something like this: 

Sun  Mar  06  2016  00:40:02  GMT+1000  (AEST) 

whichisn’tthemostuserfriendlyformatintheworld. Soa @Pipe isaperfectusecaseforthis: wecreate 

a pipe that takes in our ugly date format, converts it into the “X days ago” format, and then returns it. 

Let’s take a look at how to create the pipe first, and then we’ll go over how to use it. 

> Modify src/pipes/days-ago .ts to reflect the following: 

import  {  Injectable, Pipe  }  from           '@angular/core '; 

@Pipe ({ 

   name :  'daysAgo ' 

}) 

@Injectable () 

export  class DaysAgo  { 

   transform (value , args?)  { 

                                                     326 

----------------------- Page 328-----------------------

      let  now  =  new  Date (); 

      let  oneDay  =  24  *  60  *  60  *  1000; 

      let  diffDays  =  Math .round (Math .abs ((value .getTime ()  - 

          now .getTime ())/(oneDay))); 

      return  diffDays ; 

   } 

} 

In the @Pipe decorator we supply a name of daysAgo, this means that this pipe can be used by using 

daysAgo as the keyword in the template. When using a pipe, you always pass data into it, and this 

data gets sent to the transform function and is passed in as the value. We will be passing the Date 

objectfromourphotointothispipe,sothat’swhatwewillbeworkingwithhere. Alsonotethatadditional 

argumentscanalsobesuppliedthroughthepipe,whichiswhyweuse args? becausethatparameteris 

not required. 

Firstwedoalittlemathematicsmagictoworkoutthedifferenceindaysbetweenthecurrentdateandthe 

date the photo was taken (Stack Overflow gets the credit for this one, my solution would have been way 

uglier than this), and then we return it. Whatever value is returned is what will actually be rendered out to 

the user in the template. 

Ifyourecallfrom previous lessons,we’ve already set thispipe up in ourapplication using app.module.ts. 

> Modify the photo item in home .html to reflect the following: 

        <ion-item> 

           <img    [src]="photo .image" /> 

           <ion-badge  item-right  light>{{photo .date               | daysAgo}}  days 

                ago</ion-badge> 

        </ion-item> 

Notice that we have added the following: 

                                                     327 

----------------------- Page 329-----------------------

{{photo .date      | daysAgo}} 

Thiswillpass photo .date intothe daysAgo pipe,andthenwhatever daysAgo returnswillbedisplayed 

to the user here. The end result will be a badge containing something like “5 days ago”. 

Creating a Slideshow of All Photos 

We’ve already created the template for the Slideshow, so now we need to create some logic so that all of 

the photos are cycled through and displayed, and we will also need to add a way to open the slideshow 

page (as well as restart the slideshow). 

Let’s start off by defining the playSlideshow function so that we can actually open the page. 

> Modify the playSlideshow function in src/pages/home/home .ts to reflect the following: 

   playSlideshow (): void  { 

      if(this .photos .length  >  1){ 

           let modal  =  this .modalCtrl .create(SlideshowPage,  {photos : 

                this .photos}); 

           modal .present (); 

      }  else  { 

           let  alert  =  this .simpleAlert .createAlert('Oops !',  'You  need  at  least 

                two  photos  before  you  can play  a  slideshow .'); 

           alert .present (); 

      } 

   } 

Wedisplayamodalpagetousersverysimilarlytohowwecreatealerts. FirstwecreateaModal,andthen 

we present it using the NavController. In this case we create a Modal using the SlideshowPage that we 

have already created, and we also pass in a data object with it that contains all of the photos. This will 

                                                    328 

----------------------- Page 330-----------------------

allow us to grab that data from the Slideshow Page. 

Notice that we only trigger the modal if the user has more than 1 photo (because a slideshow with 0 or 1 

photos isn’t really a slideshow, right?), and if they don’t an alert is displayed. 

Now we are going to define the class for the Slideshow Page. The class is reasonably small so I’m going 

to post all of the code in one block and then we will step through it afterwards. 

> Modify src/pages/slideshow/slideshow .ts to reflect the following: 

import  {  NavParams , ViewController  }  from           'ionic-angular '; 

import  {  Component , ElementRef , ViewChild  }  from             '@angular/core '; 

@Component ({ 

   selector :  'page-slideshow ', 

   templateUrl :  'slideshow .html ' 

}) 

export  class  SlideshowPage  { 

   @ViewChild ('imagePlayer ')  imagePlayer : ElementRef ; 

   imagePlayerInterval : any ; 

   photos : any ; 

   constructor(public  navParams : NavParams , public  viewCtrl : ViewController)  { 

     this .photos  =  this .navParams .get ('photos '); 

   } 

   ionViewDidEnter(){ 

     this .playPhotos (); 

   } 

                                                   329 

----------------------- Page 331-----------------------

   closeModal(){ 

     this .viewCtrl .dismiss (); 

   } 

   playPhotos (){ 

     let  imagePlayer  =  this .imagePlayer .nativeElement ; 

     let  i  =  0; 

     //Clear  any  interval  already  set 

     clearInterval(this .imagePlayerInterval); 

     //Restart 

     this .imagePlayerInterval  =  setInterval(()  =>  { 

        if(i  <  this .photos .length){ 

           imagePlayer .src  =  this .photos [i].image; 

           i++; 

        } 

        else  { 

           clearInterval(this .imagePlayerInterval); 

        } 

     },  500); 

   } 

} 

There’s a couple things here you may not be familiar with. We’re importing the NavParams service here 

which will allow us to grab the photo data that we added when creating the modal. You can see we grab 

thisintheconstructorbyusing this .navParams .get ('photos ');. Theotherweirdthinghereisthe 

use of ViewController. We need to include this so that we can dismiss the modal (we’ve defined the 

                                                 330 

----------------------- Page 332-----------------------

closeModal function here as well which is called by a button in our template). 

The most important function here is the playPhotos function, this is what will loop through all of the 

photos and change the image element on our page accordingly. First we grab a reference to the image 

elementbyusingthe @ViewChild referencewesetupbefore(whichallowsustograbanyelementfrom 

the template using a #localvariable attached to it), we clear any intervals that are currently running 

(in case a user restarts the slideshow when it is still currently playing) and then we start looping through 

allofthephotosin this .photos. Iftherearestillphotoslefttodisplay,theimageelements src property 

is updated with the next photo, and if there isn’t photos left to display then the interval is cleared. In the 

code above the interval is set to run every 500ms or every 0.5 seconds, so you could adjust this to make 

the slideshow slower or faster if you want (or perhaps even add an option for the user to control that). 

The playPhotos functionistriggeredautomaticallybytheuseofthe ionViewDidEnter function,which 

automatically executes after the view is entered, and it will do this every time we enter the view. 

Summary 

This was another reasonably simple lesson, but we covered some cool stuff here. Most of the main func- 

tionality for the application has been implemented, now we just need to add the bells and whistles. We 

will of course make it look a lot prettier, but in the next lesson we are going to look at incorporating local 

notifications and social sharing. 

                                                     331 

----------------------- Page 333-----------------------

Lesson 7: Integrating Local Notifications & Social Sharing 

We’vefinishedcreatingalotofthemainfunctionalityintheapplication: wecantakephotosandhavethem 

displayed in a list, delete photos, load photos from storage, play a slideshow and so on. The features we 

will be adding in this lesson are nice-to-have’s that improve the user experience. 

Wewillbeaddinglocalnotificationsthatwillsendaremindertotheuseronceadaytotaketheirphotofor 

theday,andwewillenablesocialsharingsothattheusercanshareanyphotostheytakewiththeirfriends. 

We’ve already installed both of these plugins in the getting started section so we just need to implement 

the functionality. 

Let’s jump right in. 

Local Notifications 

Before we implement the local notifications, it might be worth highlighting the difference between push 

notifications and localnotifications. Theybothlookandbehaveverysimilar,theyallowyoutonotifythe 

user of things whether they currently have your application open or not and look like this: 

                                                       332 

----------------------- Page 334-----------------------

The difference is that push notifications require an external server that handles pushing a notification out 

to the device, whereas local notifications are completely handled on the device itself. This means local 

notificationsaregreatforthingslikealarms,schedulednotifications,orinthecaseofourapplicationadaily 

remindertotakeaphoto. Pushnotificationsarebetterforbeingnotifiedofthingsthathappenoutsidethe 

user’s device, like someone sending them a message on Facebook. 

To implement this functionality we are just going to add a little bit of code to our root component. 

> Modify src/app/app .component .ts to reflect the following: 

import  {  Component  }  from       '@angular/core '; 

                                                    333 

----------------------- Page 335-----------------------

import  {  Platform  }  from    'ionic-angular '; 

import  {  HomePage  }  from    '../pages/home/home '; 

import  {  LocalNotifications  }  from       'ionic-native '; 

@Component ({ 

   template :  `<ion-nav    [root]="rootPage"></ion-nav>` 

}) 

export  class MyApp  { 

   rootPage  =  HomePage ; 

   constructor(platform : Platform)  { 

     platform .ready ().then (()  =>  { 

        if(platform .is('cordova ')){ 

          LocalNotifications .isScheduled(1).then (  (scheduled)  =>  { 

             if(!scheduled){ 

               let  firstNotificationTime  =  new  Date (); 

               firstNotificationTime .setHours(firstNotificationTime .getHours ()+24); 

               LocalNotifications .schedule({ 

                  id :  1, 

                  title :  'Snapaday ', 

                  text :  'Have  you  taken  your  snap  today? ', 

                  at : firstNotificationTime , 

                  every :  'day ' 

               }); 

                                                334 

----------------------- Page 336-----------------------

              } 

            }); 

         } 

      }); 

   } 

} 

Since this constructor is one of the first things that runs when we open the application, we put the call to 

thisplugininsideofthehandlerfor platform .ready ()tomakesurethatthepluginisreadytobeused. 

We then also check if we are running on the ‘cordova’ platform like we did with the Camera, because this 

plugin will only work when running on a device. 

Then we get into the using the plugin itself, which we can access through LocalNotifications from 

IonicNative. Wefirstcheckifanotificationwiththeidof 1 isalreadyscheduled,ifitiswedonothing,but 

if it’s not then we create a new notification using the schedule method. 

Wesimplysupplyatitleandaddamessagethatwewanttodisplayonthenotification,andwealsosupply 

an id so that we can identify the notification later (like we just did when checking to see if it was already 

scheduled). We need to describe when to display the notification as well, so we create a time that is 24 

hoursfromnow(sothatthefirstnotificationdisplaysatthesametimetomorrow)andsetthefrequencyto 

every day, so that it will continue to show every day (there are other options you can use like every week 

etc.). 

That’s all there is to using this plugin, or at least that’s all we need to do with it, there are a lot more 

options so make sure to check out the documentation for the plugin if you’re looking to do something 

more complex. 

                                                      335 

----------------------- Page 337-----------------------

Social Sharing 

Nowwe’regoingtoaddthesocialsharingplugin. Thisisagreatpluginforsharinglittlebitsofdataacross 

many different social media networks and even things like SMS and email. It can be quite a bit of hassle 

integratingwithvariousdifferentAPIsmanually(e.g.Facebook,Twitteretc.) andthispluginsimplifiesthat 

immensely. 

You can either share something to a specific platform, or you can trigger a generic share pop up and 

the user can share to wherever they want. To implement this functionality, we are going to define our 

sharePhoto function which is already being called by our takePhoto function. 

> Modify the Ionic Native imports to reflect the following in src/pages/home/home .ts: 

import  {  Camera , File , SocialSharing  }  from          'ionic-native '; 

> Modify the sharePhoto function in src/pages/home/home .ts to reflect the following: 

   sharePhoto(image): void  { 

     let  alert  =  this .alertCtrl .create({ 

        title :  'Nice  one !', 

        message :  'You\'ve  taken  your  photo  for  today , would  you  also  like  to 

             share  it? ', 

        buttons :  [ 

           { 

             text :  'No , Thanks ' 

           }, 

           { 

             text :  'Share ', 

             handler :  ()  =>  { 

                SocialSharing .share('I\'m  taking  a  selfie  every  day  with 

                    #Snapaday ', null , image, null) 

             } 

                                                  336 

----------------------- Page 338-----------------------

            } 

         ] 

      }); 

      alert .present (); 

   } 

We’ve created a few alerts before and each time we have used the Simple Alert service that we created. 

We’re not doing that here though because we’re creating a more complex alert. This one is going to have 

twobuttons,andoneofthosebuttonswilltriggerashareusingthesocialsharingplugin(theotherwilljust 

close the alert). 

Asyoucanseeinthehandlerforthe‘Share’button,allwedoiscallthe share methodthroughtheplugin 

(whichisaccessiblethrough window .plugins .socialsharing)andsupplyamessageandtheimage. 

There’s a bunch of different configurations you can use with this plugin so again, make sure to check out 

the documentation for it. 

Nowwhentheuserclicks‘Share’theywillgetapopuplikeintheimageabove,andwillbeabletochoose 

which platform they want to share to. 

Summary 

Both of the features we added to this application will help with growth and user engagement in the appli- 

cation. Evenifsomeonewantedtotakeaselfieeverydaythroughtheapplication,theywouldlikelyforget 

without some kind of reminder. The ability for them to easily share their photos to social media will also 

help spread the word about the application and hopefully drive more downloads. 

The only thing we have left to do now is style our application so that it doesn’t look so ugly, we will be 

doing that in the next lesson. 

                                                      337 

----------------------- Page 339-----------------------

Lesson 8: Styling 

We’re almost there, the application is basically completed now, but after this lesson the functionality will 

be completed and it will look pretty too. 

If you remember from the basics section, there’s quite a few different ways we can add styles to the 

application. IfyouskippedoverthatpartorarenotentirelysurewhatI’mtalkingabouthere,I’drecommend 

going back and reading about theming in the basics sections. 

> Modify the Named  Color  Variables in theme/variables .scss to the following: 

$colors :  ( 

   primary :       #387ef5 , 

   secondary :     #32db64 , 

   danger :        #fa2d18 , 

   light :         #f4f4f4 , 

   dark :          #222, 

   favorite :      #69BB7B 

); 

$item-ios-padding-left :  0; 

$item-md-padding-left :  0; 

$item-ios-padding-right :  0; 

$item-md-padding-right :  0; 

$item-ios-padding-top :  0; 

$item-md-padding-top :  0; 

$item-ios-padding-bottom :  0; 

$item-md-padding-bottom :  0; 

$list-ios-margin-bottom :  0px ; 

$list-ios-margin-top :  0px ; 

$list-md-margin-bottom :  0px ; 

                                                  338 

----------------------- Page 340-----------------------

$list-md-margin-top :  0px ; 

First, we’ve redefined the default colors for the application which we are making use of in our templates. 

Remember that these values can be added to the elements in our templates like this: <ion-navbar 

color="danger"> 

ThenweoverrideabunchthedefaultSASSvariables,whichisbasicallyjustremovingpaddingandmargins 

from the list and list item elements so that our photos take up all the available space. 

Now let’s move on to the component specific styles. We are going to be modifying our templates slightly 

to include some custom classes, and define those classes in the .scss file for each component. Let’s 

start with our home page. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="danger"> 

     <ion-title> 

        <img  src="assets/images/logo .png" /> 

     </ion-title> 

     <ion-buttons  end> 

        <button  ion-button  icon-only  (click)="playSlideshow ()"><ion-icon 

            name="play"></ion-icon></button> 

     </ion-buttons> 

   </ion-navbar> 

</ion-header> 

<ion-content> 

   <ion-list> 

                                                 339 

----------------------- Page 341-----------------------

     <button  ion-item  *ngIf="!photoTaken" detail-none  (click)="takePhoto ()"> 

       <img  src="assets/images/smile .png" class="list-photo" /> 

     </button> 

     <ion-item-sliding  *ngFor="let  photo  of  photos"> 

       <ion-item> 

         <img  [src]="photo .image" class="list-photo" /> 

         <ion-badge  item-right  color="light">{{photo .date      | daysAgo}}  days 

             ago</ion-badge> 

       </ion-item> 

       <ion-item-options> 

         <button  ion-button  icon-only  color="light" 

             (click)="removePhoto (photo)"><ion-icon 

             name="trash"></ion-icon></button> 

       </ion-item-options> 

     </ion-item-sliding> 

  </ion-list> 

</ion-content> 

> Modify src/pages/home/home .scss to reflect the following: 

page-home  { 

   .scroll-content  { 

     background-color :  #222222; 

                                           340 

----------------------- Page 342-----------------------

   } 

   .logo  { 

     max-height :  39px ; 

   } 

   .list-photo  { 

     width :  100%; 

     height : auto ; 

   } 

   ion-badge  { 

     position : absolute ; 

     right :  10px ; 

     top :  5px ; 

   } 

} 

Again, there’s nothing too exciting here. We’re making sure our photo takes up all the available width, 

setting a dark background colour on the content area and on the items themselves, and using some 

absolute positioning to get our “days ago” badge to display where we want it. 

Now let’s take a look at the slideshow page. 

> Modify src/pages/slideshow/slideshow .scss to reflect the following: 

page-slideshow  { 

   .scroll-content  { 

     background-color :  #222222; 

   } 

                                                  341 

----------------------- Page 343-----------------------

   .image-container  { 

        position : absolute ; 

        top :  0; 

        bottom :  0; 

        left :  0; 

        right :  0; 

        display : flex ; 

        justify-content : center; 

        align-items : center; 

   } 

   #imagePlayer  { 

      width :  100%; 

      height : auto ; 

      vertical-align : middle ; 

   } 

} 

The only styling we’re adding to this page is to get the photos to display in the center, both horizontally 

andvertically(whichisn’talwaystheeasiesttask!). We’vedone abitoftrickerywithflexboxtogetthatto 

happen. Flexboxisalittlemoreadvanced,butifyou’relookingforabitofanintrotoitthentakealookat 

this tutorial. 

If you take a look at your application now, it should look like this: 

                                                    342 

----------------------- Page 344-----------------------

Asyoucansee,wehaven’tevenaddedthatmuchstylingtotheapplicationbutitlooksawholelotbetter 

now. 

                                           343 

----------------------- Page 345-----------------------

Conclusion 

CongratulationsonmakingitthroughtheGiflisttutorial. We’velearnedalotthroughdevelopingthisappli- 

cation, but the main take aways are: 

     • How to integrate native plugins 

     • How to use the Camera API 

     • How to use the File API 

     • How to use local notifications 

     • How to use modals 

     • How to create a custom provider 

     • How to store data permanently 

There’s always room to take things further though, especially when you’re trying to learn something. Fol- 

lowing tutorials is great, but it’s even better when you figure something out for yourself. Hopefully you 

have enough background knowledge now to start trying to extend the functionality of the application by 

yourself, here’s a few ideas to try out: 

     • Create a different theme for the application [EASY] 

     • Modify the ‘Days Ago’ pipe to display ‘today’ and ‘1 day ago’ instead of ‘0 days ago’ and ‘1 days 

       ago’ [MEDIUM] 

     • Add settings to allow the user to control the playback speed of the slideshow [HARD] 

     • Allow the user to configure whether or not they want daily notifications and what time they want to 

       receive them [HARD] 

Remember, the Ionic 2 documentation is your best friend when trying to figure things out. 

What next? 

You have a completed application now, but that’s not the end of the story. You also need to get it running 

on a real device and submitted to app stores, which is no easy task. The final sections in this book will 

                                                      344 

----------------------- Page 346-----------------------

walk through how to take what you have done here, and get it onto the app stores so make sure to give 

that a read. 

                                                      345 

----------------------- Page 347-----------------------

Chapter 6 

Camper Mate 

                              346 

----------------------- Page 348-----------------------

Lesson 1: Introduction 

CamperMateisaninterestingapplicationtobuildbecauseitdoesn’treallyhaveonespecificpurposelike 

the other applications have had, it’s a bit of a utility toolbelt kind of app. It provides a bunch of different 

features to users that might be useful for them when going on caravan or camping trips. 

This gives us a chance to play around with some things that we haven’t been able to in the other applica- 

tions, and it also presents some interesting challenges - one important example being that we will have 

lots of different bits of data we need to save, rather than just one set of data, so our data service is going 

to be more complex than the ones we have been creating in other applications. 

Thetwomostimportantconceptswe’llbecoveringinthisapplicationaretheintegrationanduseofGoogle 

Mapsandtheuseofformsforcapturinguserinput. Also,thefirstapplicationinthisbook,Quicklists,would 

makeanexcellentadditiontothisapplication,sowe’reevengoingtolookathowcanaddtheentireQuick 

Lists application to a single tab in Camper Mate (it’s surprisingly easy). 

The exact features in this application will be: 

     • Amapthattheusercansettheircamplocationon. Whentheyhavelefttheircampsitetheywillbe 

        able to click a button which will then show them how to get back to their camp site. 

     • Aformthatwillallowtheusertostorepersonaldetailsrelevanttocamping(carandtrailerregistration 

        etc.) 

     • A form that will allow the user to store details about the camp they are staying at (access codes, 

       WiFi password etc.) 

     • Theabilitytocreate,modifyanddeletecustomchecklists(thefunctionalityprovidedbyQuickLists) 

and some of the main concepts we will be covering are: 

     • Creating forms and capturing user data 

     • Implementing Google Maps and creating a custom provider to handle that 

     • Creating a tabs layout 

     • Saving and retrieving multiple sets of data 

     • Reusing components from another application 

                                                          347 

----------------------- Page 349-----------------------

Here’s a few screenshots to give you an idea of what it will look like in the end: 

                                                      348 

----------------------- Page 350-----------------------

       349 

----------------------- Page 351-----------------------

Lesson Structure 

1. Getting Ready 

2. Creating a Tabs Layout 

3. User Input and Forms 

4. Implementing Google Maps and Geolocation 

5. Saving and Retrieving Data 

6. Reusing Components 

7. Styling 

Ready? 

Now that you know what you’re in for, let’s get to building it! 

                                                    350 

----------------------- Page 352-----------------------

Lesson 2: Getting Ready 

In this lesson we are going to prepare our application for the journey ahead. We are going to of course 

generate the application, and we are also going to set up all of the components and Cordova plugins we 

will need. At the end of this first lesson we should have a nice skeleton application set up with everything 

we need to start diving into coding. 

A good rule of thumb before starting any new application is to make sure you have the latest version of 

Ionic and Cordova, so if you haven’t done it recently then make sure to run: 

npm   install  -g     ionic  cordova 

or 

sudo  npm    install  -g     ionic  cordova 

beforeyoucontinue. IfyourunintoanytroubleinstallingIonicorgeneratingnewprojects,makesurethat 

you have a recent Node version installed. After you have that installed, you should also run the following 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

Generate a new application 

We will be using the blank starter template for this application which, as the name implies, is basically 

an empty Ionic project. It comes with one page built in called home which we will repurpose in the next 

lesson. 

> Run the following command to generate a new application 

ionic  start  campermate  blank  --v2 

                                                     351 

----------------------- Page 353-----------------------

> Make the new project your current working directory by running the following command: 

cd  campermate 

Your project should now be generated - now you can open up the project folder in your favourite editor. 

You can take a look at how your application looks by running the following command: 

ionic  serve 

which for now should look something like this: 

                                                   352 

----------------------- Page 354-----------------------

       353 

----------------------- Page 355-----------------------

Create the Required Components 

We’regoingtobecreatingafewpagesforthisapplication,wearegoingtoreusetheautomaticallygener- 

ated home page to create our tab layout (which will allow us to switch between pages), but we still need 

to add pages for the location, my details and camp details tab. 

> Run the following command to generate the Location page: 

ionic  g  page  Location 

> Run the following command to generate the My Details page: 

ionic  g  page  MyDetails 

> Run the following command to generate the Camp Details page: 

ionic  g  page  CampDetails 

Create the Required Services 

Aswellasourtabpages,wearealsogoingtocreateafewservices. WewillcreateaDataserviceforsaving 

and retrieving data, a Google Maps service to handle the Google Maps integration, and a Connectivity 

service so that we can easily check if the user is online or offline. 

> Run the following command to generate a Data provider: 

ionic  g  provider  Data 

> Run the following command to generate a Google Maps provider: 

ionic  g  provider  GoogleMaps 

> Run the following command to generate a Connectivity provider: 

ionic  g  provider  Connectivity 

                                                    354 

----------------------- Page 356-----------------------

Add Pages & Services to the App Module 

In order to use these pages and services throughout our application, we need to add them to our 

app.module.ts file. All of the pages we created need to be added to both the declarations array and 

the entryComponents array, all of the providers we create need to be added to the providers array, 

and any custom components or pipes only need to be added to the declarations array. Our model is 

just a simple class we willimport wherever we need, there is no need to set it up anywhere in the module. 

> Modify src/app/app.module.ts to reflect the following 

import  {  NgModule  }  from      '@angular/core '; 

import  {  IonicApp, IonicModule  }  from          'ionic-angular '; 

import  {  MyApp  }  from     './app .component '; 

import  {  Storage  }  from     '@ionic/storage '; 

import  {  HomePage  }  from      '../pages/home/home '; 

import  {  LocationPage  }  from       '../pages/location/location '; 

import  {  MyDetailsPage  }  from       '../pages/my-details/my-details '; 

import  {  CampDetailsPage  }  from        '../pages/camp-details/camp-details '; 

import  {  GoogleMaps  }  from      '../providers/google-maps '; 

import  {  Connectivity  }  from       '../providers/connectivity '; 

import  {  Data  }  from    '../providers/data '; 

@NgModule ({ 

   declarations :  [ 

     MyApp , 

     HomePage , 

     LocationPage , 

     MyDetailsPage , 

     CampDetailsPage 

   ], 

   imports :  [ 

                                                  355 

----------------------- Page 357-----------------------

      IonicModule .forRoot (MyApp) 

   ], 

   bootstrap :  [IonicApp], 

   entryComponents :  [ 

     MyApp , 

     HomePage , 

     LocationPage , 

     MyDetailsPage , 

     CampDetailsPage 

   ], 

   providers :  [Storage , Data , GoogleMaps , Connectivity] 

}) 

export  class  AppModule  {} 

Noticethatwealsohavea Storage provideraswellasthe Data  provider  we               created .Storage‘is 

provided by Ionic and allows us to save and retrieve data - we will be making use of this later. 

Add Required Platforms 

Before you can build for certain platforms, you need to add them to your project. This is something we 

will be doing way later on in this course, but you may as well just set them up now. 

> Run the following command to add the iOS platform to your application 

ionic  platform  add  ios 

> Run the following command to add the Android platform to your application 

ionic  platform  add  android 

                                                  356 

----------------------- Page 358-----------------------

Add Required Cordova Plugins 

This application will use a few different Cordova plugins. Remember, Cordova plugins can only be used 

when running on a real device. I’ll explain each plugin as we run through the commands for adding them. 

> Run the following command to add the Geolocation plugin: 

ionic  plugin  add  cordova-plugin-geolocation 

TheGeolocationpluginwillallowustograbtheuser’scurrentlocation,anditalsoprovidesothermethods 

which provide the ability to do things like track the user’s location over time. 

> Run the following command to add the Network Information plugin: 

ionic  plugin  add  cordova-plugin-network-information 

Thispluginwillgiveussomeinformationaboutthenetworktheuserison,suchasthetypeofconnection 

they have. This will allow us to more accurately determine if the user currently has an active Internet 

connection or not. 

> Run the following command to add the SQLite plugin: 

ionic  plugin  add  cordova-sqlite-storage 

ThisplugingivesyouaccesstonativestoragewithanSQLitedatabase. Weareaddingittothisapplication 

because the Ionic local storage service can make use of this plugin to provide more stable data storage. 

> Run the following command to add the In App Browser plugin: 

ionic  plugin  add  cordova-plugin-inappbrowser 

This plugin makes a webview available to us that we can launch external websites in. 

> Run the following command to add the Status Bar plugin: 

ionic  plugin  add  cordova-plugin-statusbar 

                                                     357 

----------------------- Page 359-----------------------

Wewillbeaddingthisplugintoallprojectstogiveuscontroloverthestatusbarinourapplication(thebar 

at the top of the devices screen that contains the time, battery information and so on). 

> Run the following command to add the Keyboard plugin: 

ionic  plugin  add  ionic-plugin-keyboard 

This plugin allows us to control the software Keyboard. 

> Run the following command to add the Splash Screen plugin: 

ionic  plugin  add  cordova-plugin-splashscreen 

This plugin allows us to control the splash screen (the fullscreen graphic that briefly displays when you 

open an app) 

> Run the following command to add the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

This plugin is required for all applications, and helps to define what resources should be allowed to be 

loaded in your application. Without it, resources you try to load will fail. 

As well as adding the plugin, you also need to define a “Content Security Policy” in your index.html 

file. We will be adding a very permissive policy which will essentially allow us to load any resources. 

Depending on your application, you may look into providing a more strict policy, but an open policy is 

good for development. 

> Modify your src/index .html file to include the following meta tag: 

<meta  http-equiv= "Content-Security-Policy" content="font-src  *                         'self ' data :; 

     img-src  *  data :; default-src  gap ://ready  file ://* *;  script-src                     'self ' 

     'unsafe-inline '  'unsafe-eval ' *            ; style-src      'self '  'unsafe-inline ' *"> 

> Run the following command to add the Crosswalk plugin: 

ionic  plugin  add  cordova-plugin-crosswalk-webview 

                                                      358 

----------------------- Page 360-----------------------

This is another plugin that we will add to every application, but you may decide you want to leave it out. 

By adding this plugin, when you build for Android “Crosswalk” will be used. Android has a lot of issues, 

especiallywitholderdevices,becausethereissomanydifferentsoftwareversionsoutthereanddifferent 

versions have different browsers (remember, since we are building HTML5 applications it is actually a 

browserenginepoweringandrunningourapplication). WhatCrosswalkdoesisbundleamodernbrowser 

into your application so no matter what device you are running on your app will be powered by the same 

browser, and the Crosswalk browser can improve performance a lot. 

The only real downside to this is that it increases the size of your application by a significant amount. In 

general,Ithinkit’sworthitandI’drecommendyouincludeitbutyoumayleaveitoutifyoulike. Formore 

information take a look at the Crosswalk Project website: https://crosswalk-project.org/ 

Set up Images 

Whenbuildingthisapplicationwearegoingtobemakinguseofafewimages. I’veincludedtheseinyour 

download pack but you will need to set them up in the application you generate. 

> Copy the images folder in the download pack for this application from src/assets to your own 

src/assets folder 

Summary 

That’s it! We’re all set up and ready to go, now we can start working on the interesting stuff. 

                                                    359 

----------------------- Page 361-----------------------

Lesson 3: Creating a Tabs Layout 

Inthislessonwearegoingtocreatethebasiclayoutfortheapplication,whichwillbeatabslayout. Atabs 

page works a little differently to most other pages you would have created, the page itself is pretty much 

just a placeholder for the tabs, but the actual content of the tabs are other pages that you import into the 

tabs page. Once you see it in action it’ll probably make more sense. 

Initially, we are going to create three tabs to hold the various pages of our application, but eventually we 

will be throwing in one extra tab which will hold the Quick Lists functionality. 

Let’s start off with our Home page which will be the page that holds all of our tabs. 

> Modify src/pages/home/home .html to reflect the following 

<ion-tabs> 

   <ion-tab  [root]="tab1Root" tabTitle="Location" tabIcon="navigate"></ion-tab> 

   <ion-tab  [root]="tab2Root" tabTitle="My  Details" tabIcon="person"></ion-tab> 

   <ion-tab  [root]="tab3Root" tabTitle="Camp  Details" 

        tabIcon="bookmarks"></ion-tab> 

</ion-tabs> 

As you can see, the layout here is pretty simple. We’re using <ion-tabs> and setting up several tabs 

with <ion-tab>. Wearesettingthe root propertyoneachofthesetabstoanexpressionwhichwewill 

soondefineinour home.ts file. Thisexpressionwillbethepagethatwewantthattabtocontain. Wealso 

set a title and an icon which will be displayed on the tab interface. 

Now let’s take a look at our class definition. 

> Modify src/pages/home/home .ts to reflect the following 

import  {  Component  }  from        '@angular/core '; 

import  {  LocationPage  }  from         '../location/location '; 

import  {  MyDetailsPage  }  from          '../my-details/my-details '; 

import  {  CampDetailsPage  }  from           '../camp-details/camp-details '; 

                                                     360 

----------------------- Page 362-----------------------

@Component ({ 

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

     tab1Root : any  =  LocationPage ; 

     tab2Root : any  =  MyDetailsPage ; 

     tab3Root : any  =  CampDetailsPage ; 

      constructor(){ 

      } 

} 

We’reimportingallthepageswewanttodisplayinthetabshere,andthenwearesettingthoseexpressions 

we were using in the template. The first tab now knows that it should display the LocationPage as its 

content. 

Our tabs layout is basically set up now (hooray!), it’s not break time yet though - we’re also going to set 

up the layouts and classes for each of the three tabs. Let’s start with the Location page. The location 

page will contain a map as well as some buttons that will allow the user to set their location, and launch 

directions so that they can get back home. 

> Modify src/pages/location/location .html to reflect the following: 

<ion-header> 

      <ion-navbar  color="primary"> 

        <ion-title> 

           <img  src  =   "assets/images/logo .png" class="logo" /> 

                                                   361 

----------------------- Page 363-----------------------

        </ion-title> 

        <ion-buttons  start> 

           <button  ion-button  icon-only  (click)="setLocation()"><ion-icon 

               name="pin"></ion-icon></button> 

        </ion-buttons> 

        <ion-buttons  end> 

           <button  ion-button  icon-only  (click)="takeMeHome ()"><ion-icon 

               name="walk"></ion-icon></button> 

        </ion-buttons> 

     </ion-navbar> 

</ion-header> 

<ion-content> 

     <div  #pleaseConnect  id="please-connect"> 

           <p>Please  connect  to  the  Internet...</p> 

     </div> 

     <div  #map  id="map "></div> 

</ion-content> 

The <ion-navbar> allows us to add a header bar to the top of our application that can hold buttons, 

titles and even integrates directly with Ionic’s navigation system to display a back button when neces- 

sary. We add the primary attribute to the navbar to style it with our primary colour, which is defined in 

app.variable.scss (we will configure these later). 

Inside of this navbar we use <ion-title>, which is typically used to display a text title for the current 

                                                  362 

----------------------- Page 364-----------------------

page, to display our logo. We also use <ion-buttons> to create some buttons in the navbar. By sup- 

plying the start attribute, the buttons will be placed on the left side of the navbar, and by supplying the 

end attribute the buttons will be placed on the right side. We place one button in each position to trigger 

the “set location”, and “take me home” functions. 

Finally,we have the contentarea which justcontains a <div> whichwe have attached #map to -this will 

allowustograbareferencetothisnodelateron. This <div> willalsoserveasacontainerforourGoogle 

Maplateron. We’vealsoaddedanother <div> herewhichwillshowaconnectionmessagetotheuserif 

they don’t have an Internet connection available (we will implement this later). 

Now let’s take a look at the class definition for the location page. 

> Modify src/pages/location/location .ts to reflect the following: 

import  {  NavController , Platform , AlertController  }  from                  'ionic-angular '; 

import  {  Component , ElementRef , ViewChild  }  from              '@angular/core '; 

import  {  Geolocation  }  from        'ionic-native '; 

import  {  GoogleMaps  }  from        '../../providers/google-maps '; 

import  {  Data  }  from      '../../providers/data '; 

@Component ({ 

   selector :  'page-location ', 

   templateUrl :  'location .html ' 

}) 

export  class  LocationPage  { 

   @ViewChild ('map ') mapElement : ElementRef ; 

   @ViewChild ('pleaseConnect ') pleaseConnect : ElementRef ; 

   latitude : number ; 

   longitude : number ; 

                                                    363 

----------------------- Page 365-----------------------

   constructor(public  navCtrl : NavController , public  maps : GoogleMaps , public 

       platform : Platform , public  dataService : Data , public  alertCtrl : 

       AlertController)  { 

   } 

   ionViewDidLoad(): void  { 

   } 

   setLocation(): void  { 

   } 

   takeMeHome (): void  { 

   } 

} 

We’vesetupquiteafewthingsherebutnotmuchisgoingonyet. We’reimportingGeolocationfromIonic 

Nativewhichwewilluselater,aswellasourGoogleMapsandDataservices(whichwewillcreatelateras 

well). 

We inject all of the services we require in the constructor and set up references to them by adding the 

public keyword, as well as declaring two additional variables, latitude and longitude, which we will use 

to hold the user’s location. Finally, we add the two functions that the buttons in the template call, but we 

will implement their functionality later. 

The weirdest thing here is the use of @ViewChild. You can use this to grab a reference to an element in 

                                                    364 

----------------------- Page 366-----------------------

the template. So if we do this: 

@ViewChild ('map ') mapElement : ElementRef ; 

it will look in the template location.html template for an element that contains #map. If it finds it, it will 

return an ElementRef which is a reference to that element. In this instance we are assigning the result 

of that to mapElement. Later on we will pass this reference through to our Google Maps provider. It will 

beimportanttodothisinsideofthe ionViewDidLoad() method,asthatfunctionwillonlyrunoncethe 

DOM (the elements on our page) have been fully loaded. 

Now let’s move on to the Camp Details page. 

> Modify src/pages/camp-details/camp-details .html to reflect the following: 

<ion-header> 

     <ion-navbar  color="primary"> 

        <ion-title> 

           <img  src="assets/images/logo .png" class="logo" /> 

        </ion-title> 

     </ion-navbar> 

</ion-header> 

<ion-content padding> 

     <ion-card> 

        <ion-card-header> 

           Camp  Details 

        </ion-card-header> 

        <ion-card-content> 

           Update  this  form  with  the  details  of  your  current  camp  so  you  have  an 

               easy  reference  for  later . 

                                                  365 

----------------------- Page 367-----------------------

  </ion-card-content> 

</ion-card> 

<ion-list  no-lines> 

      <ion-item> 

        <ion-label  stacked>Gate  Access  Code</ion-label> 

        <ion-input type="text"></ion-input> 

      </ion-item> 

      <ion-item> 

        <ion-label  stacked>Ammenities  Code</ion-label> 

        <ion-input type="text"></ion-input> 

      </ion-item> 

      <ion-item> 

        <ion-label  stacked>WiFi  Password</ion-label> 

        <ion-input type="text"></ion-input> 

      </ion-item> 

      <ion-item> 

        <ion-label  stacked>Phone  Number</ion-label> 

        <ion-input type="text"></ion-input> 

      </ion-item> 

      <ion-item> 

        <ion-label  stacked>Departure  Date</ion-label> 

        <ion-datetime  displayFormat="DD/MM/YYYY"></ion-datetime> 

      </ion-item> 

                                    366 

----------------------- Page 368-----------------------

              <ion-item> 

                 <ion-label  stacked>Notes</ion-label> 

                 <ion-textarea  type="text"></ion-textarea> 

              </ion-item> 

      </ion-list> 

</ion-content> 

Thefirstthingwedoiscreatethenavbar,butyoualreadyknowhowthatworks. Weusean <ion-card> 

to create a little header area for the page where we can describe what the page is for, but this is purely 

decorational. Then we have a bunch of inputs inside of a list. Rather than using standard HTML like: 

<input type="text" /> 

We instead use <ion-input> which Ionic provides, but it still allows for all the same types (and you will 

alsonoticethelastfieldisactuallya <ion-textarea>). Wesupplythe stacked attributewhichgivesus 

“stacked” labels on our input fields, but there’s a whole bunch of different styles Ionic provides for inputs 

by default. For now we’ve just added labels to the fields, but later on we will come back and add some 

extra stuff so that we can actually grab the values that a user inputs. 

Also notice the use <ion-datetime> here, which is an in-built date and time picker that Ionic provides. 

There’s not going to be much happening yet, but let’s also create the class for this page now. 

> Modify src/pages/camp-details/camp-details .ts to reflect the following: 

import  {  Component  }  from       '@angular/core '; 

import  {  NavController  }  from         'ionic-angular '; 

import  {  FormBuilder , FormGroup , Validators  }  from               '@angular/forms '; 

import  {  Data  }  from      '../../providers/data '; 

                                                    367 

----------------------- Page 369-----------------------

@Component ({ 

   selector :  'page-camp-details ', 

   templateUrl :  'camp-details .html ' 

}) 

export  class  CampDetailsPage  { 

   constructor(public  navCtrl : NavController , public  formBuilder : FormBuilder , 

       public  dataService : Data)  { 

   } 

   saveForm(): void  { 

   } 

} 

The only thing we’re doing here that’s out of the ordinary is importing FormBuilder and Validators from 

Angular 2. Just above I mentioned that we will be editing the inputs we created later to actually do some- 

thing, and this is where Form Builder (and ControlGroup) comes in. Form Builder will allow you to create 

and manage forms, and Validators can be attached to specific fields to ensure a valid value is input (i.e. if 

it needs to be an email address, phone number etc.). We’ll be getting to that a little later though. 

We’ve also added a saveForm function which we will use later to save the values the user enters in the 

form. Now let’s move on to the My Details page, which is almost exactly the same as this one. 

> Modify src/pages/my-details/my-details .html to reflect the following 

<ion-header> 

      <ion-navbar  color="primary"> 

        <ion-title> 

           <img  src  =   "assets/images/logo .png" class="logo" /> 

                                                   368 

----------------------- Page 370-----------------------

       </ion-title> 

     </ion-navbar> 

</ion-header> 

<ion-content padding> 

     <ion-card> 

       <ion-card-header> 

         My  Details 

       </ion-card-header> 

       <ion-card-content> 

         Update  this  form  with  your  details  so  you  have  an  easy  reference  for 

             later . 

       </ion-card-content> 

     </ion-card> 

     <ion-list  no-lines> 

            <ion-item> 

              <ion-label  stacked>Car  Registration</ion-label> 

              <ion-input type="text"></ion-input> 

            </ion-item> 

            <ion-item> 

              <ion-label  stacked>Trailer  Registration</ion-label> 

              <ion-input type="text"></ion-input> 

            </ion-item> 

                                            369 

----------------------- Page 371-----------------------

             <ion-item> 

               <ion-label  stacked>Trailer  Dimensions</ion-label> 

               <ion-input type="text"></ion-input> 

             </ion-item> 

             <ion-item> 

               <ion-label  stacked>Phone  Number</ion-label> 

               <ion-input type="text"></ion-input> 

             </ion-item> 

             <ion-item> 

               <ion-label  stacked>Notes</ion-label> 

               <ion-textarea  type="text"></ion-textarea> 

             </ion-item> 

     </ion-list> 

</ion-content> 

There’snotmuchneedtoexplainthisonebecause,apartfromhavingdifferentinputfields,itisexactlythe 

same as the Camp Details template. Let’s move on to the class. 

> Modify src/pages/my-details/my-details .ts to reflect the following: 

import  {  Component  }  from    '@angular/core '; 

import  {  NavController  }  from     'ionic-angular '; 

import  {  FormBuilder , FormGroup , Validators  }  from        '@angular/forms '; 

import  {  Data  }  from   '../../providers/data '; 

@Component ({ 

                                               370 

----------------------- Page 372-----------------------

   selector :  'page-my-details ', 

   templateUrl :  'my-details .html ' 

}) 

export  class MyDetailsPage  { 

   constructor(public  navCtrl : NavController , public  formBuilder : FormBuilder , 

       public  dataService : Data)  { 

   } 

   saveForm(): void  { 

   } 

} 

Once again, this is exactly the same as the Camp Details page. Sorry for the boring finish, but that’s all 

weneedtofornowforourlayout,inthenextlessonwe’regoingtotakeacloserlookatFormBuilderand 

get our inputs working properly. 

                                                 371 

----------------------- Page 373-----------------------

Lesson 4: User Input and Forms 

In this lesson we’re going to be looking at the functionality of the Camp Details and My Details pages, 

which will involve making our forms functional. If you’ve completed some of the other applications in this 

book, or have tried using inputs in Ionic 2 before, you may have used ngModel like this: 

<ion-input type="text"             [(ngModel)]="myField "></ion-input> 

Thissetsuptwowaydatabindingonthisinputfield,whichIdiscussedinmoredetailinthebasicssection, 

but essentially it ties the value of this input to: 

this .myField 

in the class definition for the page. If you change the value of this .myField it will be reflected in the 

input, and if you change the value of the input it will be reflected in this .myField. This is a pretty easy 

way to go about managing user input, but if you have more large and complex forms it starts to become 

easier to use Form Builder. 

As well as making the code a bit nicer, by using Form Builder each of your inputs will become “controls” 

which provide some more powerful functionality that you can hook into (if you check out the Giflist appli- 

cation you will see that we use a control to subscribe to changes on the input field, which allowed us to 

do all sorts of fancy things). 

We can also make use of Validators with Form Builder, which allow us to tie a “validation” to a specific 

input field, which will check the input to see if it is allowed (e.g. a correctly formatted email address). 

Let’sjumprightintoimplementingitsothatyoucanseehowitworks. We’llgothroughimplementingthis 

functionality on the Camp Details page, and then replicate it on the My Details page. 

> Modify the list in src/pages/camp-details/camp-details .html to reflect the following: 

      <ion-list  no-lines> 

            <form     [formGroup]="campDetailsForm"  (change)="saveForm()"> 

                                                        372 

----------------------- Page 374-----------------------

<ion-item> 

  <ion-label  stacked>Gate  Access  Code</ion-label> 

  <ion-input  formControlName="gateAccessCode" 

      type="text"></ion-input> 

</ion-item> 

<ion-item> 

  <ion-label  stacked>Ammenities  Code</ion-label> 

  <ion-input  formControlName="ammenitiesCode" 

      type="text"></ion-input> 

</ion-item> 

<ion-item> 

  <ion-label  stacked>WiFi  Password</ion-label> 

  <ion-input  formControlName="wifiPassword" type="text"></ion-input> 

</ion-item> 

<ion-item> 

  <ion-label  stacked>Phone  Number</ion-label> 

  <ion-input  formControlName="phoneNumber" type="text"></ion-input> 

</ion-item> 

<ion-item> 

  <ion-label  stacked>Departure  Date</ion-label> 

  <ion-datetime  formControlName="departure" 

      displayFormat="DD/MM/YYYY"></ion-datetime> 

</ion-item> 

<ion-item> 

  <ion-label  stacked>Notes</ion-label> 

                              373 

----------------------- Page 375-----------------------

                 <ion-textarea  formControlName="notes" type="text"></ion-textarea> 

              </ion-item> 

           </form> 

      </ion-list> 

Our inputs are mostly the same except for a couple of important differences. First, we have wrapped the 

whole thing in a form tag: 

<form    [formGroup]="campDetailsForm"  (change)="saveForm()"> 

We define the formGroup property as campDetailsForm which we will use with the Form Builder very 

shortly. We also listen for the (change) event and trigger the saveForm function when it is detected, 

this means that the saveForm function will trigger every time a user changes and switches away from a 

specific input, but it won’t trigger after every single character they type (although we could do that if we 

wantedto). Usuallyonaformyouwouldinsteadlistenforthe (submit) eventandhandlethedatathen, 

but we don’t want the user to have to hit a ‘Save’ button or anything like that, we want it to just save as 

soon as they enter a new value. 

The other important thing we have changed is that we have added formControlName to each of our 

inputs,givingitaname(similartowhatwewoulddowithngModel). Again,wewillusethiswiththeForm 

Builder in just a moment. 

Now we’re going to take a look at the class definition. First, we are going to modify the constructor: 

>Modifytheconstructorin src/pages/camp-details/camp-details .ts toreflectthefollow- 

ing: 

   campDetailsForm : FormGroup ; 

   constructor(public  navCtrl : NavController , public  formBuilder : FormBuilder , 

       public  dataService : Data)  { 

                                                    374 

----------------------- Page 376-----------------------

      this .campDetailsForm  =  formBuilder .group ({ 

        gateAccessCode :  [''], 

        ammenitiesCode :  [''], 

        wifiPassword :  [''], 

        phoneNumber :  [''], 

        departure :  [''], 

        notes :  [''] 

      }); 

   } 

Since we defined the formGroup as campDetailsForm in the template, we can assign a new Form 

Builder group to it here. To create the group, we supply all of the formControlName names we added to 

the inputs. Notice that we also supply an array that contains an empty string, this is used to initialse the 

value of the input, for example: 

gateAccessCode :  ['54321 '] 

would set the gateAccessCode input value to ‘54321’. You can also supply a validator here if you like, 

by doing something like this: 

gateAccessCode :  ['', Validators .required] 

this will make the gateAccessCode field a required field. That’s all there is to setting up our form, now we 

just need to implement the saveForm function. 

>Modifythe saveForm functionin src/pages/camp-details/camp-details .ts toreflectthe 

following: 

   saveForm(): void  { 

      let  data  =  this .campDetailsForm .value ; 

      //this.dataService.setCampDetails (data); 

                                                    375 

----------------------- Page 377-----------------------

   } 

NOTE:Wehavecommentedoutthecalltothedataservicesincewehaven’timplementedityet,otherwise 

it will cause TypeScript to throw errors at us. 

We can grab all the values from our form at any time by using this .campDetailsForm .value. This 

will return an object that contains all of the values, which is exactly how we would eventually like to store 

them. Sowepassthisobjectofvaluesthroughtoourdataservicetosave(whichwehaven’timplemented 

yet of course). 

Remember, the saveForm function gets triggered every time the user makes a change to any input field, 

so whenever they make a change we read the values and send them off for saving. 

Now we just need to reflect this functionality in our My Details page. Again, it’s pretty much exactly the 

same so I’ll just paste the code below rather than explaining it step by step. 

> Modify src/pages/my-details/my-details .html to reflect the following: 

<ion-header> 

      <ion-navbar  color="primary"> 

        <ion-title> 

           <img  src  =   "assets/images/logo .png" class="logo" /> 

        </ion-title> 

      </ion-navbar> 

</ion-header> 

<ion-content padding> 

      <ion-card> 

        <ion-card-header> 

           My  Details 

        </ion-card-header> 

                                                   376 

----------------------- Page 378-----------------------

  <ion-card-content> 

     Update  this  form  with  your  details  so  you  have  an  easy  reference  for 

         later . 

  </ion-card-content> 

</ion-card> 

<ion-list  no-lines> 

     <form  [formGroup]="myDetailsForm "  (change)="saveForm()"> 

       <ion-item> 

         <ion-label  stacked>Car  Registration</ion-label> 

         <ion-input  formControlName="carRegistration" 

             type="text"></ion-input> 

       </ion-item> 

       <ion-item> 

         <ion-label  stacked>Trailer  Registration</ion-label> 

         <ion-input  formControlName="trailerRegistration" 

             type="text"></ion-input> 

       </ion-item> 

       <ion-item> 

         <ion-label  stacked>Trailer  Dimensions</ion-label> 

         <ion-input  formControlName="trailerDimensions" 

             type="text"></ion-input> 

       </ion-item> 

                                       377 

----------------------- Page 379-----------------------

            <ion-item> 

              <ion-label  stacked>Phone  Number</ion-label> 

              <ion-input  formControlName="phoneNumber" type="text"></ion-input> 

            </ion-item> 

            <ion-item> 

              <ion-label  stacked>Notes</ion-label> 

              <ion-textarea  formControlName="notes" type="text"></ion-textarea> 

            </ion-item> 

         </form> 

     </ion-list> 

</ion-content> 

> Modify the constructor in src/pages/my-details/my-details .ts to reflect the following: 

  myDetailsForm : FormGroup ; 

  constructor(public  navCtrl : NavController , public  formBuilder : FormBuilder , 

      public  dataService : Data)  { 

     this .myDetailsForm  =  formBuilder .group ({ 

       carRegistration :  [''], 

       trailerRegistration :  [''], 

       trailerDimensions :  [''], 

       phoneNumber :  [''], 

       notes :  [''] 

     }); 

                                            378 

----------------------- Page 380-----------------------

   } 

> Modify the saveForm function in src/pages/my-details/my-details .ts to reflect the fol- 

lowing: 

   saveForm(): void  { 

     let  data  =  this .myDetailsForm .value ; 

     //this.dataService.setMyDetails (data); 

   } 

Forms aren’t exactly the most exciting thing in the world (well, for most people at least), but they are a 

criticalcomponentofmanymobileapplicationssoit’simportanttounderstandhowtheywork. Beingable 

to use Form Builder can make your forms a lot more manageable and powerful, but sometimes a simple 

   ngModel)] is enough to do the job as well. 
 [( 

Inthenextlessonwe’llbejumpingintosomethingalittlemorefun,andquiteabitmorecomplicated,when 

we implement Google Maps! 

                                                   379 

----------------------- Page 381-----------------------

Lesson 5: Implementing Google Maps and Geolocation 

Google Maps and mobile apps are a perfect match. The Google Maps API is an awesome piece of tech 

by itself, but when you couple it with a device that is meant to be mobile, as in not stationary, it opens up 

a wide range of possibilities. There’s a ton of cool apps out there today that utilise Google Maps to do all 

kinds of things. 

Even if maps aren’t the core feature of your application, they are often quite useful as supplementary 

features as well (displaying the location of a business on a map for example). 

In this lesson we will be implementing Google Maps on our Location page. Essentially what we want to 

do is: 

     • Display a map 

     • Allow the user to set their current location on the map 

     • Display a marker at their last set location 

     • Enable the user to launch directions to take them back to their set location 

Getting the Google Maps SDK set up in an application, and even using it, is pretty easy. You simply load 

the Google Maps SDK script and then start interacting with the API. It get’s a bit more complicated than 

that though because of one main problem: 

What if the user does not have an Internet connection? 

It’s not unreasonable to make the maps unavailable if the user does not have an Internet connection, 

but how do we handle that gracefully? We don’t want an error occurring and breaking the application 

(because the Google Maps SDK hasn’t been loaded) or otherwise causing the maps not to work, so we 

need to consider the following: 

     • What if the user does not have an Internet connection? 

     • What if the user does not have an Internet connection initially but does later? 

     • What if the user does have an Internet connection initially but doesn’t later? 

To handle all of these scenarios, the solution we want to implement will: 

                                                       380 

----------------------- Page 382-----------------------

     • WaituntilaconnectionisavailablebeforeloadingtheGoogleMapsSDK,ratherthanstraightaway 

     • If the connection becomes unavailable, disable the Google Maps functionality 

     • If the connection becomes available again, enable the Google Maps functionality 

TomakeourcodealittlebitcleanerwearegoingtoabstractalotofthisfunctionalityintotheGoogleMaps 

providerwegeneratedearlier. Thiswillalsomakeiteasiertoreusethesamecodeinanotherapplications 

as well. 

NOTE: We will be using the Google Maps JavaScript SDK in this lesson, but you should also be aware 

that you can use their native SDK as well through this Cordova plugin: https://github.com/mapsplugin/ 

cordova-plugin-googlemaps 

This lesson is going to be pretty big so let’s jump right into it. We’re going to start off by implementing a 

Connectivity service, which is the other provider we generated earlier. 

Connectivity Service 

This is going to be a quick and simple little service that will allow us to easily check if the user has an 

Internet connection or not. If they are on a device we will be able to make use of the network information 

pluginweinstalledearlier(whichismoreaccurate),butiftheappisjustrunningthroughanormalbrowser 

then we use the onLine property to check for an Internet connection (which is less accurate). 

> Modify src/providers/connectivity .ts to reflect the following: 

import  {  Injectable  }  from         '@angular/core '; 

import  {  Network  }  from        'ionic-native '; 

import  {  Platform  }  from        'ionic-angular '; 

declare  var  Connection ; 

@Injectable () 

export  class  Connectivity  { 

                                                      381 

----------------------- Page 383-----------------------

   onDevice : boolean ; 

   constructor(public  platform : Platform){ 

     this .onDevice  =  this .platform .is('cordova '); 

   } 

   isOnline(): boolean  { 

      if(this .onDevice  &&  Network .connection){ 

        return  Network .connection        !== Connection .NONE ; 

      }  else  { 

        return  navigator .onLine ; 

      } 

   } 

   isOffline(): boolean  { 

      if(this .onDevice  &&  Network .connection){ 

        return  Network .connection  ===  Connection .NONE ; 

      }  else  { 

        return    !navigator .onLine ; 

      } 

   } 

} 

Thisserviceisreasonablystraightforward. Wecreatea onDevice variablethatuses Platform tocheck 

if the application is running on a device. We then use that onDevice variable to see if we should check 

for navigator .connection .type which makes use of the network information plugin, or just check 

the navigator .onLine property. 

We’vedefinedtwofunctions isOnline and isOffline sowewillbeabletocallthesefromotherclasses 

that import this service. Technically you could just define one of these functions (if isOnline returns false 

                                                  382 

----------------------- Page 384-----------------------

then we know they are offline obviously), but I think it’s nice to have the option to be able to use either of 

the two. 

That’s all there is to this service, so let’s move on to the Google Maps service. 

Google Maps Service 

This service is going to hold most of the logic for our maps functionality. It’s a pretty big service so we’ll 

create a bit of a skeleton first and then implement it function by function. 

> Modify src/providers/google-maps .ts to reflect the following: 

import  {  Injectable  }  from        '@angular/core '; 

import  {  Connectivity  }  from         './connectivity '; 

import  {  Geolocation  }  from        'ionic-native '; 

declare  var  google ; 

@Injectable () 

export  class  GoogleMaps  { 

   mapElement : any ; 

   pleaseConnect : any ; 

   map : any ; 

   mapInitialised : boolean  =  false ; 

   mapLoaded : any ; 

   mapLoadedObserver : any ; 

   currentMarker : any ; 

   apiKey : string; 

   constructor(public  connectivityService : Connectivity)  { 

                                                    383 

----------------------- Page 385-----------------------

} 

init(mapElement : any , pleaseConnect : any):  Promise<any>  { 

} 

loadGoogleMaps(): Promise<any>  { 

} 

initMap(): Promise<any>  { 

} 

disableMap (): void  { 

} 

enableMap(): void  { 

} 

addConnectivityListeners (): void  { 

} 

changeMarker(lat : number , lng : number): void  { 

} 

                                       384 

----------------------- Page 386-----------------------

} 

Noticethatwe’veimportedtheConnectivityservicewejustcreatedandaddeditasaproviderinthedeco- 

rator. Wealsoimportthe Geolocation pluginfrom IonicNative. Wealsoadded declare  var  google 

just after the imports - this is so that the TypeScript compiler leaves us alone. Since we’re dynamically 

loadingtheGoogleMapsSDKthecompilerdoesn’tknowwhat google isandwillthrowerrorsatusifwe 

don’t declare the variable. 

You will notice that a few of these functions return Promises. This is because we want to keep track of 

when the map finishes loading, and each of these functions will form a chain (one calls the next), so we 

can essentially daisy chain promises back to the inital call, where we can set up a handler to do what we 

want when the map is loaded. 

Finally we have a bunch of functions that we have created, let’s go through implementing these one by 

one. 

> Modify the init function to reflect the following: 

   init(mapElement : any , pleaseConnect : any):  Promise<any>  { 

      this .mapElement  =  mapElement ; 

      this .pleaseConnect  =  pleaseConnect ; 

      return  this .loadGoogleMaps(); 

   } 

We will be able to call this init function to trigger the map loading process from wherever we import 

theservice. Wesimplyreturnthe loadGoogleMaps function,thiswillexecutethefunctionandreturnits 

result (which will be a Promise). 

Since we will call this function from location.ts we are able to pass in the references to the map and 

                                                     385 

----------------------- Page 387-----------------------

pleaseConnect elements that we retrieved earlier with @ViewChild. We accept those as parameters 

here and them up as member variables so we can access them from anywhere within the class. 

Now let’s implement the loadGoogleMaps function. 

> Modify the loadGoogleMaps function to reflect the following: 

   loadGoogleMaps(): Promise<any>  { 

     return  new  Promise ((resolve)  =>  { 

        if(typeof  google  ==    "undefined"    || typeof  google .maps  ==     "undefined"){ 

          console .log("Google  maps  JavaScript needs  to  be  loaded ."); 

          this .disableMap (); 

          if(this .connectivityService .isOnline()){ 

             window ['mapInit ']  =  ()  =>  { 

               this .initMap().then (()  =>  { 

                  resolve (true); 

               }); 

               this .enableMap(); 

             } 

             let  script  =  document .createElement("script"); 

             script .id  =  "googleMaps"; 

             if(this .apiKey){ 

               script .src  =   'http ://maps .google .com/maps/api/js?key= ' + 

                                                386 

----------------------- Page 388-----------------------

                    this .apiKey  +   '&callback=mapInit '; 

             }  else  { 

                script .src  = 

                    'http ://maps .google .com/maps/api/js?callback=mapInit '; 

             } 

             document .body .appendChild (script); 

          } 

        } 

        else  { 

          if(this .connectivityService .isOnline()){ 

             this .initMap(); 

             this .enableMap(); 

          } 

          else  { 

             this .disableMap (); 

          } 

        } 

        this .addConnectivityListeners (); 

     }); 

   } 

This function looks a bit more complicated, but it’s reasonably straightforward. First we check if Google 

Maps is loaded by checking for the existence of google and google .maps which would be available if 

                                                387 

----------------------- Page 389-----------------------

the SDK had already been loaded. 

If the SDK has not been loaded yet, we trigger the loading process. Since the SDK hasn’t loaded yet, we 

first call the disableMap function, which will indicate to the user that the map is not available. Then we 

checkiftheuserisonlineusingourconnectivityservice,andiftheyareweinjecttheGoogleMapsSDKby 

addinga script elementtotheapplication. Noticethatthereisa &callback=mapInit parameterinthe 

URLstring. ThisallowsustotriggerafunctioninourapplicationoncetheGoogleMapsSDKhasfinished 

loading,andinourcasewecallthe initMap and enableMap functionsoncetheloadhasfinished(which 

we will implement shortly). Notice that we set up another Promise so that we can wait for initMap to 

finish before returning. 

If the SDK has already been loaded then we check if the user is online. If they are online we initialise and 

enable the map, and if they aren’t online we disable the map. 

The last line in this function calls the addConnectivityListeners function which we will also imple- 

ment soon. This will listen for online and offline events so that we know when to enable and disable the 

map, and also when to try loading the SDK again if the user was initially offline when they opened the 

application. 

Now onto the next function. 

> Modify the initMap function to reflect the following: 

   initMap(): Promise<any>  { 

      this .mapInitialised  =  true ; 

      return  new  Promise ((resolve)  =>  { 

        Geolocation .getCurrentPosition ().then ((position)  =>  { 

           let  latLng  =  new  google .maps .LatLng (position .coords .latitude, 

                position .coords .longitude); 

                                                    388 

----------------------- Page 390-----------------------

           let mapOptions  =  { 

              center : latLng, 

              zoom :  15, 

              mapTypeId : google .maps .MapTypeId .ROADMAP 

           } 

           this .map  =  new  google .maps .Map (this .mapElement , mapOptions); 

           resolve (true); 

        }); 

      }); 

   } 

The Google Maps SDK is loaded now, and this function will handle setting up a new map using the SDK. 

Wewanttocenterthemapattheuser’scurrentlocation,sowefirstmakeacallto getCurrentPosition 

functionoftheGeolocationplugin. Oncethepromisethisreturnsresolvesitwillpassthrougha position 

object which will contain the user’s current latitude and longitude. We use these values, along with some 

additional settings (zoom level and the map type) to create a new map instance. 

The map will be created inside of the element that we passed the reference in for (#map). So after this 

code runs, the Google Map will be added to our Location pages template. 

Atthispointourmapisreadytobeinteractedwith,soweresolvethefinalpromiseinourchainofpromises, 

this will trigger all of the promises to resolve, and now we know that the map is ready. 

Although we’ve got the map loading now, there’s still a few more functions we need to create. 

> Modify the disableMap and enableMap functions to reflect the following: 

   disableMap (): void  { 

                                                    389 

----------------------- Page 391-----------------------

      if(this .pleaseConnect){ 

        this .pleaseConnect .style .display  =         "block"; 

      } 

   } 

   enableMap(): void  { 

      if(this .pleaseConnect){ 

        this .pleaseConnect .style .display  =         "none"; 

      } 

   } 

What we want to do here is show and hide an overlay on the Google Maps section so that when the user 

is not connected to the Internet they will not be able to use the maps, and a message that says “Please 

connect to the Internet…” will display. The code above handles hiding and showing an element that will 

display a message when the user gains or loses their Internet connection. 

We will need to style the element so that it will overlay the map. 

> Modify src/pages/location/location .scss to reflect the following: 

page-location  { 

   #please-connect  { 

     position : absolute ; 

     background-color :  #000; 

     opacity :  0.5; 

     width :  100%; 

     height :  100%; 

                                                  390 

----------------------- Page 392-----------------------

     z-index :  1; 

   } 

   #please-connect p  { 

        color :  #fff ; 

        font-weight : bold ; 

        text-align : center; 

        position : relative ; 

        font-size :  1.6em ; 

        top :  30%; 

   } 

} 

Now when the user does not have a connection, you should see a screen like this: 

                                                 391 

----------------------- Page 393-----------------------

We still need to finish up a few things before we reach that point though.  Next up we have the 

addConnectivityListeners function. 

                                              392 

----------------------- Page 394-----------------------

>Modifythe addConnectivityListeners functionin src/providers/google-maps .ts tore- 

flect the following: 

   addConnectivityListeners (): void  { 

     document .addEventListener ('online ',  ()  =>  { 

        console .log("online"); 

        setTimeout(()  =>  { 

          if(typeof  google  ==     "undefined"    || typeof  google .maps  ==    "undefined"){ 

             this .loadGoogleMaps(); 

          } 

          else  { 

             if(!this .mapInitialised){ 

               this .initMap(); 

             } 

             this .enableMap(); 

          } 

        },  2000); 

     },  false); 

     document .addEventListener ('offline ',  ()  =>  { 

        console .log("offline"); 

        this .disableMap (); 

                                                393 

----------------------- Page 395-----------------------

      },  false); 

   } 

AsImentioned,thisfunctionwillhandlewhattodowhentheuser’sconnectionstatusswitchesfromonline 

to offline or vice versa. We’re listening for both the ‘online’ and ‘offline’ events here, which trigger when 

the user goes online or offline. 

WhentheusercomesonlinewecheckifGoogleMapshasalreadybeenloaded,andifithasn’tweloadit. 

Otherwise we check if the map has already been initialised and initialise it if it hasn’t and then we enable 

the map. Notice that we use a setTimeout here which will cause this code to run 2 seconds after the 

usercomesonline-inthepastI’vehadtroublewithtriggeringthiscodeinstantly,soIgivetheconnection 

a little bit of time to “settle” first. 

When the user goes offline, all we do is disable the map. The last function we have to implement is the 

changeMarker function. 

> Modify the changeMarker function to reflect the following: 

   changeMarker(lat : number , lng : number): void  { 

      let  latLng  =  new  google .maps .LatLng (lat, lng); 

      let marker  =  new  google .maps .Marker ({ 

        map : this .map , 

         animation : google .maps .Animation .DROP , 

        position : latLng 

      }); 

      if(this .currentMarker){ 

        this .currentMarker .setMap(null); 

                                                     394 

----------------------- Page 396-----------------------

      } 

      this .currentMarker  =  marker ; 

   } 

All the other functions have been pretty generic and could be used in just about every implementation of 

Google Maps you use in your applications, but this one is specific to this application. Rather than having 

an addMarker function, this function will add a marker and remove the previous marker. We only ever 

want the user to have one camp location set so this makes sense in this case. 

All we do is pass in the latitude and longitude of where we want to add a marker and then create a new 

marker using those values. If there is an existing marker then we remove it first and then set the current 

marker to be the one we just added. 

Now that we have our Google Maps service completely set up, we just have to use it! 

Implementing Google Maps 

We’ve done quite a bit of work to get maps working already, but we still have a little way to go. Now we 

are going to modify our Location page class definition to make use of the Google Maps service. We’ve 

already imported the service, added it to the providers array and created a reference to it so we can just 

start using it right away. 

> Modify ionViewDidLoad in src/pages/location/location .ts to reflect the following: 

   ionViewDidLoad(): void  { 

      this .maps .init(this .mapElement .nativeElement , 

          this .pleaseConnect .nativeElement).then (()  =>  { 

         //this.maps .changeMarker(this.latitude,  this.longitude); 

      }); 

                                                      395 

----------------------- Page 397-----------------------

   } 

First we trigger the map loading process by calling this .maps .init which returns a promise. That 

promise will resolve when the map has finished loading, and when it does we call the changeMarker 

function. 

Thiswon’tworkjustyetbecausethelatitudeandlongitudevalueswillbeundefined,soI’vecommentedit 

out. Later though, we will be loading the latitude and longitude values that are saved in memory. 

The map should be loaded and visible on the screen at this point, but it won’t display correctly just yet. 

First, you will need to add a couple of styles to your .scss file to display it properly. 

> Modify location .scss to reflect the following: 

page-location  { 

   #please-connect  { 

      position : absolute ; 

      background-color :  #000; 

      opacity :  0.5; 

      width :  100%; 

      height :  100%; 

      z-index :  1; 

   } 

   #please-connect p  { 

        color :  #fff ; 

        font-weight : bold ; 

        text-align : center; 

        position : relative ; 

        font-size :  1.6em ; 

                                                    396 

----------------------- Page 398-----------------------

        top :  30%; 

   } 

   .scroll  { 

        height :  100%; 

   } 

   #map  { 

        width :  100%; 

        height :  100%; 

   } 

} 

Next we are going to implement the setLocation function, which will set the user’s camp location to 

their current location. 

>Modifythe setLocation functionin src/pages/location/location .ts toreflectthefollow- 

ing: 

   setLocation(): void  { 

     Geolocation .getCurrentPosition ().then ((position)  =>  { 

        this .latitude  =  position .coords .latitude ; 

        this .longitude  =  position .coords .longitude; 

        this .maps .changeMarker(position .coords .latitude, 

             position .coords .longitude); 

        let  data  =  { 

                                                   397 

----------------------- Page 399-----------------------

           latitude : this .latitude, 

           longitude : this .longitude 

        }; 

        //this.dataService.setLocation (data); 

        let  alert  =  this .alertCtrl .create({ 

           title :  'Location  set !', 

           subTitle :  'You  can now  find  your  way  back  to  your  camp  site  from 

                anywhere  by  clicking  the  button  in  the  top  right  corner .', 

           buttons :  [{text :  'Ok '}] 

        }); 

        alert .present (); 

      }); 

   } 

NOTE: Onceagain,wehavecommentedoutthecalltothenotyetimplementeddataserviceinthiscode 

Onceagain,weareusingtheGeolocationplugintograbtheuser’scurrentposition. Oncewegetthatwe 

change the this .latitude and this .longitude values to the user’s current location, and we also 

call the changeMarker function with that position. We want this location to be remembered when the 

user opens the application again so we create a data object for the position and send it off to our data 

service to be saved (remember, we haven’t actually implemented that yet). 

Once this process is complete, we trigger an alert to let the user know that their location was succesfully 

set and what that means. Now we just have one more function to define: 

>Modifythe takeMeHome functionin src/pages/location/location .ts toreflectthefollow- 

ing: 

                                                    398 

----------------------- Page 400-----------------------

   takeMeHome (): void  { 

     if(!this .latitude     ||  !this .longitude){ 

        let  alert  =  this .alertCtrl .create({ 

          title :  'Nowhere  to  go !', 

          subTitle :  'You  need  to  set  your  camp  location  first . For  now , want  to 

              launch  Maps  to  find  your  own  way  home? ', 

          buttons :  ['Ok '] 

        }); 

        alert .present (); 

     } 

     else  { 

        let  destination  =  this .latitude  +    ',' +  this .longitude; 

        if(this .platform .is('ios ')){ 

          window .open('maps ://?q= ' +  destination ,  '_system '); 

        }  else  { 

          let  label  =  encodeURI('My  Campsite '); 

          window .open('geo :0,0?q= ' +  destination  +      '(' +  label  +  ') ', 

               '_system '); 

        } 

     } 

   } 

Thegoalofthisfunctionistoshowtheuserdirectionsfromtheircurrentlocationtotheircampsiteslocation. 

                                               399 

----------------------- Page 401-----------------------

First we check that the this .latitude and this .longitude values are set, and if they are not we 

simply display an alert letting the user know they need to set their location first. 

IftheydoexistthenweusetheGoogleMapsandAppleMapsURLschemestolaunchthemapsapplication 

with directions to the coordinates we supply. If we are running on iOS then we launch Apple Maps using 

the maps :// scheme, and if we are running on Android then we launch Google Maps using the geo : 

scheme. Now when the user triggers this function, a map should pop up with directions back to their 

marked camp site. 

That’s it! We’ve finished our maps functionality. A user should now be able to view the map, set their 

location, and trigger directions back to their camp site. We still need to take care of one more important 

thing and that’s saving the data so that it is available when the user comes back to the application. We 

will be handling that, as well as saving the data from the forms, in the next lesson. 

                                                     400 

----------------------- Page 402-----------------------

Lesson 6: Saving and Retrieving Data 

Ifyou’vebeenthroughsomeoftheotherapplications,thenyouwillbeprettyfamiliarwithcreatingaData 

service. This one is a little different though because in the other applications we were only ever storing 

one set of data, but in this application we are going to have to save: 

     • Camp Coordinates 

     • Camp Details 

     • My Details 

Theideaisstillmoreorlessthesame,butit’sgoingtolookalittledifferent. Wealreadyhaveourformsand 

ourmapspagesendingdata toourDataservicesowe justneedtohandlesavingit,andwealsoneed to 

makeafewmodificationstoloadthatdatabackinagain. Let’sstartoutbyimplementingtheDataservice. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Storage  }  from      '@ionic/storage '; 

import  {  Injectable  }  from       '@angular/core '; 

@Injectable () 

export  class Data  { 

      constructor(public  storage : Storage){ 

      } 

      setMyDetails(data : Object): void  { 

           let  newData  =  JSON .stringify(data); 

           this .storage .set('mydetails ', newData); 

      } 

      setCampDetails(data : Object): void  { 

                                                  401 

----------------------- Page 403-----------------------

           let  newData  =  JSON .stringify(data); 

           this .storage .set('campdetails ', newData); 

     } 

     setLocation(data : Object): void  { 

           let  newData  =  JSON .stringify(data); 

           this .storage .set('location ', newData); 

     } 

     getMyDetails (): Promise<any>  { 

           return  this .storage .get ('mydetails '); 

     } 

     getCampDetails (): Promise<any>  { 

           return  this .storage .get ('campdetails '); 

     } 

     getLocation (): Promise<any>  { 

           return  this .storage .get ('location '); 

     } 

} 

Storage is Ionic’s generic storage service, and it handles storing data in the best way possible whilst 

providing a consistent API for us to use. 

Whenrunningonadevice,andiftheSQLitepluginisavailable(whichweinstalledearlier),itwillstoredata 

usinganativeSQLitedatabase. SincetheSQLitedatabasewillonlybeavailablewhenrunningnativelyon 

adevice, Storage willalsouse IndexedDB,WebSQL,orstandardbrowser localStorage iftheSQLite 

database is not available. 

                                                  402 

----------------------- Page 404-----------------------

It’sbesttouseSQLitewherepossible,becausethebrowserbasedlocalstorageisnotcompletelyreliable 

andcanpotentiallybewipedbythe operating system. Havingyourdatawipedrandomlyisobviouslynot 

ideal. 

In other applications we would usually just have two functions, one for getting data and one for saving 

data. Inthisapplicationthoughwearesettingthreedifferentsetsofdata,sowecreatethree set functions 

and three get functions. The set functions take in the data we pass it and store it (after converting it to a 

JSON string), and then the get functions will retrieve those values from the database. The get functions 

will return a promise which resolves with the data, rather than the data directly, so we will need to set up 

a handler for that when we use it. 

Now that we have our Data service setup, we justneed to load in the data thatis saved when we reopen 

the application. So now we are going to make changes to the Location, My Details and Camp Details 

pages as they all have some data they need loaded in. 

We’ll start off with the location page. 

> Modify ionViewDidLoad in src/pages/location/location .ts to reflect the following: 

   ionViewDidLoad(): void  { 

      this .platform .ready ().then (()  =>  { 

         this .dataService .getLocation ().then ((location)  =>  { 

            let  savedLocation : any  =  false ; 

            if(location  &&  typeof (location)  !=  "undefined"){ 

               savedLocation  =  JSON .parse (location); 

            } 

            let mapLoaded  =  this .maps .init(this .mapElement .nativeElement , 

                 this .pleaseConnect .nativeElement).then (()  =>  { 

                                                       403 

----------------------- Page 405-----------------------

             if(savedLocation){ 

                this .latitude  =  savedLocation .latitude ; 

                this .longitude  =  savedLocation .longitude ; 

                this .maps .changeMarker(this .latitude, this .longitude); 

             } 

           }); 

        }); 

     }); 

   } 

Whatwe’redoinghereisfirstgrabbingtheuser’slocationfrommemory,andthentriggeringthemapload. 

Iftherewasalocationstoredinmemorythenwesetthe this .latitude and this .longitude values 

to be those values, and we supply them to the changeMarker function call which will be triggered once 

the map has finished loading. If there is no stored location values we just load the map. 

Next let’s take care of loading in the form data for our Camp Details page. 

> Modify src/pages/camp-details/camp-details .ts to reflect the following: 

import  {  Component  }  from      '@angular/core '; 

import  {  NavController , Platform  }  from         'ionic-angular '; 

import  {  FormBuilder , FormGroup , Validators  }  from           '@angular/forms '; 

import  {  Data  }  from    '../../providers/data '; 

                                                  404 

----------------------- Page 406-----------------------

@Component ({ 

  selector :  'page-camp-details ', 

  templateUrl :  'camp-details .html ' 

}) 

export  class  CampDetailsPage  { 

  campDetailsForm : FormGroup ; 

  constructor(public  navCtrl : NavController , public  platform : Platform , 

      public  formBuilder : FormBuilder , public  dataService : Data)  { 

     this .campDetailsForm  =  formBuilder .group ({ 

       gateAccessCode :  [''], 

       ammenitiesCode :  [''], 

       wifiPassword :  [''], 

       phoneNumber :  [''], 

       departure :  [''], 

       notes :  [''] 

     }); 

  } 

  ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

       this .dataService .getCampDetails ().then ((details)  =>  { 

         let  savedDetails : any  =  false ; 

                                            405 

----------------------- Page 407-----------------------

          if(details  &&  typeof (details)  !=  "undefined"){ 

             savedDetails  =  JSON .parse (details); 

          } 

          let  formControls : any  =  this .campDetailsForm .controls; 

          if(savedDetails){ 

             formControls .gateAccessCode .setValue(savedDetails .gateAccessCode); 

             formControls .ammenitiesCode .setValue(savedDetails .ammenitiesCode); 

             formControls .wifiPassword .setValue(savedDetails .wifiPassword); 

             formControls .phoneNumber .setValue(savedDetails .phoneNumber); 

             formControls .departure .setValue(savedDetails .departure); 

             formControls .notes .setValue(savedDetails .notes); 

          } 

        }); 

     }); 

   } 

   saveForm(): void  { 

     let  data  =  this .campDetailsForm .value ; 

     this .dataService .setCampDetails(data); 

   } 

} 

You can see we’ve added in another call to retrieve some data from the data service here and then we’re 

doing some stuff with it. Remember before how I said you an supply an initial value when creating your 

                                                406 

----------------------- Page 408-----------------------

group with Form Builder, i.e: 

gateAccessCode :  ['value  here '] 

you might expect that you could just load in the data and then build your form using the saved values 

as the initial values. Unfortunately, it doesn’t quite work like this. The data being retrieved from mem- 

ory is asynchronous, so although the data is retrieved very quickly there is some wait time involved. 

The Form Builder group needs to be created instantly, otherwise you will receive errors.  So instead 

we create the Form Builder group right away, and then we grab a reference to the forms controls us- 

ing this .campDetailsForm .controls. We can then access the setValue method on each of the 

controls we created to set the value to the saved value. 

Now we just need to do the same for the My Details page. 

> Modify src/pages/my-details/my-details .ts to reflect the following: 

import  {  Component  }  from       '@angular/core '; 

import  {  NavController , Platform  }  from            'ionic-angular '; 

import  {  FormBuilder , FormGroup , Validators  }  from               '@angular/forms '; 

import  {  Data  }  from     '../../providers/data '; 

@Component ({ 

   selector :  'page-my-details ', 

   templateUrl :  'my-details .html ' 

}) 

export  class MyDetailsPage  { 

   myDetailsForm : FormGroup ; 

   constructor(public  nav : NavController , public  platform : Platform , public 

       formBuilder : FormBuilder , public  dataService : Data)  { 

      this .myDetailsForm  =  formBuilder .group ({ 

                                                    407 

----------------------- Page 409-----------------------

     carRegistration :  [''], 

     trailerRegistration :  [''], 

     trailerDimensions :  [''], 

     phoneNumber :  [''], 

     notes :  [''] 

  }); 

} 

ionViewDidLoad()  { 

  this .platform .ready ().then (()  =>  { 

     this .dataService .getMyDetails ().then ((details)  =>  { 

       let  savedDetails : any  =  false ; 

       if(details  &&  typeof (details)  !=  "undefined"){ 

         savedDetails  =  JSON .parse (details); 

       } 

       let  formControls : any  =  this .myDetailsForm .controls; 

       if(savedDetails){ 

         formControls .carRegistration .setValue(savedDetails .carRegistration); 

         formControls .trailerRegistration .setValue(savedDetails .trailerRegistration); 

         formControls .trailerDimensions .setValue(savedDetails .trailerDimensions); 

         formControls .phoneNumber .setValue(savedDetails .phoneNumber); 

         formControls .notes .setValue(savedDetails .notes); 

       } 

                                          408 

----------------------- Page 410-----------------------

        }); 

     }); 

   } 

   saveForm(): void  { 

     let  data  =  this .myDetailsForm .value ; 

     this .dataService .setMyDetails(data); 

   } 

} 

We’veuncommentedthecallstothedataserviceinboththeCampDetailsandMyDetailsclassesabove, 

but we also need to uncomment it in the Location class as well. 

>Modifythe setLocation ()functionin src/pages/location/location .ts toreflectthefol- 

lowing: 

   setLocation(): void  { 

     Geolocation .getCurrentPosition ().then ((position)  =>  { 

        this .latitude  =  position .coords .latitude ; 

        this .longitude  =  position .coords .longitude; 

        this .maps .changeMarker(position .coords .latitude, 

            position .coords .longitude); 

        let  data  =  { 

           latitude : this .latitude, 

                                                 409 

----------------------- Page 411-----------------------

           longitude : this .longitude 

        }; 

        this .dataService .setLocation(data); 

        let  alert  =  this .alertCtrl .create({ 

           title :  'Location  set !', 

           subTitle :  'You  can now  find  your  way  back  to  your  camp  site  from 

               anywhere  by  clicking  the  button  in  the  top  right  corner .', 

           buttons :  [{text :  'Ok '}] 

        }); 

        alert .present (); 

      }); 

   } 

andthat’sit! Anydatathatisenteredintheapplicationshouldremaintherewhentheapplicationisreloaded 

now. 

We’regettingprettyclosetofinishingthisapplication,weobviouslystillneedtoaddsomestyling(although 

itlooksprettygroovyalready),butinthenextlessonwe’regoingtobeaddingonemorelittlebonusfeature 

to this application. 

                                                   410 

----------------------- Page 412-----------------------

Lesson 7: Reusing Components 

I heard you like apps, so I’m going to put an app in your app. Up until this point our application has only 

had three tabs, but we’re about to add a whole new tab now. It just so happens that the first application 

in this book, QuickLists, would be a perfect companion to this application. Checklists can come in very 

handy when you’re going camping. 

What we’re going to do in this lesson is essentially “drag and drop” the functionality from Quick Lists into 

this application. Given the modular nature of Ionic 2 & Angular 2, it’s pretty easy to do. If you’ve already 

createdtheQuickListsapplicationyoucancopythecodefromthere,butifnotyoucanjustcopythecode 

from the source code that came in your download package. 

It’s not going to be quite as easy as “dragging and dropping”, there will be a few conflicts we run into but 

it is pretty straightforward. Let’s start out by copying over the files we need. 

> Copy the models folder from QuickLists into the src folder in CamperMate 

> Copy the checklist page folder from QuickLists into the pages folder in CamperMate 

Thosetwoareeasyenough,butnowwerunintoabitoftrouble. Wealsowanttocopyoverthe HomePage 

from QuickLists, but we already have a HomePage in CamperMate, so we’re going to make a bit of a 

modification. 

> Create a new folder called quicklistshome inside of the pages folder in CamperMate 

> Copy the contents of the home folder from QuickLists (home.ts, home.html, home.scss) into the 

quicklistshome folder you just created 

>Renamehome .ts,home .html andhome .scssto quicklistshome .ts, quicklistshome .html 

and quicklistshome .scss 

Hopefullythatmadesense,theendresultisthatyouwillnowhavealsocopiedoverthe home pagefolder 

from QuickLists, but everything will be called quicklistshome instead of just home so that we don’t run 

into any trouble with our existing home page. If all of that was a little confusing, just check the folder 

                                                     411 

----------------------- Page 413-----------------------

structure in the example source code that came with this book. 

Since we’ve made some changes to the file names, we’re also going to have to edit the code a little bit 

too. We’ll have to change the class name of the QuickLists Home Page we just copied over to reflect its 

new name, and we’ll also have to change where it gets its template from: 

> Make the following modifications to src/pages/quicklistshome/quicklistshome .ts: 

import  {  Component  }  from      '@angular/core '; 

import  {  NavController , AlertController , Platform  }  from             'ionic-angular '; 

import  {  ChecklistPage  }  from       '../checklist/checklist '; 

import  {  ChecklistModel  }  from       '../../models/checklist-model '; 

import  {  Keyboard  }  from     'ionic-native '; 

import  {  Data  }  from    '../../providers/data '; 

@Component ({ 

   selector :  'page-quicklistshome ', 

   templateUrl :  'quicklistshome .html ' 

}) 

export  class  QuickListsHomePage  { 

   checklists : ChecklistModel []  =  []; 

   local : Storage ; 

   constructor(public  nav : NavController , public  platform : Platform , public 

       dataService : Data , public  alertCtrl : AlertController)  { 

   } 

   ionViewDidLoad(){ 

     this .platform .ready ().then (()  =>  { 

                                                  412 

----------------------- Page 414-----------------------

    this .dataService .getData ().then ((checklists)  =>  { 

       let  savedChecklists : any  =  false ; 

       if(checklists  &&  typeof (checklists)  !=  "undefined"){ 

         savedChecklists  =  JSON .parse (checklists); 

       } 

       if(savedChecklists){ 

         savedChecklists .forEach ((savedChecklist)  =>  { 

           let  loadChecklist  =  new  ChecklistModel (savedChecklist .title , 

               savedChecklist .items); 

           this .checklists .push (loadChecklist); 

           loadChecklist .checklist .subscribe(update  =>  { 

              this .save(); 

           }); 

         }); 

       } 

     }); 

  }); 

} 

                                         413 

----------------------- Page 415-----------------------

Notice that both the class name and the templateUrl have changed. There’s one important thing we ne- 

glected to copy over and that is the Data service from the QuickLists application. This is because we 

already have one for the CamperMate application, so instead of using a whole new data provider we are 

just going to modify our existing one. 

> Add the following two functions to src/providers/data .ts 

   getData (): Promise<any>  { 

      return  this .storage .get ('checklists '); 

   } 

   save(data : any): void  { 

      let  saveData  =  []; 

      //Remove  observables 

      data .forEach ((checklist)  =>  { 

        saveData .push ({ 

           title : checklist .title , 

           items : checklist .items 

        }); 

      }); 

      let  newData  =  JSON .stringify(saveData); 

      this .storage .set('checklists ', newData); 

   } 

These two functions have a bit of a different naming style than the rest of the functions in data.ts but 

keeping it this way saves us from having to make more code changes to the QuickLists functionality so 

we’ll keep it that way. 

                                                    414 

----------------------- Page 416-----------------------

There isn’t going to be much we need to in terms of styling, but our QuickLists application is using the 

secondary colour on its navbars, but CamperMate uses primary so we will need to change that. 

> Modify the navbar in src/pages/checklist/checklist .html to reflect the following: 

<ion-navbar  color="primary"> 

> Modify the navbar in src/pages/quicklistshome/quicklistshome .html to reflect the fol- 

lowing: 

<ion-navbar  color="primary"> 

> Modify src/pages/quicklistshome/quicklistshome .scss to reflect the following: 

page-quicklistshome  { 

   ion-item-sliding  { 

     margin :  5px ; 

   } 

   .home-item  { 

        font-size :  1.2em ; 

        font-weight : bold ; 

        color :  #282828; 

        padding-top :  10px ; 

        padding-bottom :  10px ; 

   } 

   .secondary-detail  { 

     display : block ; 

      color :  #cecece; 

     font-weight :  400; 

     margin-top :  10px ; 

                                                  415 

----------------------- Page 417-----------------------

   } 

} 

button  { 

   border : none    !important; 

} 

Withthat,wehavealloftheQuickListsfunctionalityweneedreadytouseinourCamperMateapplication. 

All we have to do now is add the tab for it. 

> Modify src/pages/home/home .html to include a fourth tab: 

<ion-tabs> 

   <ion-tab  [root]="tab1Root" tabTitle="Location" tabIcon="navigate"></ion-tab> 

   <ion-tab  [root]="tab2Root" tabTitle="My  Details" tabIcon="person"></ion-tab> 

   <ion-tab  [root]="tab3Root" tabTitle="Camp  Details" 

       tabIcon="bookmarks"></ion-tab> 

   <ion-tab  [root]="tab4Root" tabTitle="Checklists" 

       tabIcon="checkbox"></ion-tab> 

</ion-tabs> 

This will use tab4Root as the tab which we will of course also have to define in our class definition. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from     '@angular/core '; 

import  {  LocationPage  }  from     '../location/location '; 

import  {  MyDetailsPage  }  from      '../my-details/my-details '; 

import  {  CampDetailsPage  }  from      '../camp-details/camp-details '; 

import  {  QuickListsHomePage  }  from       '../quicklistshome/quicklistshome '; 

@Component ({ 

                                                416 

----------------------- Page 418-----------------------

   selector :  'page-home ', 

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   tab1Root : any  =  LocationPage ; 

   tab2Root : any  =  MyDetailsPage ; 

   tab3Root : any  =  CampDetailsPage ; 

   tab4Root : any  =  QuickListsHomePage ; 

   constructor(){ 

   } 

} 

You will also need to add these new pages to app.module.ts. 

> Modify src/app/app .module .ts to reflect the following: 

import  {  NgModule  }  from    '@angular/core '; 

import  {  IonicApp, IonicModule  }  from        'ionic-angular '; 

import  {  MyApp  }  from    './app .component '; 

import  {  Storage  }  from    '@ionic/storage '; 

import  {  HomePage  }  from    '../pages/home/home '; 

import  {  LocationPage  }  from     '../pages/location/location '; 

import  {  MyDetailsPage  }  from      '../pages/my-details/my-details '; 

import  {  CampDetailsPage  }  from      '../pages/camp-details/camp-details '; 

import  {  QuickListsHomePage  }  from       '../pages/quicklistshome/quicklistshome '; 

import  {  ChecklistPage  }  from      '../pages/checklist/checklist '; 

import  {  GoogleMaps  }  from     '../providers/google-maps '; 

                                                417 

----------------------- Page 419-----------------------

import  {  Connectivity  }  from  '../providers/connectivity '; 

import  {  Data  }  from '../providers/data '; 

@NgModule ({ 

  declarations :  [ 

     MyApp , 

     HomePage , 

     LocationPage , 

     MyDetailsPage , 

     CampDetailsPage , 

     QuickListsHomePage, 

     ChecklistPage 

  ], 

  imports :  [ 

     IonicModule .forRoot (MyApp) 

  ], 

  bootstrap :  [IonicApp], 

  entryComponents :  [ 

     MyApp , 

     HomePage , 

     LocationPage , 

     MyDetailsPage , 

     CampDetailsPage , 

     QuickListsHomePage, 

     ChecklistPage 

  ], 

  providers :  [Storage , Data , GoogleMaps , Connectivity] 

}) 

export  class  AppModule  {} 

                                           418 

----------------------- Page 420-----------------------

Now if you load up your application you should see a whole new tab: 

As you can see, it’s pretty easy to reuse code you’ve created for other application with this modular style 

projectstructure,anditwouldbeeveneasierifweweren’tusingcomponentswiththesamenamelikewe 

                                                     419 

----------------------- Page 421-----------------------

did here. 

Ourapplicationislookingprettygoodalready,butwe’regoingtoapplyafewmorestylesinthenextlesson 

to finish things off and get it looking great. 

                                                     420 

----------------------- Page 422-----------------------

Lesson 8: Styling 

Thisapplicationisprettystockstandard,sothere’snotgoingtobetoomuchcustomisationgoingonhere 

and this lesson is going to be super quick. But we do want to add a few little final touches. 

Let’s start by modifying our colour variables. 

> Modify the Named  Color  Variables in theme/variables .scss to reflect the following: 

$colors :  ( 

   primary :       #5b91da , 

   secondary :     #32db64 , 

   danger :        #f53d3d , 

   light :         #f4f4f4 , 

   dark :          #222, 

   favorite :      #69BB7B 

); 

and then we just want to apply some general styles to our whole application. 

> Add the following styles to src/app/app .scss: 

 .logo  { 

     max-height :  39px ; 

     margin-top :  6px ; 

} 

ion-input, ion-textarea  { 

     background-color :  #F3F3F3 ; 

     border :  1px  solid  #cecece; 

     padding-left :  10px ; 

} 

                                                  421 

----------------------- Page 423-----------------------

ion-textarea  { 

      height :  200px ; 

} 

textarea  { 

      height :  180px ; 

} 

button  { 

      border : none     !important; 

} 

The main thing we are tring to achieve here is to add a bit of styling to our input fields. Before doing this, 

the input fields were white and so was the background, so you couldn’t even see where the input fields 

were. Now they will have a grey background colour and a bit of extra styling. We’ve also added a bit 

of styling to the textarea to expand its default height, and to also workaround a bug that exists currently 

where the textarea doesn’t grow with the users input. 

The application should now look like this: 

                                                     422 

----------------------- Page 424-----------------------

       423 

----------------------- Page 425-----------------------

Thisisthesinglesmallestlessonintheentiretyofthisbook,but,we’redone! TheCamperMateapplication 

is now completely finished. 

                                                 424 

----------------------- Page 426-----------------------

Conclusion 

Congratulations on making it through the Camper Mate tutorial. We’ve learned a lot through developing 

this application, but the main take aways are: 

     • Creating forms and capturing user data 

     • Implementing Google Maps and creating a custom provider to handle that 

     • Creating a tabs layout 

     • Saving and retrieving multiple sets of data 

     • Reusing components from another application 

There’s always room to take things further though, especially when you’re trying to learn something. Fol- 

lowing tutorials is great, but it’s even better when you figure something out for yourself. Hopefully you 

have enough background knowledge now to start trying to extend the functionality of the application by 

yourself, here’s a few ideas to try out: 

     • Use Validators on the Phone Number and Date input fields to ensure valid data is input [MEDIUM] 

     • Uselocalnotifications(seetheSnapadayapplicationforhelp)tonotifytheuserthedaybeforetheir 

       departure date [HARD] 

     • Addafieldto‘CampDetails’thatallowstheusertotakeaphotoanddisplayitthere(seeSnapaday 

       applicaiton for help) [HARD] 

Remember, the Ionic 2 documentation is your best friend when trying to figure things out. 

What next? 

You have a completed application now, but that’s not the end of the story. You also need to get it running 

on a real device and submitted to app stores, which is no easy task. The final sections in this book will 

walk through how to take what you have done here, and get it onto the app stores so make sure to give 

that a read. 

                                                      425 

----------------------- Page 427-----------------------

Chapter 7 

Camper Chat 

                              426 

----------------------- Page 428-----------------------

Lesson 1: Introduction 

Thisoneisthebigone,the“piècederésistance”,the“crèmedelacrème”,it’sthelastapplicationwewill 

be building and I think it fits the bill. As with all the other applications in this book, there is no need to 

completetheotherapplicationsbeforedoingthisoneaseverythingwillstillbeexpalined,evenifthesame 

thing has been explained in other applications, but the complexity is cranked up a notch in this one and I 

won’tbespendingaslongonthebasics. So,ifyou’renotthatcomfortablewithIonic2yetyoumightfind 

one of the other applications easier to start on. 

InthissectionwewillbebuildingCamperChat,whichwillessentiallybealivechatapplication. Userswill 

beabletologinwiththeirFacebookaccountandchatallthingscaravanandcampingwithanybodyelse 

who is using the application. The coolest thing about this application is the integration with PouchDB for 

storing local data, and Cloudant for syncing that PouchDB data to a remote backend. This means that 

thedatacanbeavailabletouserswhentheyareoffline,andwhentheycomebackonlineagainthelatest 

updates will be fetched from the remote backend. 

To give you a more precise definition, the exact features of the application will be: 

     • Users can log in with a Facebook account to use the application 

     • Users can leave messages that all other users can see and respond to (in real time) 

     • The users Facebook display picture and name will be used in the application 

     • Users can log out 

     • Users can view an ‘About’ page. 

Given these requirements, we will be learning a bunch of different things including: 

     • Navigation 

     • Using a Sliding Menu 

     • Using PouchDB to store local data 

     • Using Cloudant to store remote data 

     • Using the Facebook API for authentication and other features 

     • Updating and displaying data in real time 

                                                     427 

----------------------- Page 429-----------------------

and here’s some screenshots to help you get an idea of what the application will look like: 

                                                     428 

----------------------- Page 430-----------------------

       429 

----------------------- Page 431-----------------------

Lesson Structure 

1. Getting Ready 

2. Login Page and Sliding Menu Layout 

3. Using Facebook for Authentication 

4. Creating and Displaying Messages & Navigation 

5. Creating a Local and Remote Backend with PouchDB and Cloudant 

6. Styling 

Ready? 

Now that you know what you’re in for, let’s get to building it! 

                                                     430 

----------------------- Page 432-----------------------

Lesson 2: Getting Ready 

In this lesson we are going to prepare our application for the journey ahead. We are going to of course 

generate the application, and we are also going to set up all of the components and Cordova plugins we 

will need. At the end of this first lesson we should have a nice skeleton application set up with everything 

we need to start diving into coding. 

A good rule of thumb before starting any new application is to make sure you have the latest version of 

Ionic and Cordova, so if you haven’t done it recently then make sure to run: 

npm   install  -g     ionic  cordova 

or 

sudo  npm    install  -g     ionic  cordova 

beforeyoucontinue. IfyourunintoanytroubleinstallingIonicorgeneratingnewprojects,makesurethat 

you have a recent Node version installed. After you have that installed, you should also run the following 

commands: 

npm  uninstall  -g       ionic npm    cache  clean 

before attempting to install again. 

Generate a new application 

We will be using the blank starter template for this application which, as the name implies, is basically 

an empty Ionic project. It comes with one page built in called home which we will repurpose in the next 

lesson. 

> Run the following command to generate a new application 

ionic  start  camperchat  blank  --v2 

                                                     431 

----------------------- Page 433-----------------------

> Make the new project your current working directory by running the following command: 

cd  camperchat 

Your project should now be generated - now you can open up the project folder in your favourite editor. 

You can take a look at how your application looks by running the following command: 

ionic  serve 

which for now should look something like this: 

                                                   432 

----------------------- Page 434-----------------------

       433 

----------------------- Page 435-----------------------

Create the Required Components 

This application is going to have a few different pages, we are going to be using a login page, the main 

home page and an about page. The home page has already been generated for us, so we will just need 

to create the login page and the about page. 

> Run the following command to generate a Login page: 

ionic  g  page  Login 

> Run the following command to generate an About page: 

ionic  g  page  About 

Create the Required Services 

As well as our pages, we are also going to create a data service which will handle storing and retrieving 

our message data, as well as storing a few values that we will grab from the Facebook API. 

> Run the following command to generate a Data provider: 

ionic  g  provider  Data 

Add Pages & Services to the App Module 

In order to use these pages and services throughout our application, we need to add them to our 

app.module.ts file. All of the pages we created need to be added to both the declarations array and 

the entryComponents array, all of the providers we create need to be added to the providers array, 

and any custom components or pipes only need to be added to the declarations array. Our model is 

just a simple class we willimport wherever we need, there is no need to set it up anywhere in the module. 

> Modify src/app/app.module.ts to reflect the following 

                                                   434 

----------------------- Page 436-----------------------

import  {  NgModule  }  from '@angular/core '; 

import  {  IonicApp, IonicModule  }  from   'ionic-angular '; 

import  {  MyApp  }  from './app .component '; 

import  {  HomePage  }  from '../pages/home/home '; 

import  {  LoginPage  }  from  '../pages/login/login '; 

import  {  AboutPage  }  from  '../pages/about/about '; 

import  {  Data  }  from '../providers/data '; 

@NgModule ({ 

  declarations :  [ 

     MyApp , 

     HomePage , 

     LoginPage , 

     AboutPage 

  ], 

  imports :  [ 

     IonicModule .forRoot (MyApp) 

  ], 

  bootstrap :  [IonicApp], 

  entryComponents :  [ 

     MyApp , 

     HomePage , 

     LoginPage , 

     AboutPage 

  ], 

  providers :  [Data] 

}) 

export  class  AppModule  {} 

                                            435 

----------------------- Page 437-----------------------

Add Required Platforms 

Before you can build for certain platforms, you need to add them to your project. This is something we 

will be doing way later on in this course, but you may as well just set them up now. 

> Run the following command to add the iOS platform to your application 

ionic  platform  add  ios 

> Run the following command to add the Android platform to your application 

ionic  platform  add  android 

Install PouchDB 

Since we will be using PouchDB in this project, we first need to install it. You can do that in a similiar way 

to how you install Ionic Native, simply run the following install command: 

npm   install  pouchdb  --save 

Wewillalsoneedtoinstall“typings”forPouchDBsothattheTypeScriptcompilerdoesn’tcomplain(since 

it doesn’t know what PouchDB is). 

> Run the following command to install types for PouchDB 

npm  install  @types/pouchdb  --save  --save-exact 

Add Required Cordova Plugins 

This application will use a few different Cordova plugins. Remember, Cordova plugins can only be used 

when running on a real device. I’ll explain each plugin as we run through the commands for adding them. 

> Run the following command to add the SQLite plugin: 

                                                     436 

----------------------- Page 438-----------------------

ionic  plugin  add  cordova-sqlite-storage 

ThisplugingivesyouaccesstonativestoragewithanSQLitedatabase. Weareaddingittothisapplication 

because the Ionic local storage service can make use of this plugin to provide more stable data storage. 

> Run the following command to add the In App Browser plugin: 

ionic  plugin  add  cordova-plugin-inappbrowser 

This plugin makes a webview available to us that we can launch external websites in. We will be using 

this plugin in this application as it is a dependency of the Facebook plugin we will be using. Adding the 

Facebook plugin itself actually requires a bit more work than just running a simple command, so we will 

be doing that later. 

> Run the following command to add the Status Bar plugin: 

ionic  plugin  add  cordova-plugin-statusbar 

Wewillbeaddingthisplugintoallprojectstogiveuscontroloverthestatusbarinourapplication(thebar 

at the top of the devices screen that contains the time, battery information and so on). 

> Run the following command to add the Splash Screen plugin: 

ionic  plugin  add  cordova-plugin-splashscreen 

This plugin allows us to control the splash screen (the fullscreen graphic that briefly displays when you 

open an app) 

> Run the following command to add the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

This plugin is required for all applications, and helps to define what resources should be allowed to be 

loaded in your application. Without it, resources you try to load will fail. 

As well as adding the plugin, you also need to define a “Content Security Policy” in your index.html 

file. We will be adding a very permissive policy which will essentially allow us to load any resources. 

                                                      437 

----------------------- Page 439-----------------------

Depending on your application, you may look into providing a more strict policy, but an open policy is 

good for development. 

> Modify your src/index .html file to include the following meta tag: 

<meta  http-equiv= "Content-Security-Policy" content="font-src                      'self ' data :; 

     img-src  *  data :; default-src  gap ://ready  file ://* *;  script-src                 'self ' 

     'unsafe-inline '  'unsafe-eval ' *          ; style-src      'self '  'unsafe-inline ' *"> 

> Run the following command to add the Crosswalk plugin: 

ionic  plugin  add  cordova-plugin-crosswalk-webview 

This is another plugin that we will add to every application, but you may decide you want to leave it out. 

By adding this plugin, when you build for Android “Crosswalk” will be used. Android has a lot of issues, 

especiallywitholderdevices,becausethereissomanydifferentsoftwareversionsoutthereanddifferent 

versions have different browsers (remember, since we are building HTML5 applications it is actually a 

browserenginepoweringandrunningourapplication). WhatCrosswalkdoesisbundleamodernbrowser 

into your application so no matter what device you are running on your app will be powered by the same 

browser, and the Crosswalk browser can improve performance a lot. 

The only real downside to this is that it increases the size of your application by a significant amount. In 

general,Ithinkit’sworthitandI’drecommendyouincludeitbutyoumayleaveitoutifyoulike. Formore 

information take a look at the Crosswalk Project website: https://crosswalk-project.org/ 

Set up Images 

Whenbuildingthisapplicationwearegoingtobemakinguseofafewimages. I’veincludedtheseinyour 

download pack but you will need to set them up in the application you generate. 

> Copy the images folder in the download pack for this application from src/assets to your own 

src/assets folder 

                                                    438 

----------------------- Page 440-----------------------

Summary 

That’s it! We’re all set up and ready to go, now we can start working on the interesting stuff. 

                                                 439 

----------------------- Page 441-----------------------

Lesson 3: Login Page and Sliding Menu Layout 

We’re going to implementing a really common page flow in this application, and that’s a log in page that 

leadstothemainapplication. Inprettymuchanyapplicationthatrequiresuserstobeauthenticated,there 

isgoingtobesomeauthenticationscreenshownfirst,andonlyoncetheusersuccessfullylogsinwillthey 

be able to access the main application. 

In our case we are going to have a login page that will have a login with Facebook button, which will then 

lead to a page with a sliding menu layout. Our login page is pretty simple (for now at least) so let’s get 

started by building that. 

> Modify src/pages/login/login .html to reflect the following: 

<ion-content padding> 

     <ion-row> 

           <ion-col> 

                <img  src="assets/images/logo .png" /> 

           </ion-col> 

     </ion-row> 

     <ion-row> 

           <ion-col> 

                <p>Camper  Chat  allows  you  to  talk  to  other  <strong>caravaners, 

                    RV 'ers , roadtrippers  and  campers</strong>  near  you . Use 

                    Camper  Chat  to  give  and  receive  tips , ask  for  help  with  your 

                    flat  tyre , or  just  have  a  friendly  chat .</p> 

                <p>Log  in with  <strong>Facebook</strong>  below  to  get  started .</p> 

           </ion-col> 

     </ion-row> 

                                                  440 

----------------------- Page 442-----------------------

      <ion-row> 

           <ion-col> 

                 <a   (click)="login()"><img  src="assets/images/facebook-button .png" 

                      /></a> 

           </ion-col> 

      </ion-row> 

</ion-content> 

This defines the template for our login page, and if this isn’t the first application you’ve built with Ionic 2 

(and hopefully it isn’t) then you might notice we’ve left the navbar out of the template. We have no need 

to display a title and we don’t need to display a back button for navigation or anything like that, so it’s 

perfectly fine to just leave it out. 

We’re not doing anything too crazy here, but we are using Ionic’s grid system, which consists of columns 

and rows, to set up our layout. When using the grid system with <ion-row> and <ion-col> rows get 

placedunderneathoneanother,andcolswithinthoserowsappearsidebyside. Thisdiagramshouldhelp 

illustrate how that works: 

                                                     441 

----------------------- Page 443-----------------------

This is a very simple example because we are just using the grid to display three sections underneath 

eachother,butyoucanalsoincludemultiplecolumnswithinrowsandevendefinehowwidetheyarelike 

this: 

<ion-row> 

      <ion-col width-10></ion-col> 

      <ion-col width-50></ion-col> 

</ion-row> 

We’ve also attached a (click) handler to a Facebook login button image. Eventually we will have this 

login function trigger the authentication with Facebook, but for now we are just going to have it trigger 

a page change to the main page so that we can finish setting up our layout. Let’s set up the class for this 

component now so that we can set up this page transition. 

> Modify src/pages/login/login .ts to reflect the following: 

                                                      442 

----------------------- Page 444-----------------------

import  {  Component  }  from '@angular/core '; 

import  {  Platform , NavController , MenuController , AlertController  }  from 

    'ionic-angular '; 

import  {  Facebook  }  from 'ionic-native '; 

import  {  HomePage  }  from '../home/home '; 

import  {  Data  }  from '../../providers/data '; 

@Component ({ 

  selector :  'page-login ', 

  templateUrl :  'login .html ' 

}) 

export  class  LoginPage  { 

  constructor(public  nav : NavController , public  platform : Platform , public 

      menu : MenuController , public  dataService : Data , public  alertCtrl : 

      AlertController)  { 

     this .menu .enable (false); 

  } 

  login(): void  { 

     this .getProfile (); 

  } 

  getProfile (): void  { 

     this .menu .enable (true); 

     this .nav .setRoot(HomePage); 

  } 

} 

                                           443 

----------------------- Page 445-----------------------

As you can see in the code above, we’ve injected and set up our NavController and we’re using it to set 

the rootPage to be the HomePage when the login function is called. This code is being run through 

the getProfile () function because later we will be grabbing some information about the user from 

Facebook after they have authenticated, but before we send them to the next page, but since we haven’t 

implemented that yet we just want the code to flow right through to the success scenario. 

The MenuController is used to programmatically interact with the sliding menu we will be adding to the 

application. We will discuss that in more detail in a moment, but we don’t want the menu to be used on 

theloginpagesoweusethe enable functiononthemenutodisableitforthispage. Whenweswitchto 

our Home Page we enable it again. 

We’vealsoimportedtheFacebookpluginfromIonicNativewhichwewilluselater. Rememberthattouse 

aaCordovapluginyoudonotneedtoimportanything,notevenfortheFacebookplugin,butifyouwant 

to use it through Ionic Native then you will need to import it. 

Wewantthisloginpagetodisplayfirst,butifyoutakealookattherootcomponentin app.component.ts 

you will see that the home page is currently being set as the root page: 

rootPage : any  =  HomePage ; 

So of course we want to change that. 

> Modify src/app/app .component .ts to reflect the following: 

import  {  Component , ViewChild  }  from            "@angular/core"; 

import  {  Facebook  }  from        'ionic-native '; 

import  {  Nav , Platform , MenuController  }  from               'ionic-angular '; 

import  {  StatusBar  }  from        'ionic-native '; 

import  {  HomePage  }  from        '../pages/home/home '; 

import  {  AboutPage  }  from        '../pages/about/about '; 

import  {  LoginPage  }  from        '../pages/login/login '; 

import  {  Data  }  from      '../providers/data '; 

@Component ({ 

                                                      444 

----------------------- Page 446-----------------------

  templateUrl :  'app .html ' 

}) 

export  class MyApp  { 

  @ViewChild (Nav) nav : Nav ; 

  rootPage : any  =  LoginPage ; 

  homePage : any  =  HomePage ; 

  aboutPage : any  =  AboutPage ; 

  constructor(public  platform : Platform , public  dataService : Data , public 

      menu : MenuController)  { 

     platform .ready ().then (()  =>  { 

     }); 

  } 

  openPage(page): void  { 

  } 

  logout(): void  { 

  } 

} 

AsyoucanseewehavesettherootpagetobetheLoginPageandofcourseweneedtoimporttheLogin 

                                           445 

----------------------- Page 447-----------------------

Pageaswell. We’vealsodonequiteabitmorethanthatthough. We’reimportingandsettingupreferences 

toourDataprovider,whichwewilluseforsavingandaccessingdatalater,theMenuController,whichwill 

allow us to interact with the sliding menu we are creating. Also notice the use of @ViewChild here, this 

allows us to grab a direct reference to our Nav component (the <ion-nav> that we will be adding in the 

nextstep). This is necessary because you can’t use the NavController inside of the root component, but 

we need to be able to change the rootPage from here later so we instead grab the Nav directly. 

We have set up a couple of functions here that we will finish defining later. The openPage function will 

handle switching between different selections from the sliding menu (which will be tied to the homePage 

and aboutPage variableswehavesetuphere),andthe logout functionwillhandleloggingtheuserout 

of the application. We’ve imported Facebook from Ionic Native so that the logout function can interact 

with the Facebook API. 

Alsonoticethatweareusinga templateUrl inthedecoratorwhichlinkstoan app.html file. Alotofthe 

timewedon’tworryaboutcreatingaseparatetemplatefilefortherootcomponentbecauseitissosimple 

(usually just the nav). Since we are using a sliding menu we are going to be defining the template for the 

menu in it’s own app.html file, since it is going to be a bit bulkier than usual. Let’s create that now. 

> Create a file called app .html inside of your app folder and add the following code: 

<ion-menu      [content]="content"> 

   <ion-content> 

      <ion-list  no-lines> 

         <button  ion-item  (click)="openPage(homePage)"> 

           <ion-icon  name="chatbubbles"></ion-icon>  Chat 

         </button> 

         <button  ion-item  (click)="openPage(aboutPage)"> 

           <ion-icon  name="information-circle"></ion-icon>  About 

         </button> 

         <button  ion-item  (click)="logout()"> 

           <ion-icon  name="power"></ion-icon>  Logout 

                                                     446 

----------------------- Page 448-----------------------

        </button> 

      </ion-list> 

   </ion-content> 

</ion-menu> 

<ion-nav  id="nav" #content          [root]="rootPage"></ion-nav> 

There’ssomereallyinterestingstuffgoingonhere. Thispartofthecodeabovewilllikelylookprettyfamiliar 

to you: 

<ion-nav  id="nav" #content          [root]="rootPage"></ion-nav> 

Exceptforonebit,andthat’s #content. The # syntaxisusedtodefinelocalvariablesinthetemplate,so 

what we are doing here is assigning the <ion-nav> component to the local variable content. We then 

use that variable in our <ion-menu> to set its content property: 

<ion-menu     [content]="content"> 

So what we’re doing here is essentially telling the menu what content it should attach itself to, which in 

thiscaseisourentireapplication. Everythingelseinsideof <ion-menu> isjustthecontentthatthemenu 

will contain, and all we’re doing is creating a list of buttons that will serve as tabs for the user to click on. 

Each of these tabs will call the functions that we created in our root component. 

The final piece of this layout puzzle is to create the home page, let’s start off by defining the template. 

> Modify src/pages/home/home .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="primary"> 

      <button  ion-button  icon-only  menuToggle> 

        <ion-icon  name="menu "></ion-icon> 

      </button> 

      <ion-title> 

        <img  src  =   "assets/images/logo .png" class="logo" /> 

                                                   447 

----------------------- Page 449-----------------------

    </ion-title> 

  </ion-navbar> 

</ion-header> 

<ion-content  class="home" #chat  id="chat"> 

  <ion-list  no-lines> 

    <ion-item> 

       <ion-avatar  item-left> 

         <img  src=""> 

       </ion-avatar> 

       <h2>Name  here</h2> 

       <p>message  here</p> 

    </ion-item> 

  </ion-list> 

</ion-content> 

<ion-footer> 

  <ion-toolbar> 

         <ion-input  [(ngModel)]="chatMessage" type="text" placeholder= "enter 

            message ..."></ion-input> 

         <button  ion-button  icon-only  (click)="sendMessage()" 

            style="position :absolute ; right : 0;  top : 0;  margin : 0;"><ion-icon 

            name="chatbubbles"></ion-icon></button> 

  </ion-toolbar> 

</ion-footer> 

                                         448 

----------------------- Page 450-----------------------

Wehaveournavbaraddedbackinthistemplateandwe’veaddedabuttonwitha menuToggle attribute 

which will add a button to allow the user toggle the menu on and off (the menu can also be opened and 

closed by swiping, which is why we needed to disable it on the login page even though we didn’t add a 

menu button). 

Noticethatwehavecreatedalocalvariableusing“#chat”whichisthe <ion-content>,thisisbecause 

we are going to need to grab a reference to it later using @ViewChild just as I mentioned we would be 

doing for the navigation component. 

Insideofthecontentareawecreatealistwithjustasingle <ion-item> fornow(laterwewilluse *ngFor 

todisplayalloftheavailablemessages),andwe’realsousing <ion-avatar> whichallowsustoattacha 

nicelystyledpicturetotheitem. Eventuallywewillalsoaddthenameoftheuserwhopostedthemessage, 

and their message here as well. 

We’realsousingan <ion-toolbar> whichisprettymuchthesameasthenavbarminusallthenavigation 

magic. It’s a bar that we can add a title, buttons or whatever else we want to it, and in this case we are 

aligning it to the bottom of the screen instead of the top. This allows us to have an area for our message 

input which will stay stuck at the bottom of the screen even as the list scrolls. 

Insideofthetoolbarwe’veaddedaninputfieldwhichishastwowaydatabindingsetupon chatMessage 

byusing [(ngModel)]. Thismeansthatwhenthisvaluechanges,thevaluefor this .chatMessage in 

home.ts (which we are about to create) will also be updated (and vice versa). Then we just add a button 

which will eventually send the message that is entered, and we’ve added a bit of inline styling to make it 

float to the right side of the toolbar. 

Now let’s create the class definition for our home.ts file. 

> Modify src/pages/home/home .ts to reflect the following: 

import  {  Component  }  from         '@angular/core '; 

import  {  Data  }  from       '../../providers/data '; 

@Component ({ 

   selector :  'page-home ', 

                                                       449 

----------------------- Page 451-----------------------

   templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

   chatMessage : string  =      ''; 

   messages : any  =  []; 

   constructor(public  dataService : Data){ 

   } 

   sendMessage(): void  { 

   } 

} 

Pretty simple stuff here, we’re importing and injecting our data service again.          We set up the 

this .chatMessage variable that our input field from the template links to and we also define an 

empty array of messages which will eventually contain the messages to be displayed on screen. 

If you run your application using: 

ionic  serve 

you should have two pages now that looks like this: 

                                                  450 

----------------------- Page 452-----------------------

       451 

----------------------- Page 453-----------------------

Asisusuallythecase,itlooksprettyuglyrightnowbutthebasicstructureforthelayoutweneedisthere. 

We have a login page with a login option, which leads to the main page with a sliding menu. 

                                                   452 

----------------------- Page 454-----------------------

In the next lesson we’re going to start integrating the Facebook API so that we can have users logging in 

forreal(whichwillalsoprovideussomejuicydatatouseintheapplicationliketheusersnameandprofile 

picture). 

                                                         453 

----------------------- Page 455-----------------------

Lesson 4: Using Facebook for Authentication 

Inthislessonwe’llbeintegratingtheFacebookpluginfromIonicNativewhichwillallowustoauthenticate 

users in our application, and it will also allow us to do a few other things like grabbing the users profile 

information. There’s a ton more you can do with the Facebook API that I won’t be covering though, so 

make sure to check out the documentation. 

UsingsocialauthenticationliketheFacebookAPIprovideshasalotofadvantages. Itsavesusfromhaving 

tocreateourownbackendwithanauthenticationsystem(whichwouldinvolvecreatingadatabase,storing 

user credentials securely, handling password resets and so on), it saves the user from having to create 

another new account to use the application (they can just log in with one tap), and it provides a bunch of 

useful data and integrations. This isn’t to say that social login is always the best authentication method, 

but it certainly has its advantages. 

Let’s walk through how to set up the Facebook plugin and then we can look at integrating into our appli- 

cation. 

IMPORTANT: TheFacebookconnectpluginwillonlyworkwhenrunningonarealmobiledevice,ifyoutry 

to run it through your desktop browser you will just receive errors. Instead of testing by running ionic 

serve,youshouldinsteaduse ionic  run            ios or ionic  run  android. Ifyouareunsurehowtoget 

an application on your device, make sure to read the Testing and Debugging section of this book 

Setting up a Facebook App 

AsImentionedinthepreviouslesson,thispluginisalittletrickierthanjustrunningthenormalplugininstall 

command. We are going to need to supply the plugin with an App Name and an App ID when we install 

it. To do that, we need to create an application on Facebook’s developers platform, so let’s walk through 

doing that. 

Firstyouwillneedtogotodevelopers.facebook.com andsignupifyouhaven’talready. Onceyou’vedone 

that you should see a screen like this: 

                                                     454 

----------------------- Page 456-----------------------

Click on My Apps and then Add a New App. Select the iOS platform, and then on the next page just 

clickthe Skip and Create App ID button in the top right corner. Fillin a Display Name (thename ofyour 

application, which for now we will assume is CamperChat) and choose a category. Then click Create 

App ID. 

                                                  455 

----------------------- Page 457-----------------------

Now you should find yourself on a screen like this: 

                                                  456 

----------------------- Page 458-----------------------

and you may notice a field there with an App ID, make note of that because we will be using it shortly. 

We’vestillgotabitmoresettinguptodofirstthough. Clickonthe Settings tabontheleft,onthisscreen 

we are going to add the platforms we are using which will be iOS and Android. 

We can add the iOS platform now, but the Android platform requires a “key hash” before it will allow you 

to save it. So we are going to leave that for now, but make sure to come back and add it later because 

your Android version will not work without it. We will be covering how to create a keystore file and a key 

hash for Android in the build chapters later on, so if you do want to do it right now feel free to skip ahead 

to the Signing Android Applications section. 

Click the Add Platform button and choose iOS. You will need to add a Bundle ID which should be in the 

format of com .yourname .yourproject or com .yourcompany .yourproject or something similar. 

You should also make sure to switch Single Sign On to ‘Yes’. 

                                                     457 

----------------------- Page 459-----------------------

You’ll need to make sure the Bundle ID you supply matches the one in the config.xml file in your Ionic 

project, so make sure the following line in your config.xml file matches your Facebook Apps Bundle ID: 

<widget  id="com .yourname .yourproject" version="0.0.1" 

     xmlns="http ://www .w3 .org/ns/widgets" 

     xmlns :cdv="http ://cordova .apache .org/ns/1.0"> 

YouwillalsoneedtosupplythesameBundleIDwhenyouaddtheAndroidplatformtoyourFacebookapp 

later as well (it should be added under Google Play Package Name). 

That’sallthereistoitfornow,withour AppName and AppID inhandwearereadytoinstallthepluginin 

our application. 

IMPORTANT: When your app is ready to go live, remember to switch the Facebook application out of 

development mode by going to the App Review tab and switching “Make Your App public?” to ‘Yes’ 

Installing the Facebook Connect Plugin 

To installthe plugin in the application you willneed to run the following command from your project direc- 

tory: 

ionic plugin  add  cordova-plugin-facebook4  --save  --variable 

     APP_ID="123456789" --variable  APP_NAME="myApplication " 

making sure to replace the APP_ID and APP_NAME values with the ones from your own Facebook appli- 

cation that you just created. 

IMPORTANT: There is currently a build issue with this plugin on Android. This may or may not effect you 

depending on which version you are using, but if when building for Android later the build fails you will 

have to change the following line in platforms/android/project .properties: 

cordova .system .library .1=com .facebook .android :facebook-android-sdk :4.4.0 

                                                       458 

----------------------- Page 460-----------------------

Setting up Authentication 

We’ve got everything we need set up now, so we can jump into some more coding in our application. 

Integrating the Facebook API with Ionic Native is actually really easy, but before we do that we are going 

to set up our data service so that it can store some values from Facebook temporarily. The data service 

willprimarily be used forhandling storingand retrieving ourmessage data later,butsince we justneed to 

store a couple of values from Facebook it’s easy to just tack them on here. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Injectable  }  from       '@angular/core '; 

@Injectable () 

export  class Data  { 

   fbid : number ; 

   username : string; 

   picture : string; 

   constructor()  { 

   } 

} 

Now we’re going to modify our login page to authenticate with Facebook when the user clicks the login 

button, rather than just going straight to the home page. 

> Modify the login function in src/pages/login/login .ts to reflect the following: 

   login(): void  { 

      Facebook .login(['public_profile ']).then ((response)  =>  { 

                                                   459 

----------------------- Page 461-----------------------

        this .getProfile (); 

      },  (err)  =>  { 

        let  alert  =  this .alertCtrl .create({ 

           title :  'Oops !', 

           subTitle :  'Something  went  wrong , please  try  again  later .', 

           buttons :  ['Ok '] 

        }); 

        alert .present (); 

      }); 

   } 

Since we have already imported Facebook from Ionic Native we can access the Facebook object now. 

Wecallthe login methodandpassinanarrayofpermissionswerequire. We’reonlyafterbasicuserinfor- 

mationsoweonlyrequestpermissionfortheusers“publicprofile”,buttherearemanymorepermissions 

you can request such as: 

     • User friends 

     • User interests 

     • User bio 

     • User location 

     • Users tagged places 

and a whole lot more, take a look at this page for a full list. The login method returns a promise, so we 

set up a handler for the response and if it is successful we trigger the getProfile function we set up 

previously which will launch the home page. If it is not successful then we create and display an alert to 

                                                   460 

----------------------- Page 462-----------------------

the user. 

WenowknowthatauserhassuccessfullyauthenticatedwithFacebookandthattheyshouldhaveaccess 

to our application, but we still need to find out a few details about them. In order for them to use the 

application we will also need their name and profile picture, so to grab this we are going to modify the 

getProfile function. 

> Modify the getProfile function in src/pages/login/login .ts to reflect the following: 

   getProfile (): void  { 

      Facebook .api ('/me?fields=id,name ,picture ',  ['public_profile ']).then ( 

         (response)  =>  { 

           console .log(response); 

           this .dataService .fbid  =  response .id; 

           this .dataService .username  =  response .name ; 

           this .dataService .picture  =  response .picture .data .url ; 

           this .menu .enable(true); 

           this .nav .setRoot(HomePage); 

        }, 

         (err)  =>  { 

           console .log(err); 

           let  alert  =  this .alertCtrl .create({ 

              title :  'Oops !', 

                                                   461 

----------------------- Page 463-----------------------

              subTitle :  'Something  went  wrong , please  try  again  later .', 

             buttons :  ['Ok '] 

           }); 

           alert .present (); 

        } 

      ); 

   } 

Nowwearemakingacalltothe api methodthattheFacebookpluginprovides. Thisallowsustointeract 

with FacebooksGraphAPIwhichishowyoudojustabouteverythingwiththeFacebookAPI-youcanget 

intosomereallycomplexstuffbutwejustwanttouseittograbtheusersid,fullnameanddisplaypicture. 

The first parameter that needs to be provided to the api call is the endpoint you want to hit, which for 

usis /me becausewewantdataaboutthecurrentlyloggedinuser,andweaddaquerystringcontaining 

all the data fields we want returned. We also provide an array of permissions we require again and then 

handle the response. 

IftheresponseissuccessfulwestorethosevaluesweretrievedusingourdataService,thenweenablethe 

slidingmenuandswitchtothehomepage. Iftheresponseisnotsuccessfulthenweagainshowtheuser 

an error message and keep them on the login page. 

The only other bit of functionality we need to use from the Facebook API is the logout method. When a 

user logs out of our application we want to terminate that session with Facebook as well (this won’t log 

them out of Facebook, it just means that they will need to reauthenticate with Facebook when using our 

application again). To do that we are going to modify our own logout function. 

> Modify the logout function in src/app/app .component .ts to reflect the following: 

   logout(): void  { 

                                                  462 

----------------------- Page 464-----------------------

     this .menu .close(); 

     this .menu .enable (false); 

     this .nav .setRoot(LoginPage); 

     this .dataService .fbid  =  null ; 

     this .dataService .username  =  null ; 

     this .dataService .picture  =  null ; 

      Facebook .logout(); 

   } 

Firstwehandlestuffonourend. Weclosethemenuanddisableit,andthenswitchbacktotheloginpage. 

WeresetalltheFacebookdatathatwasstoredinourdataserviceandthenwecallthelogoutmethodon 

theFacebookAPI.Theuserwouldnowbebackontheloginpageinourapplicationandunauthenticated. 

Since there is a bit of waiting time in the application whilst the user is being authenticated (like when we 

fetchtheusersprofile)wewanttoindicatetotheuserthatsomethingishappening,andthattheappisn’t 

just frozen. To do this we will use Ionic’s LoadingController service. This will allow us to stop interaction 

with the application for a period of time. 

> Modify src/pages/login/login .ts to reflect the following: 

import  {  Component  }  from       '@angular/core '; 

import  {  Platform , NavController , MenuController , AlertController , 

     LoadingController  }  from        'ionic-angular '; 

import  {  Facebook  }  from      'ionic-native '; 

import  {  HomePage  }  from      '../home/home '; 

import  {  Data  }  from     '../../providers/data '; 

@Component ({ 

                                                   463 

----------------------- Page 465-----------------------

  selector :  'page-login ', 

  templateUrl :  'login .html ' 

}) 

export  class  LoginPage  { 

  loading : any ; 

  constructor(public  nav : NavController , public  platform : Platform , public 

      menu : MenuController , public  dataService : Data , public  alertCtrl : 

      AlertController , public  loadingCtrl : LoadingController)  { 

     this .loading  =  this .loadingCtrl .create({ 

       content :  'Authenticating ...' 

     }); 

     this .menu .enable (false); 

  } 

  login(): void  { 

     this .loading .present (); 

     Facebook .login(['public_profile ']).then ((response)  =>  { 

       this .getProfile (); 

     },  (err)  =>  { 

       let  alert  =  this .alertCtrl .create({ 

          title :  'Oops !', 

                                              464 

----------------------- Page 466-----------------------

       subTitle :  'Something  went  wrong , please  try  again  later .', 

       buttons :  ['Ok '] 

     }); 

     this .loading .dismiss (); 

     alert .present (); 

  }); 

} 

getProfile (): void  { 

  Facebook .api ('/me?fields=id,name ,picture ',  ['public_profile ']).then ( 

     (response)  =>  { 

       console .log(response); 

       this .dataService .fbid  =  response .id; 

       this .dataService .username  =  response .name ; 

       this .dataService .picture  =  response .picture .data .url ; 

       this .menu .enable(true); 

       this .loading .dismiss (); 

       this .nav .setRoot(HomePage); 

     }, 

     (err)  =>  { 

                                           465 

----------------------- Page 467-----------------------

           console .log(err); 

           let  alert  =  this .alertCtrl .create({ 

              title :  'Oops !', 

              subTitle :  'Something  went  wrong , please  try  again  later .', 

              buttons :  ['Ok '] 

           }); 

           this .loading .dismiss (); 

           alert .present (); 

        } 

      ); 

   } 

} 

Notice that we are now importing the LoadingController service and we set up an “Authenticating…” 

message in the constructor. We then to present the loading message (just like we would with an Alert or 

a Modal) when the login method is called. Then we dismiss the loading message when either the users 

profile information has been successfully retrieved, or when the login process fails. 

That’s all there is to the Facebook integration in this application, but there’s a ton more you can do with 

the Facebook API. I’d recommend looking at the plugin documentation and the Facebook Graph API to 

get more of a sense of what is possible with Facebook. 

In the next lesson, we’ll be looking at how we can add some messages to our chat screen! 

                                                    466 

----------------------- Page 468-----------------------

Lesson 5: Creating Messages & Navigation 

This is obviously one of the most critical bits of functionality in our application, but it’s going to be pretty 

straightforwardto implement. The hardpartwillbe the integration with PouchDB and Cloudantwhich we 

will tackle later, for now we just want to create the ability for the logged in user to add messages to the 

screen. 

We will also be tieing up a few loose ends with our navigation - we have a menu with some options that 

do nothing and an about page that has nothing on it. 

Adding Messages 

We’ve already set up an input field tied to the this .chatMessage variable in our home page class 

definitionandabuttonthattriggersthe sendMessage function,soallwehavetodotoenablecreatinga 

messageistodefinethat sendMessage function. We’llalsohavetomodifythetemplatetoloopthrough 

and display all of the available messages. 

> Modify the sendMessage function in src/pages/home/home .ts to reflect the following: 

   sendMessage(): void  { 

      let message  =  { 

         '_id ': new  Date ().toJSON (), 

         'fbid ': this .dataService .fbid , 

         'username ': this .dataService .username , 

         'picture ': this .dataService .picture , 

         'message ': this .chatMessage 

      }; 

      this .messages .push (message); 

      this .chatMessage  =      ''; 

                                                    467 

----------------------- Page 469-----------------------

   } 

All we are doing here is creating a message object with a few different properties. We add all of the 

information we just recently grabbed from Facebook, along with the message the user entered. We also 

add an “id” field which is for the PouchDB & Cloudant integration we’ll be working on in the next lesson, 

so just ignore that for now. 

Oncewe’vecreatedthemessagewejustpushitdirectlytothemessagesarrayandresetthechatmessage 

input field (so that the input field is ready for the user to type their next message). We will be modifying 

this in the next lesson so that the message is sent to our remote backend, not just pushed directly to the 

messages array (nobody apart from the user who created it would see it otherwise!). 

Now that we have the ability to push some data into our messages array, let’s modify the template to 

display it. 

> Modify the list in src/pages/home/home .html to reflect the following: 

   <ion-list  no-lines> 

      <ion-item  *ngFor="let message  of messages "> 

         <ion-avatar  item-left> 

           <img    [src]="message .picture"> 

         </ion-avatar> 

         <div> 

           <h2>{{message .username}}</h2> 

           <p>{{message .message}}</p> 

         </div> 

      </ion-item> 

   </ion-list> 

Nowwe’reloopingthroughanddisplayingallofourmessagesintheirown <ion-item>. Rememberthat 

the‘’ syntax is a shortcut for creating embedded templates, and ’ngFor’willcreateanembeddedtemplate 

                                                    468 

----------------------- Page 470-----------------------

forevery message in messages andstampitoutwiththatspecificmessagesvalues. Usingthedatathat 

isattachedtoeachmessagewearenowaddingtheusersdisplaypictureandnametothemessage,along 

with the message itself of course. 

If you run the application now, you should be able to add some test messages to the application and see 

them displayed (remember, you must test this on a device because Facebook login will not work through 

ionic serve): 

                                                        469 

----------------------- Page 471-----------------------

###Creating the About Page 

We’vegotourslidingmenusetup,buttheonlybuttonthatactuallyworksnowisthe‘Logout’button. We 

                                               470 

----------------------- Page 472-----------------------

stillneedtocreateouraboutpageandlinktoit,aswellaslinkingthe‘Chat’buttonbacktothemainchat 

screen. Let’s start by implementing the about page. 

> Modify src/pages/about/about .html to reflect the following: 

<ion-header> 

   <ion-navbar  color="primary"> 

     <button  ion-button  icon-only  menuToggle> 

        <ion-icon  name="menu "></ion-icon> 

     </button> 

     <ion-title> 

        <img  src  =   "assets/images/logo .png" class="logo" /> 

     </ion-title> 

   </ion-navbar> 

</ion-header> 

<ion-content padding> 

     <p>Camper  Chat  allows  you  to  talk  to  other  <strong>caravaners, RV 'ers , 

          roadtrippers  and  campers</strong>  near  you . Use  Camper  Chat  to  give 

          and  receive  tips , ask  for  help  with  your  flat  tyre , or  just  have  a 

          friendly  chat .</p> 

</ion-content> 

This is a really simple page and there’s not really anything exciting here. We’ve implemented the menuTo- 

ggle button just as we did on the home page, and we’ve just added a bit of descriptive content. 

Now we just need to set up the click handlers for the about page and the chat page in the menu. If you 

take a look in app.html you will see that we have both of these buttons calling the openPage function: 

        <button  ion-item  (click)="openPage(homePage)"> 

           <ion-icon  name="chatbubbles">  Chat</ion-icon> 

        </button> 

        <button  ion-item  (click)="openPage(aboutPage)"> 

                                                  471 

----------------------- Page 473-----------------------

           <ion-icon  name="information-circle">  About</ion-icon> 

         </button> 

one passes in a ‘homePage’ parameter and the other ‘aboutPage’. We’re going to set up our openPage 

function now to handle this. 

> Modify the openPage function in src/app/app .component .ts to reflect the following: 

   openPage(page): void  { 

      this .menu .close(); 

      this .nav .setRoot(page); 

   } 

First we close the menu since the user has made a selection (it would be annoying if the menu stayed 

open)andthenweuseournavcomponenttochangetherootpage. Wesetittothepageparameterthat 

was passed in, and since we have already set up homePage and aboutPagereferences: 

   homePage : any  =  HomePage ; 

   aboutPage : any  =  AboutPage ; 

the appropriate page will be switched to when the function is called. Now the user can switch back and 

forth freely between the about page and the chat page, and then they can also log out to go back to the 

log in page. 

We’ve now got all the basic functionality of the application set up, the last big thing we need to tackle is 

theintegrationofPouchDBandCloudant,whichwewillbedoinginthenextlesson,andthenwejustneed 

to tidy things up and make it look pretty. 

                                                     472 

----------------------- Page 474-----------------------

Lesson 6: Local and Remote Backend with PouchDB and Cloudant 

Although we’ve already created most of the functionality for the application, this lesson is going to be the 

biggest and hardest of them all. Rather than pushing the users message straight to the messages array, 

we are going to store the message using PouchDB. 

PouchDBisaninbrowserNoSQLdatabasethatwasinspiredbytheCouchDBproject. It’sbiggestfeature 

is that it allows for data storage offline, and it can automatically sync to a remote database when the 

applicationcomesbackonline. LikeusingtheSqlStorageservicethatIonicprovides,usingPouchDBwill 

ensure that your local data won’t be randomly wiped out like it can be when using plain local storage. 

Teaching NoSQL is far beyond the aims of this book, but to give you a really quick background, NoSQL 

databases usually store data in a JSON like key value style format, instead of the relational style tables 

thattraditionalSQLuses. Thetwoapproachesarecompletelydifferent,thewayyouusethemisdifferent 

andthewayyouneedtothinkaboutthemisdifferent. SowhenitcomestousingNoSQLyouhavetodrop 

a lot of the preconceived notions you would have from SQL (assuming you’ve used that in the past). The 

datawe’restoringissupersimplethough,sowedon’tneedtoworryaboutlearninghowtouseaNoSQL 

database properly. 

So PouchDB will handle storing our data locally, but we are also going to be using Cloudant to create a 

remote database. We will be syncing the local PouchDB database to the remote Cloudant database, so 

that whenever the application is online it can fetch new data from Cloudant, and any new local data will 

alsobepushedtoCloudant. Fortunately,thesetwotoolsaredesignedtoworkwitheachotherandsetting 

up remote syncing, which is usually a very complex task, is super simple. 

Cloudant is a DBaaS (Database as a Service) so we are going to have to create an account (which is free 

for low usage) to use it, as well as set up the database. Using something like Cloudant is really easy and 

scalesverywell(sinceallthebackendarchitectureishandledforyou),butifyoupreferyoucaneasilyuse 

something like CouchDB or Couchbase installed on your own server to sync with PouchDB. I won’t be 

covering how to set those up, but it’s not all that different. 

                                                     473 

----------------------- Page 475-----------------------

Creating a Cloudant Database 

Beforewestartjumpingintothecode,we’regoingtosetupourbackendonCloudantthroughIBMBluemix. 

BluemixgivesyouaccesstoIBM’sOpenCloudArchitectureandcanbeusedtocreate,deployandmanage 

cloud based applications. It provides a bunch of services you can use and one of those is Cloudant. 

FirstyouwillneedtocreateanIBMBluemixaccount. Onceyouhavecreatedyouraccountandloggedin, 

you should see a screen like this: 

Choose the Create App option, choose Mobile, name your application and then click Finish. After that 

you should see a screen like this: 

                                                    474 

----------------------- Page 476-----------------------

Choose Cloudant NoSQL DB from the Services menu on the left and then click View your Data on the 

Cloudant Dashboard. You should now be inside of the Cloudant dashboard. Click the Create Database 

option in the top right to create a new database and call it camperchat or whatever you prefer. 

Now select the newly created database to view more details, you should see a screen like this: 

Click the API link in the top right to get a reference to your Cloudant Database URL, this is what we will 

supplytoPouchDBlatersomakeanoteofit. YoushouldalsogotothePermissionssectionandgenerate 

an API key (making sure to give it Write and Replicate permissions) – this can be used with PouchDB to 

access your database, and it’s a better idea to use an API key which is revokable rather than the actual 

username and password for your account. Make sure to take note of the password because once you 

leave the screen you won’t be able to find it again. 

There’s just one more thing we need to do in here. We need to enable CORS (Cross Origin Resource 

                                                    475 

----------------------- Page 477-----------------------

Sharing) so that we are able to make requests to the database from our application. To do that go to 

Account in the left menu, select CORS and then choose the All Domains (*) options. 

You should now have everything you need set up on Cloudant, ready to be used with PouchDB. 

Integrating PouchDB 

EarlieronwecreatedaDataproviderwhichsofarweareonlyusingtostoreafewvaluesfromtheFacebook 

API. Now we’re going to extend that Data service to handle storing and retrieving data with PouchDB. 

> Modify src/providers/data .ts to reflect the following: 

import  {  Injectable  }  from      '@angular/core '; 

import PouchDB  from       'pouchdb '; 

@Injectable () 

export  class Data  { 

   fbid : number ; 

   username : string; 

   picture : string; 

   db : any ; 

   data : any ; 

   cloudantUsername : string; 

   cloudantPassword : string; 

   remote : string; 

   constructor(){ 

     this .db  =  new  PouchDB ('camperchat '); 

     this .cloudantUsername  =       'YourAPIUsernameHere '; 

                                                  476 

----------------------- Page 478-----------------------

  this .cloudantPassword  =     'YourAPIPasswordHere '; 

  this .remote  =   'https ://YOUR-URL-HERE-bluemix .cloudant .com/camperchat '; 

   //Set  up PouchDB 

   let  options  =  { 

     live : true , 

     retry : true , 

     continuous : true , 

     auth :  { 

       username : this .cloudantUsername, 

       password : this .cloudantPassword 

     } 

   }; 

  this .db .sync(this .remote , options); 

} 

addDocument (message){ 

} 

getDocuments (){ 

} 

handleChange (change){ 

} 

                                            477 

----------------------- Page 479-----------------------

} 

We’ve already installed PouchDB with npm so to make it available in this service we have just added the 

following line: 

import PouchDB  from         'pouchdb '; 

In the constructor we are just handling the set up of PouchDB and the sync to the remote Cloudant 

database. First we create a new PouchDB, or get a reference to an already existing one: 

this .db  =  new  PouchDB ('camperchat '); 

and then we define a few variables which will be used to connect to the Cloudant database: 

      this .cloudantUsername  =          'YourAPIUsernameHere '; 

      this .cloudantPassword  =          'YourAPIPasswordHere '; 

      this .remote  =     'https ://YOUR-URL-HERE-bluemix .cloudant .com/camperchat '; 

MakesuretoreplacethesevalueswithyourownfromtheCloudantdashboard. Nextwecreateanoptions 

object to configure our connection to the Cloudant database and then we call the sync method: 

this .db .sync(this .remote , options); 

This will set up replication from our PouchDB database to the Cloudant database, and it will also set up 

replication from the Cloudant database to the PouchDB database. So now if we add some data to our 

PouchDB database it will automatically be reflected in the remote Cloudant database, and if we change 

or add some data in the remote Cloudant database it willautomatically be reflected in our local database. 

After that we have just created three empty functions, which we are going to go through implementing 

now. 

addDocument 

> Modify the addDocument function to reflect the following: 

                                                      478 

----------------------- Page 480-----------------------

   addDocument (message)  { 

     this .db .put (message); 

   } 

To add a document (a data object in NoSQL terms is called a “document”, so think of a document as 

a bit of data, not something like a Word document) to our PouchDB database we simply call put on our 

database. So we will be able to pass this function any object and it will add it to the database. 

getDocuments 

> Modify the getDocuments function to reflect the following: 

   getDocuments (){ 

     return  new  Promise (resolve  =>  { 

        this .db .allDocs ({ 

           include_docs : true , 

           limit :  30, 

           descending : true 

        }).then ((result)  =>  { 

           this .data  =  []; 

           let  docs  =  result .rows .map ((row)  =>  { 

              this .data .push (row .doc); 

           }); 

           this .data .reverse (); 

                                                   479 

----------------------- Page 481-----------------------

           resolve (this .data); 

           this .db .changes({live : true , since :  'now ', include_docs : 

               true}).on ('change ',  (change)  =>  { 

              this .handleChange (change); 

           }); 

        }).catch((error)  =>  { 

           console .log(error); 

        }); 

      }); 

   } 

This function handles retrieving all of the documents from our database (remember, a document is just 

whatadataobjectiscalled). Thisisanasynchronousoperation,sowewrapitinapromisewhichresolves 

when the data is returned. This will allow us to use the getDocuments ().then () syntax elsewhere in 

theapplication. Bycalling allDocs everydocumentwillberetrieved,butwearesupplyingafewoptions 

here: 

           include_docs : true , 

           limit :  30, 

           descending : true 

The include_docs option here may seem a little confusing, but we need to specify this so that all the 

data in our documents are returned (message, picture etc.). If this option is left out then only the id of 

the document is returned. We also set a limit of 30 and a descending order so that only the 30 latest 

                                                   480 

----------------------- Page 482-----------------------

documents (chat messages) are returned. 

We pass the result of that operation through to our handler, and for each row that is returned we push it 

into a this .data array. We want these results to be in reverse order though because we want to show 

the latest message at the bottom so we flip the array with reverse. After this we resolve the promise we 

created and pass back the data, and then we set up a changes listener. 

The changes listener will call the this .handleChange function every time a change is detected in the 

database(whenanotheruserhasaddedachatmessageforexample),andthechangeitselfwillbepassed 

into that function. We’ll define that now. 

handleChange 

> Modify the handleChange function to reflect the following: 

   handleChange (change)  { 

      let  changedDoc  =  null ; 

      let  changedIndex  =  null ; 

      this .data .forEach ((doc , index)  =>  { 

        if(doc ._id  ===  change .id){ 

           changedDoc  =  doc ; 

           changedIndex  =  index; 

        } 

      }); 

      //A  document  was  deleted 

      if(change .deleted){ 

        this .data .splice(changedIndex,  1); 

                                                    481 

----------------------- Page 483-----------------------

      } 

      else  { 

        //A  document  was  updated 

        if(changedDoc){ 

           this .data [changedIndex]  =  change .doc ; 

        } 

        //A  document  was  added 

        else  { 

           this .data .push (change .doc); 

        } 

      } 

   } 

What we want to do with the change that is passed in is reflect it in our this .data array, but it get’s a 

little bit tricky. The change object that is sent back could either be a document that has been updated, a 

new document, or a deleted document. 

Detecting a deleted document is easy enough because it will contain the deleted property. But to see if 

it is an update, we need to check if we already have a document with the same id (and update that one if 

we find it), if we don’t then we know it is a new document (and need to add it to the array). 

We have our Data provider completely set up now, but there’s still a couple more things we need to do 

to make use of it. We will need to store new data using the provider, rather than adding it directly to the 

messagesarraylikewearedoingnow,andwewillalsoneedtoloadinthelatestmessagesdatawhenthe 

application is opened. Let’s do that now. 

> Modify src/pages/home/home .ts to reflect the following: 

                                                    482 

----------------------- Page 484-----------------------

import  {  Component , ViewChild  }  from  '@angular/core '; 

import  {  Data  }  from '../../providers/data '; 

@Component ({ 

  selector :  'page-home ', 

  templateUrl :  'home .html ' 

}) 

export  class HomePage  { 

  @ViewChild ('chat ')  chat : any ; 

  chatMessage : string  =   ''; 

  messages : any  =  []; 

  constructor(public  dataService : Data){ 

     this .dataService .getDocuments ().then ((data)  =>  { 

       this .messages  =  data ; 

       this .chat .scrollToBottom(); 

     }); 

  } 

  sendMessage(): void  { 

     let message  =  { 

       '_id ': new  Date ().toJSON (), 

       'fbid ': this .dataService .fbid , 

                                            483 

----------------------- Page 485-----------------------

         'username ': this .dataService .username , 

         'picture ': this .dataService .picture , 

         'message ': this .chatMessage 

      }; 

      this .dataService .addDocument (message); 

      this .chatMessage  =      ''; 

   } 

} 

In the constructor we are now calling the getDocuments () function to load in the messages data, and 

once we do we grab a reference to the scroll content using @ViewChild and scroll it to the bottom. 

Finally, in the sendMessage function the only change we’ve made is to call the addDocument function 

rather than pushing the message to the messages array. 

That’s it! You should now have a fully functional chat application. It works, but it’s still pretty ugly. In the 

next lesson we are going to make it look prettier and even set up some animations! 

                                                    484 

----------------------- Page 486-----------------------

Lesson 7: Styling & Animations 

In this lesson we’re going to modify our templates a bit to add some classes and we will create some 

custom styles, as well as overwriting some of the app wide SASS variables. If you’ve completed some of 

theotherapplicationsthenyou’llprobablyknowthatthere’susuallynottoomuchworktobedoneinthese 

lessons, and this one isn’t that different, but we will be doing something a little bit different by including 

some custom animations. 

Animations, when done right, can do a lot to help make your application look and feel more high quality. 

When done poorly they can look tacky and can also cause a big performance hit. 

Basic Styling 

Let’s start off by adding some basic styling throughout the application to make it look a little nicer. First 

we’re going to modify the variables file to make some application wide changes. 

> Modify src/theme/variables .scss to include the following: 

$colors :  ( 

   primary :        #5b91da , 

   secondary :      #32db64 , 

   danger :         #f53d3d , 

   light :          #f4f4f4 , 

   dark :          #222, 

   favorite :       #69BB7B 

); 

$list-ios-border-color :  #fff ; 

$list-md-border-color :  #fff ; 

$button-ios-border-radius :  0px ; 

                                                    485 

----------------------- Page 487-----------------------

We’renotdoingawholelothere,justdefiningthecolourswewanttouse,settingthedefaultbordercolour 

for Android and iOS and also setting the border radius for buttons on iOS to 0px (buttons on Android are 

already square). 

We also want to define a few application wide styles in the core style file as well. 

> Add the following styles to src/app/app .scss: 

 .logo  { 

     max-height :  39px ; 

     margin-top :  6px ; 

} 

ion-menu    ion-content  { 

     background-image : url ('../assets/images/login-background .png '); 

     background-size : cover; 

     background-position-x :  40%; 

} 

ion-menu  scroll-content  { 

     margin-top :  44px ; 

} 

ion-menu     .item  { 

     background-color : transparent ; 

      color :  #fff ; 

} 

We’re modifying the position of the logo a bit, setting a background image that will cover the whole login 

page, we add a margin to the menu so that the content doesn’t overlap the status bar when running on a 

device, and we make the menus items transparent. 

                                                   486 

----------------------- Page 488-----------------------

Next we are going to modify our login page and home page to include some custom styling. 

> Modify src/pages/home/home .scss to reflect the following: 

page-home  { 

   ion-label  { 

     white-space : normal ; 

   } 

   ion-row  { 

     padding :  0; 

     margin :  0; 

   } 

   ion-col  { 

     padding :  0; 

     margin :  0; 

   } 

   toolbar-content  { 

     padding :  0; 

     margin :  0; 

   } 

} 

Nothingexcitinggoingonhere,we’rejustmodifyingthepositioningofsomeofthelayoutelementssothey 

sit more nicely. 

> Modify src/pages/login/login .html to reflect the following: 

<ion-content padding> 

                                                  487 

----------------------- Page 489-----------------------

     <ion-row> 

          <ion-col> 

              <img  src="assets/images/logo .png" class  =      "login-logo"/> 

          </ion-col> 

     </ion-row> 

     <ion-row  class="login-description"> 

          <ion-col> 

              <p>Camper  Chat  allows  you  to  talk  to  other  <strong>caravaners, 

                  RV 'ers , roadtrippers  and  campers</strong>  near  you . Use 

                  Camper  Chat  to  give  and  receive  tips , ask  for  help  with  your 

                  flat  tyre , or  just  have  a  friendly  chat .</p> 

              <p>Log  in with  <strong>Facebook</strong>  below  to  get  started .</p> 

          </ion-col> 

     </ion-row> 

     <ion-row> 

          <ion-col> 

              <a  (click)="login()"><img  src="assets/images/facebook-button .png" 

                  class="login-button" /></a> 

          </ion-col> 

     </ion-row> 

</ion-content> 

> Modify src/pages/login/login .scss to reflect the following: 

page-login  { 

                                             488 

----------------------- Page 490-----------------------

   .scroll-content  { 

     background-image : url ('../assets/images/login-background .png '); 

     background-size : cover; 

     background-position-x :  40%; 

     text-align : center; 

   } 

   .login-description  { 

     height :  60%; 

      line-height :  2em ; 

   } 

   .login-description  p  { 

      color :  #fff ; 

   } 

   .login-button  { 

      -webkit-box-shadow :  0px  6px  20px  0px  rgba (0,0,0,0.18); 

      -moz-box-shadow :  0px  6px  20px  0px  rgba (0,0,0,0.18); 

     box-shadow :  0px  6px  20px  0px  rgba (0,0,0,0.18); 

   } 

} 

We’ve had to add a couple of extra classes to the login pages template this time. In the .scss file we are 

again setting a background image (the same one used on the login screen) but this time it will be applied 

to the menu. We position the description content and also add a bit of a shadow to the Facebook login 

button. 

That’s it for the basic styling, the pages in your application should now look something like this: 

                                                   489 

----------------------- Page 491-----------------------

       490 

----------------------- Page 492-----------------------

We still have the most fun bit left to do though, and that’s adding a couple of animations. 

                                                      491 

----------------------- Page 493-----------------------

Creating Animations 

Oneimportantthingtorememberwhenanimatingelementsistousethetranslate3d property(eventhough 

we are only animating through 2D space). By using this property rather than animating the left property 

forexample,thedevicesGPU(GraphicsProcessorUnit)isinvoked. Thisiscalledahardwareaccelerated 

animationandisalotsmoother. Youmayfindthatanimationsthatrunfineonyourdesktopbrowserdon’t 

worksowellonmobiledevices,soit’susuallyimportanttousehardwareacceleration(althoughrelyingon 

the GPU too much can also be disadvantageous, as it can lead to battery drain). 

To create our animations we are going to define our own keyframes. Basically, this allows you to specify 

what certain properties should be at a specific stage during an animation. For example: 

@-webkit-keyframes  slideInSmooth  { 

   0%  { 

      -webkit-transform : translate3d (-100%,0,0); 

   } 

   100%  { 

      -webkit-transform : translate3d (0,0,0); 

   } 

} 

What we are saying here is that at the start of the animation (0%) the element should be displaced 100% 

to the left (the three parameters in translate3d represent the x, y, and z axis), so it will be just off screen. 

Then at the end of the animation (100%) the element should be back to its normal starting position. 

We could also define a similar animation like this: 

@-webkit-keyframes  slideInSmooth  { 

   0%  { 

      -webkit-transform : translate3d (-100%,0,0); 

   } 

   50%  { 

                                                    492 

----------------------- Page 494-----------------------

      -webkit-transform : translate3d (50%,0,0); 

   } 

   100%  { 

      -webkit-transform : translate3d (0,0,0); 

   } 

} 

Now the element would start off to the left, then go to the right and then finally get back to its normal 

position. You can define as many of these intermediate steps as you like, the only important thing is that 

you always have a 0% and 100% (alternatively, you can use from and to) otherwise the animation will be 

invalid. 

We can attach these animations to any element simply by creating a class that uses the animation and 

attachingtheclasstoanyelement. Wearen’tgoingtobeusingtheseanimations,butwewillcreatesome 

similar ones to animate in both the users display picture and their message. 

> Modify src/app/app .scss to include the following animations: 

@-webkit-keyframes  animateInPrimary  { 

   0%  { 

      -webkit-transform : translate3d (-100%,0,0); 

   } 

   100%  { 

      -webkit-transform : translate3d (0,0,0); 

   } 

} 

@-webkit-keyframes  animateInSecondary{ 

   0%  { 

                                                   493 

----------------------- Page 495-----------------------

     opacity :  0; 

   } 

   50%  { 

     opacity :  0; 

   } 

   100%  { 

     opacity :  1; 

   } 

} 

 .animate-in-primary  { 

     -webkit-animation : animateInPrimary ; 

     animation : animateInPrimary ; 

     -webkit-animation-duration :  750ms ; 

     animation-duraton :  750ms ; 

} 

 .animate-in-secondary  { 

     -webkit-animation : animateInSecondary  ease-in  1; 

     animation : animateInSecondary  ease-in  1; 

     -webkit-animation-duration :  750ms ; 

     animation-duraton :  750ms ; 

} 

We’vecreatedtwodifferentanimationshere. The animateInPrimary animationwillmaketheelementstart 

off outside of the left bounds of the screen, and will slide in to its normal position evenly over the course 

of the animation. The animateInSecondary animation will start fading in from being fully transparent to 

full opaque halfway through the animation. 

                                                  494 

----------------------- Page 496-----------------------

Weassigntheseanimationstotwoseparateclasses,bothofwhichsetananimationtimeof750ms. Now 

tousethese,allwehavetodoisapplythe animate-in-primary and animate-in-secondary classestoan 

element. 

> Modify the list in src/pages/home/home .html to reflect the following: 

   <ion-list  no-lines> 

     <ion-item  *ngFor="let message  of messages "> 

        <ion-avatar  item-left  class="animate-in-primary"> 

           <img   [src]="message .picture"> 

        </ion-avatar> 

        <div  class="animate-in-secondary"> 

           <h2>{{message .username}}</h2> 

           <p>{{message .message}}</p> 

        </div> 

     </ion-item> 

   </ion-list> 

Noticethatwe’veaddedtheprimaryanimationtotheavatar,andthesecondaryanimationtothemessage 

content area. If you load up the application now you should be able to see these elements animate in! 

                                                 495 

----------------------- Page 497-----------------------

Conclusion 

Congratulations on making it through the Camper Chat tutorial. We’ve learned a lot through developing 

this application, but the main take aways are: 

     • Navigation 

     • Using a Sliding Menu 

     • Using PouchDB to store local data 

     • Using Cloudant to store remote data 

     • Using the Facebook API for authentication and other features 

     • Updating and displaying data in real time 

There’s always room to take things further though, especially when you’re trying to learn something. Fol- 

lowing tutorials is great, but it’s even better when you figure something out for yourself. Hopefully you 

have enough background knowledge now to start trying to extend the functionality of the application by 

yourself, here’s a few ideas to try out: 

     • Make the users device vibrate when a message is received by using a Cordova plugin [EASY] 

     • Add an ‘Invite Friends’ option using App Invites from the Facebook API [MEDIUM] 

     • Add “Channel Categories” that will allow the user to switch between different chat rooms, e.g: Ve- 

       hicle Issues, General Chat, Camping [HARD] 

     • Add the ability for a user to privately message another user [VERY HARD] 

Remember, the Ionic 2 documentation is your best friend when trying to figure things out. 

What next? 

You have a completed application now, but that’s not the end of the story. You also need to get it running 

on a real device and submitted to app stores, which is no easy task. The final sections in this book will 

walk through how to take what you have done here, and get it onto the app stores so make sure to give 

that a read. 

                                                      496 

----------------------- Page 498-----------------------

Chapter 8 

Testing & Debugging 

                               497 

----------------------- Page 499-----------------------

Testing & Debugging 

Whencreatingyourapplicationyouare,withoutadoubt,goingtomakesomemistakesandrunintosome 

errors. It’snot always obvious where you’ve gone wrong either, so it’s important to know how you can go 

about tracking down the problem. 

This lesson is going to cover how best to debug Ionic 2 applications, but it won’t cover what debugging 

is in general or how to use debugging tools (e.g. viewing the source code, setting breakpoints, looking 

at network requests and so on). If you are not familiar with browser based Javascript debugging, then I 

highly recommend having a read through of this first. 

Browser Debugging 

Yourdesktopbrowserwillusuallybeyourfirstpointofcallwhendevelopingyourapplication. It’sgreatto 

beabletodebugdirectlythroughthebrowserbecause,especiallywithlivereload,youcanquicklyseethe 

impact code changes have and iterate really quickly. 

But it’s important to keep in mind that it is not representative of how the application will run on an 

actual device. For the most part, how it behaves in the browser will be the same as the way it works on 

a real device, but there can be differences and in the case of any Cordova plugins, they won’t work when 

testing through a desktop browser. 

Agoodapproachistodothemajorityofyourtestinginthebrowser,andonceyou’regettingclosetobeing 

happywithhoweverythingisworkingswitchtotestingonarealdevicetomakesureeverythingstillworks 

correctly. 

iOS Debugging 

In order to debug on an actual iOS device you will first need to run the following command: 

npm  -g    install  ios-sim  ios-deploy 

                                                      498 

----------------------- Page 500-----------------------

This will install both the iOS Simulator (which will allow you to emulate an iOS device on your computer) 

and ios-deploy will allow you to deploy the application directly to your device when it is attached via 

USB. 

Once that is set up, all you have to do is run: 

ionic  run     ios 

from within your project directory and the application will be deployed to your device (or to the emulator 

if a device is not available). If it is the first time you have run this command, you may need to run it twice 

before it will work. 

Once the application is running on your device, you can debug it using the Safari Dev Tools on your 

computer. Simply open up Safari and then go to: 

Develop  >  iPhone  >  index .html 

If the Develop menu does not appear for you, you may first have to enable it by going to Safari  > 

Preferences  >  Advanced  >  Show  Develop  menu                 in  menu  bar. 

                                                       499 

----------------------- Page 501-----------------------

Once you open up index.html in Safari you should see a debugging screen like this: 

IMPORTANT: This method will only work if you have a Mac. If you do not have a Mac then you can use 

GapDebug toinstallanddebugiOSapplications. Inordertodothisyouwillneedtogeneratean .ipa of 

yourapplicationfirst(wewilldiscusshowtodothisinthe BuildingforiOS lesson)andinstallthatdirectly. 

It’s also a good idea to test the final build of your application using Test Flight. 

Android Debugging 

Debugging on Android is as simple as attaching the device you want to debug on and then running: 

ionic  run  android 

on your desktop browser (in Chrome) you will now be able to go to the following address: 

chrome :// inspect/#devices 

                                                     500 

----------------------- Page 502-----------------------

and then click ‘Inspect’ on the device you want to debug on, and you will see the debugging tools: 

                                                    501 

----------------------- Page 503-----------------------

IMPORTANT: You will need to have USB debugging enabled on your device for this to work. Enabling 

USB debugging is different for different devices, so just Google “[YOUR DEVICE] enable usb debugging”. 

Tips & Common Errors 

The ease of which you can debug applications usually comes from the debugging prowess you develop 

over years of facing frustrating errors, but there are a few tips and gotchas I can offer that may help you 

out when debugging Ionic 2 application. 

                                                    502 

----------------------- Page 504-----------------------

Facing a white or blank screen at launch? 

Thisonehappensalotandthereasonisusuallyastartuperrorwhenrunningonadevice. Sometimesyou 

will launch your application and just see a blank screen, and even if you open your debugging tools you 

might not see any errors. This can be because an error occurs before the debugger has launched, which 

isbreakingtheapplication. Soifyou’rerunningintoaproblemlikethis,makesuretogetthedebuggerup 

and then hit the refresh button from the debugger, which in Safari looks like this: 

This will reload the application with the debugger already active, which means you’re not going to miss 

any errors that occur right at the start. Nine times out of ten you will discover there is some Javascript 

error and after fixing that your application should work. 

                                                     503 

----------------------- Page 505-----------------------

Debugger 

Hopefullyyouknowabouthowusefulbreakpointsarefordebuggingyourapplication,butifnotI’llreiterate 

that you should read this. 

You can just open up the ‘Sources’ tab and put some breakpoints in manually, but you can also simply 

add this little keyword: 

debugger ; 

anywhere in your code, and it will cause your application to pause at that point (as long as you have the 

Dev Tools open). 

404 Errors 

Is your app working fine through the browser but you’re getting 404 errors when running on a device? 

Make sure you have included the Whitelist plugin: 

ionic  plugin  add  cordova-plugin-whitelist 

and that you have an appropriate Content Security Policy (CSP) meta tag defined in your index.html file: 

<meta  http-equiv= "Content-Security-Policy" content="font-src  *  data :; img-src 

     *  data :; default-src  *        'unsafe-eval '  'unsafe-inline '"> 

Plugins not working on a device 

Of course the first thing to make sure you’ve done is to run the install command for the plugin: 

ionic  plugin  add        [plugin  name] 

It might sound silly but make sure to double check with the following command: 

ionic  plugin      ls 

                                                      504 

----------------------- Page 506-----------------------

this will list all plugins that are currently installed, and I still even forget to install plugins sometimes. If the 

plugin is installed then you should also make sure that you are not trying to access the plugin too early. If 

you try to access plugin functionality before the device is ready, i.e. before this fires: 

      platform .ready ().then (()  =>  { 

      }); 

thenitwillnotwork. Finally,ifyou’veexhaustedallotheroptionsanditisstillnotworkingthenyoushould 

try removing the plugin: 

ionic  plugin  rm        [plugin  name] 

and then readding the plugin: 

ionic  plugin  add         [plugin  name] 

Debuggingapplicationscanbeadifficultandfrustratingtask,especiallywhendebuggingonarealdevice, 

but over time you tend to develop a good sense of where things may have gone wrong and the process 

becomesaloteasier. Ifyou’restuckonaparticularerror,youcanalwaysheadovertothe IonicForum for 

help, just make sure to provide as much detail about the error and what you’ve tried as you can. 

Installing your Application with GapDebug 

If you are using PhoneGap Build and have a .ipa or .apk file you want to test then you will want to use 

GapDebug. There are other ways to install these files - you could use iTunes to install the .ipa file or you 

coulduse adb toinstallthe.apkfile-butitissomucheasierwithGapDebugandGapDebugalsoprovides 

youwithsomeawesomedebuggingtools(although,ifyou’relookingforsomemoreadvanceddebugging 

I would recommend using adb as well). To get GapDebug just head over to the website and download it. 

Once you have it installed, it should be available in your system tray. 

AfteryouhaveinstalledGapDebug,makesureyoureadthroughthe GapDebugFirst-TimeConfiguration 

and Setup - there is a few things you’ll need to do before GapDebug will work properly with your iOS or 

                                                        505 

----------------------- Page 507-----------------------

Android device. 

Once you have everything set up you will be able to connect your device to your computer, open up 

GapDebug, then just drag and drop the application file (.ipa or .apk) into the device through GapDebug. 

Not only is this a super quick way to get the application on your device but it also provides you with 

some extremely useful debugging tools (which are essentially the same as the browser debugging tools 

you may already be familiar with). Once you have installed your application with GapDebug, just click the 

application in GapDebug to reveal the debugging tools. 

                                                   506 

----------------------- Page 508-----------------------

Chapter 9 

Building & Submitting 

                               507 

----------------------- Page 509-----------------------

Preparing Assets 

At this point you should have your application built, working, and ready for submission to the app store. 

There’sjustacouplethingswearegoingtodobeforehandthoughtomakesureourapplicationisin“ship 

shape” before shipping it off to the app stores. 

You may be following along and building your own application whilst reading this book, but chances are 

you’ve been building one of the example applications. In that case, I’d still recommend you go through 

thesesteps,oratleastreadthem,sothatyoulearnhowthesubmissionprocessworks. Idohoweverask 

that you stop short of actually submitting the application to app stores, I’m happy for you to use bits and 

pieces of code as you see fit in your own applications, but you can’t submit an exact copy of one of the 

example applications to the app store. 

Generate Icons and Splash Screens 

There’s so many different devices out there with different screen sizes and resolutions, and we need to 

cater to all of these when creating our applications icon and splash screen. 

Nobody in their right mind would be excited by the chance to make 50 different versions of the same 

file. Luckily there’s a very easy, almost completely automated, option provided by Ionic. We can use the 

ionic  resources commandtogeneratetheseforus. AlthoughIonicdoesalotforyoubutitcan’tquite 

yet design your graphical resources for you, so there’s a little set up work we need to do. 

Design your icon 

The Ionic resources tool only requires a single 192 x 192 icon as a base, but since the app store requires 

a larger icon anyway it’s best to design it at 1024 x 1024 first (or even 2048 x 2048). For the most part, 

scalingdownlargeimagesintosmalliconsworkswell,butifyouwantareallycrisplookingiconitmaybe 

worth designing a smaller version of your icon specifically. 

                                                    508 

----------------------- Page 510-----------------------

> Create a 192 x 192 icon called icon .png andsave itinside ofthe resources folder(overwriting 

the existing icon) 

Design your splash screen 

Iconsaregreatbecausetheyarealwayssquare. Splashscreensunfortunatelycomeinallsortsofshapes 

and sizes. This means that you’re either going to have to make your design flexible, or make different 

designs for each individual splash screen size. 

What’s a “flexible” design? Well, that’s just what I’ve decided to call a design that will play nicely with 

Ionic’sresourcetool. Ifyoudesignthesplashscreenat2208x2208thenallofyoursplashscreensshould 

all automatically generate nicely. 

Theproblemisthoughthatthereisalwaysgoingtobeadegreeofcroppingthatoccurs-somescreensare 

tall and some screens are wide. To avoid important parts of your design getting chopped off you should 

make sure to place the important parts of the design near the center of the image, and the bits near the 

edges should be unimportant (e.g just part of a back- ground image). 

> Grab the splash-screen-template.psd or splash-screen-template.png file from your download 

pack. Createyourown2208x2208splashscreenbasedonthistemplateandsaveitas splash .png 

in the resources folder along with the icon.png file you created previously. 

Run the resources tool 

Now that you have the base icon and splash screen created, you can create all of the rest of the splash 

screens and icons by running the following command: 

ionic  resources 

                                                     509 

----------------------- Page 511-----------------------

Set the Bundle ID and App Name 

An important step before building is to set your App Name and the Bundle ID in your config.xml file. If 

you take a look at the first few lines of this file you will see this: 

<?xml  version='1.0'  encoding='utf-8'?> 

<widget  id="io .ionic .starter" version="0.0.1" 

     xmlns="http ://www .w3 .org/ns/widgets" 

     xmlns :cdv="http ://cordova .apache .org/ns/1.0"> 

      <name>V2  Test</name> 

      <description>An  Ionic  Framework  and  Cordova  project .</description> 

      <author  email="hi@ionicframework" href="http ://ionicframework .com/">Ionic 

          Framework  Team</author> 

You should update these details to reflect your own, including the id which is currently io.ionic.starter. 

This will need to match the values you use to sign your application in the next lessons, and should be set 

to something like com.yourname.yourproject. You will likely also want to set the version to 1.0.0 when 

you are releasing your application for the first time. 

Set Cordova Preferences 

This is not an essential step but you can also provide some preferences in your config.xml file which will 

affect how it is built. There are some defaults included in the config.xml file like this: 

      <preference  name="webviewbounce" value="false" /> 

      <preference  name="UIWebViewBounce " value="false" /> 

      <preference  name="DisallowOverscroll" value="true" /> 

      <preference  name="android-minSdkVersion " value="16" /> 

      <preference  name="BackupWebStorage" value="none" /> 

But there are a ton more preferences you can specify, take a look here for more information. 

                                                    510 

----------------------- Page 512-----------------------

Minify Assets 

This is also an optional step but an important one I think. You want to keep your final build sizes down 

as much as possible and one way to help do that is to minify all of your images using a tool like TinyPNG. 

Just run your images through the tool and save them back into your project. 

                                                    511 

----------------------- Page 513-----------------------

Signing iOS Applications on a Mac or PC 

iOS and Android applications need to be ‘signed’. The idea is similar to a normal signature, in that it 

proves you authorize the action being taken and that you have the authority to do so. Signing works 

slightly differently for both platforms. 

iOSapplicationswillrequirea .p12 filewhichismadeupofakeyandeitheradevelopmentordistribution 

certificate. As well as the .p12 file, you will also need to create a provisioning profile. The purpose of 

the .p12 file is to identify you as an iOS developer, and the provisioning profile identifies the application, 

services and devices thatareallowed to installthe application. Itis quite a process to getallthese things 

in order, but if you just follow this guide step by step you shouldn’t have too many problems. 

If you have a Mac you can use XCode to handle some of this process automatically, but I will be going 

through everything step by step so that you can use alternate methods to build if you do not have a Mac. 

Before you get started you will need to be enrolled in the iOS Developer Program. 

Signing iOS Applications on a Mac 

If you have a Mac you should follow these steps, if not skip this section and start reading Signing iOS 

Applications on Windows. You should make sure you have XCode installed before you begin. 

Generate a Certificate Signing Request 

     • Open Keychain Access 

     • Go to Keychain Access > Preferences: 

                                                      512 

----------------------- Page 514-----------------------

* Go to the Certificates tab and make sure both options are switched off
 * Now go to Keychain Access 

> Certificate Assistant > Request a Certificate From a Certificate Authority * Fill in the details in this 

window and select Saved to disk and Let me specify key pair information: 

                                                   513 

----------------------- Page 515-----------------------

Click continue and choose a location to save the file on your machine
 On the next screen choose 2048 

bits and RSA: 

Thecertificatesigningrequestwillnowbesavedinthefolderyouspecifiedandyouwillalsonoticethata 

public and private key pair will be created in Keychain Access: 

Create a Certificate 

Tocompletethesenextstepsyouwillneedtologintothe AppleMemberCenter andgotothe Certificates, 

Identifiers & Profiles section: 

                                                   514 

----------------------- Page 516-----------------------

* Choose Certificates under iOS Apps
 * Click the + button in the top right corner: 

Next you must choose what type of certificate you want to generate. If you are creating a certificate 

for testing applications then you should choose iOS App Development but if you are preparing an 

application for distribution on the App Store then you should choose App Store and Ad Hoc. 

                                                   515 

----------------------- Page 517-----------------------

You will also notice some other options on this screen. You will need to create separate certificates if 

you want to use things like the Apple Push Notifications service or WatchKit, but we won’t require any of 

those. 

      • Select your certificate type and click Continue
 

      • It will now ask you for the certificate signing request you just created with Keychain Access, click 

        continue and then upload the signing request. Once you have selected the .certSigningRequest 

        file click Generate.
 

You will now be able to download your certificate. Download it to somewhere safe and then open it to 

install it. 

                                                             516 

----------------------- Page 518-----------------------

Create an Identifier 

If you’re managing your app using XCode then you don’t necessarily need to worry about these step as 

XCode can use a Wildcard App ID, but you can also create your own App ID manually (the Bundle ID 

created here will match what is in your config.xml file). Here’s how you do it: 

     • Click on App IDs and then click the + icon 

* Fill in the App ID Description and then supply an Explicit App ID like the following: 

This should match the id that you supply in your config.xml file. 

     • Go to the bottom of the screen and click Continue
 

     • On the following screen click Submit 

                                                     517 

----------------------- Page 519-----------------------

TheAppIDshouldnowberegisteredandavailabletoyoutouseinprovisioningprofiles,whichwewilldo 

in the next step. 

Create a Provisioning Profile 

Before you create a provisioning profile you will need to add devices that the application can run on. 

     • Click on Devices and then click the + button in the top right: 

*SupplythenameandUDID(youcanfindthisforyourdeviceiniTunes)ofthedeviceyouwanttoregister 

and then click Continue. Follow the prompts to finish. 

Now we can create the provisioning profile. 

*Go to the provisioning profiles screen and click the + icon in the top right 

* Choose iOS App Development if you are creating a provisioning profile for testing, or App Store if you 

are creating a provisioning profile for distribution. Click Continue.
 * Select the App ID you just created 

and click Continue: 

                                                      518 

----------------------- Page 520-----------------------

* Select the certificate you wish to use and click Continue: 

* Select all the devices you want to run the application on and click Continue: * Provide a name for the 

provisioning profile and click Generate: 

                                                   519 

----------------------- Page 521-----------------------

You should now be able to download your Provisioning Profile. 

Generating a .p12 

A .p12 file (along with the provisioning profile) is required along with the provisioning profile for services 

like PhoneGap Build. Since you have a Mac this step is not really relevant to you, however you can still 

use a service like PhoneGap Build if you would like (I wouldn’t recommend it). If you do need to create a 

.p12 file on your Mac, here’s how you do it: 

     • Open Keychain Access 

     • Backinthefirststepwhenwecreatedthecertificatesigningrequest,Imentionedthatapublicand 

        private key pair would be generated in Keychain Access. Find this in the Keys section:
 

YouwillseenowthattheprivatekeyalsohasthecertificateyoucreatedintheiOSMemberCenterattached 

to it. 

                                                          520 

----------------------- Page 522-----------------------

     • Highlight both the private key and the certificate, right click and choose Export 2 items…: 

*Youwillthenbeaskedwhereyouwouldliketosavethefileandyoumaychoosetoenterapasswordfor 

the .p12 file or leave it blank. You may also be asked to enter in the Admin password for your computer. 

Congrats! You now have your .p12 file. 

Signing iOS Applications on Windows 

TocompletethefollowingstepsyouwillneedtodownloadandinstallOpenSSL.VisittheOpenSSLwebsite: 

https://www.openssl.org/source/ 

and download the version appropriate for your system. 

Generate a Certificate Signing Request 

OnceyouhaveOpenSSLsetupwearegoingtouseittogenerateaCertificateSigningRequest. Thiswill 

be used in the iOS Member Center to create either our development or distribution certificate. 

     • Change your directory to the OpenSSL bin directory in the command prompt, e.g: 

cd  c :/OpenSSL-Win64/bin 

     • Generate a private key 

openssl  genrsa  -out  mykey .key  2048 

     • Use that key to generate a certificate signing request 

openssl  req  -new  -key  mykey .key  -out myCSR .certSigningRequest  -subj 

     "/emailAddress=you@yourdomain .com, CN=Your  Name , C=AU" 

                                                   521 

----------------------- Page 523-----------------------

Make sure to replace the email address, name and country code with your own. 

Create a Certificate 

Tocompletethesenextstepsyouwillneedtologintothe AppleMemberCenter andgotothe Certificates, 

Identifiers & Profiles section: 

* Choose Certificates under iOS Apps
 * Click the + button in the top right corner: 

Next you must choose what type of certificate you want to generate. If you are creating a certificate 

for testing applications then you should choose iOS App Development but if you are preparing an 

application for distribution on the App Store then you should choose App Store and Ad Hoc. 

                                                   522 

----------------------- Page 524-----------------------

You will also notice some other options on this screen. You will need to create separate certificates if 

you want to use things like the Apple Push Notifications service or WatchKit, but we won’t require any of 

those. 

     • Select your certificate type and click Continue
 

     • ItwillnowaskyouforthecertificatesigningrequestyoujustcreatedwithOpenSSL,clickcontinue 

       and then upload the signing request. Once you have selected the .certSigningRequest file click 

       Generate.
 

Youwillnowbeabletodownloadyourcertificate. Downloadittosomewheresafeandthenopenittoinstall 

it (for convenience, you should place it in your OpenSSL bin folder (e.g. OpenSSL-Win64/bin because 

this is where we will be running some commands later). 

                                                   523 

----------------------- Page 525-----------------------

Create an Indentifier 

     • Click on App IDs and then click the + icon 

* Fill in the App ID Description and then supply an Explicit App ID like the following: 

This should match the id that you supply in your config.xml file. 

     • Go to the bottom of the screen and click Continue
 

     • On the following screen click Submit 

TheAppIDshouldnowberegisteredandavailabletoyoutouseinprovisioningprofiles,whichwewilldo 

in the next step. 

                                                      524 

----------------------- Page 526-----------------------

Create a Provisioning Profile 

Before you create a provisioning profile you will need to add devices that the application can run on. 

     • Click on Devices and then click the + button in the top right: 

*SupplythenameandUDID(youcanfindthisforyourdeviceiniTunes)ofthedeviceyouwanttoregister 

and then click Continue. Follow the prompts to finish. 

Now we can create the provisioning profile. 

     • Go to the provisioning profiles screen and click the + icon in the top right 

* Choose iOS App Development if you are creating a provisioning profile for testing, or App Store if you 

are creating a provisioning profile for distribution. Click Continue.
 * Select the App ID you just created 

and click Continue: 

* Select the certificate you wish to use and click Continue: 

                                                    525 

----------------------- Page 527-----------------------

* Select all the devices you want to run the application on and click Continue * Provide a name for the 

provisioning profile and click Generate 

YoushouldnowbeabletodownloadyourProvisioningProfile(again,downloaditintothatsameOpenSSL 

bin folder to make things easier in this next step). 

                                                       526 

----------------------- Page 528-----------------------

Generating a .p12 

Finally, to create the .p12 file we will use the certificate we downloaded from the Member Center and a 

couple more commands. 

     • Run the following command to generate a PEM file: 

openssl  x509  -in  ios_development .cer  -inform  DER  -out  app_pem_file .pem 

-outform  PEM 

     • Use the key you generated right back at the beginning and the PEM file you just created to create 

       your .p12 file: 

openssl  pkcs12  -export  -inkey  mykey .key  -in  app_pem_file .pem  -out  app_p12 .p12 

There’s a lot of things that can go wrong here and it’s easy to mess up. So if you have any trouble I 

would suggest just restarting the whole process and slowly and carefully make sure you type everything 

out correctly. 

Congrats! You now have your .p12 file. Since you have both your provisioning profile and .p12 file now, if 

you are using PhoneGap Build you will be able to attach these files to your application when you upload 

it. Onceyouhavedonethatyoushouldbeabletogenerateasigned .ipa filethatcanbeinstalledonyour 

device (as long as you added your device and have followed all these steps correctly!). 

We will discuss exactly how to build with PhoneGap Build shortly. 

                                                      527 

----------------------- Page 529-----------------------

Signing Android Applications on a Mac or PC 

As I mentioned before, Android is a little different to iOS (and a bit easier fortunately). iOS requires that 

you create certificates and provisioning profiles for both development and production applications. 

Androidhowever,willletyouinstalla‘debug’applicationonatestingdevicewithouthavingtogothrough 

this process. You will only need to sign your application when you want to release it on Google Play. 

Android requires that you create a ‘keystore’ file to sign your application with. 

Signing an Android Application 

It is considerably easier to sign an Android application and, as I mentioned before, you don’t even need 

to sign the application if you just want to test it (only if you are releasing it to Google Play). To sign our 

Android application we will need to create a keystore file. 

Tosignapplicationswewillbeusingatoolcalled keytool thatcomeswiththeAndroidSDK.Ifyoudonot 

have the Android SDK set up on your machine already you can follow this guide: 

http://ionicframework.com/docs/ionic-cli-faq/#android-sdk 

Once you have the Android SDK set up, you can follow these steps to create a keystore file. 

     • Run the following command to generate a keystore file with an alias of alias_name (you should 

       change this) 

keytool  -genkey  -v  -keystore  my-release-key .keystore  -alias  alias_name 

-keyalg  RSA  -keysize  2048  -validity              10000 

Whenyouenterthiscommandyouwillbepromptedforapassword-chooseoneandmakesuretostore 

or remember it. You will then be asked a series of questions, most of which you can leave blank if you 

wish. Finally, you will be asked for a keystore password. 

Youwillnowhaveakeystorefilethatyoucanusetosignyourapplication(wewilldiscusshowthatworks 

                                                     528 

----------------------- Page 530-----------------------

later). 

IMPORTANT: In order to update your application on the app store later you will need both the keystore 

file, along with the alias name and password. If you lose any of these you will not be able to update the 

application. 

Generating a Key Hash 

IfyouareusingFacebookfunctionalitythatrequirescreatingaFacebookapplicationwhichyouwouldhave 

doneifyoucompletedtheCamperChatapplicationinthisbook(onlyavailableintheExpertpackage)then 

you will need to create a Key Hash from your keystore file to supply to Facebook for Android. 

Doing that is simple enough, all you need to do is run the following command: 

keytool  -exportcert  -alias  alias_name  -keystore  my-release-key .keystore                                   | 

openssl  sha1  -binary           | openssl  base64 

Make sure to replace alias_name with your own keystore files alias name and my-release-key.keystore 

with the path to your keystore file. 

Once you have done this your Key Hash will be output to the terminal, and then you can simply copy it 

over to the Android platform settings in your Facebook application. 

                                                         529 

----------------------- Page 531-----------------------

Building for iOS & Android Using PhoneGap Build (without MAC) 

TherearetwowaysyoucanincorporateCordova/PhoneGapintoyourapplications,youcaneitherusea 

locally installed version through the command line or you can use the PhoneGap Build cloud service. 

The choice should be simple: 

     • If you have a Mac: use Cordova locally 

     • If you’re not building an iOS application: use Cordova locally 

     • If you do not have a Mac and want to create iOS applications: use PhoneGap Build 

The PhoneGap Build service will allow you to create 1 private application for free. You can keep deleting 

andreusingthisallowancetobuildmultipleapplicationsifyoulike,butifyoueverwanttomanagemultiple 

applications in PhoneGap Build at the same time then you will need to purchase a subscription. 

IMPORTANT: Unless you fit into that 3rd option (No Mac but want to build for iOS) you should SKIP 

THIS LESSON 

PhoneGapBuildisagreatservice,butyoushouldalwaysusealocalinstallationofCordovawherepossible. 

The advantages of using Cordova locally are: 

     • Build times are quicker since you don’t need to the PhoneGap Build server and then download the 

       resulting .ipa (and .apk for Android) files 

     • Youdon’tneedtouseyourdatatodownloadanduploadthefilesandyouwon’trequireanInternet 

       connection for development 

     • You have access to a wider range of plugins 

     • You have more control over the application (you have direct access to the native wrapper, rather 

       than just the web files) 

     • PhoneGap Build requires payment if you want more than 1 private repository 

I did mention that PhoneGap Build can be used to build iOS applications without a Mac. It can also be 

usedtocreateAndroidapplicationswithouttheAndroidSDK.Thisiswhyitdoesn’tmatterwhatoperating 

system you are using, since all of the compilation happens on PhoneGap Build’s servers. 

                                                     530 

----------------------- Page 532-----------------------

When using PhoneGap Build you are able to upload your application code (purely web based code, i.e: 

HTML, CSS and JavaScript) and have compiled application files returned for iOS and Android (as well as 

for Windows Phone). The general process looks something like this: 

    1. Build your application 

    2. Create a config.xml file that tells PhoneGap Build how your application should be built 

    3. Zip up your application 

    4. Upload to PhoneGap Build 

    5. Download the resulting native packages 

Compilation and the integration of SDK’s are handled on their end, which makes this approach much 

easier initially than getting everything set up correctly on your machine (but harder in the long run). Most 

importantly it makes it possible to create iOS applications without a Mac. 

By this point you should have an application finished and ready to build, so let’s walk through how to do 

that with PhoneGap Build. 

Building with PhoneGap Build 

WhenuploadingtoPhoneGapBuildweonlywanttoincludethebuiltwebfiles,thatiseverythinginsideof 

the www folderin yourproject. Allthe restofthe files and folders aremainly forconfiguring Cordova and 

the build process which we don’t need when using PhoneGap Build. 

There’s a couple of little changes we need to make before uploading to PhoneGap Build. 

Create a config.xml file 

Asyoumayalreadybeaware,yourprojectcontainsa config.xml filethatisusedforconfiguringhowyour 

application is built with Cordova. We still need this file, but the one required by PhoneGap Build is a bit 

different. 

                                                     531 

----------------------- Page 533-----------------------

WARNING: Thenextcodeblockishugeandhardtoreadinthisformat,soifyoupreferyoucanjustcopy 

the code from the example PhoneGap Build application that came with your download pack. 

> Create a file at www/config .xml and add the following 

<?xml  version="1.0" encoding="UTF-8" ?> 

     <!--  Change  the id  to something  like com.yourname .yourproject  --> 

     <widget  xmlns      =  "http ://www .w3 .org/ns/widgets" 

          xmlns :gap     = "http ://phonegap .com/ns/1.0" 

          id             =  "com .example .project" 

          versionCode  =    "10" 

          version        =  "1.0" > 

     <!-- versionCode  is  optional  and Android  only  --> 

     <name>App  Name</name> 

     <description> 

          Description 

     </description> 

     <author  href="http ://www .example .com" email="you@yourdomain .com"> 

          Your  Name 

     </author> 

     <plugin  name="cordova-sqlite-storage"  source="npm" /> 

     <plugin  name="com .phonegap .plugin .statusbar"  source="pgb" /> 

     <plugin  name="org .apache .cordova .splashscreen"  source="pgb" /> 

     <plugin  name="com .indigoway .cordova .whitelist .whitelistplugin" 

         source="pgb" /> 

                                               532 

----------------------- Page 534-----------------------

<preference  name="prerendered-icon" value="true" /> 

<preference  name="target-device" value="universal" /> 

<preference  name="android-windowSoftInputMode" value="stateAlwaysHidden" 

    /> 

<icon  src="resources/android/icon/drawable-ldpi-icon .png" 

   gap:platform="android" gap:qualifier="ldpi"/> 

<icon  src="resources/android/icon/drawable-mdpi-icon .png" 

   gap:platform="android" gap:qualifier="mdpi "/> 

<icon  src="resources/android/icon/drawable-hdpi-icon .png" 

   gap:platform="android" gap:qualifier="hdpi"/> 

<icon  src="resources/android/icon/drawable-xhdpi-icon .png" 

   gap:platform="android" gap:qualifier="xhdpi"/> 

<icon  src="resources/android/icon/drawable-xxhdpi-icon .png" 

   gap:platform="android" gap:qualifier="xxhdpi"/> 

<icon  src="resources/android/icon/drawable-xxxhdpi-icon .png" 

   gap:platform="android" gap:qualifier="xxxhdpi"/> 

<icon  src="resources/ios/icon/icon .png" gap:platform="ios" width="57" 

   height="57"/> 

<icon  src="resources/ios/icon/icon@2x .png" gap:platform="ios" width="114" 

   height="114"/> 

<icon  src="resources/ios/icon/icon-40.png" gap:platform="ios" width="40" 

   height="40"/> 

<icon  src="resources/ios/icon/icon-40@2x .png" gap:platform="ios" 

   width="80" height="80"/> 

<icon  src="resources/ios/icon/icon-50.png" gap:platform="ios" width="50" 

   height="50"/> 

<icon  src="resources/ios/icon/icon-50@2x .png" gap:platform="ios" 

   width="100" height="100"/> 

                                    533 

----------------------- Page 535-----------------------

<icon  src="resources/ios/icon/icon-60.png" gap:platform="ios" width="60" 

   height="60"/> 

<icon  src="resources/ios/icon/icon-60@2x .png" gap:platform="ios" 

   width="120" height="120"/> 

<icon  src="resources/ios/icon/icon-60@3x .png" gap:platform="ios" 

   width="180" height="180"/> 

<icon  src="resources/ios/icon/icon-72.png" gap:platform="ios" width="72" 

   height="72"/> 

<icon  src="resources/ios/icon/icon-72@2x .png" gap:platform="ios" 

   width="144" height="144"/> 

<icon  src="resources/ios/icon/icon-76.png" gap:platform="ios" width="76" 

   height="76"/> 

<icon  src="resources/ios/icon/icon-76@2x .png" gap:platform="ios" 

   width="152" height="152"/> 

<icon  src="resources/ios/icon/icon-small .png" gap:platform="ios" 

   width="29" height="29"/> 

<icon  src="resources/ios/icon/icon-small@2x .png" gap:platform="ios" 

   width="58" height="58"/> 

<gap:splash  src="resources/android/splash/drawable-land-ldpi-screen .png" 

   gap:platform="android" gap:qualifier="land-ldpi"/> 

<gap:splash  src="resources/android/splash/drawable-land-mdpi-screen .png" 

   gap:platform="android" gap:qualifier="land-mdpi "/> 

<gap:splash  src="resources/android/splash/drawable-land-hdpi-screen .png" 

   gap:platform="android" gap:qualifier="land-hdpi"/> 

<gap:splash  src="resources/android/splash/drawable-land-xhdpi-screen .png" 

   gap:platform="android" gap:qualifier="land-xhdpi"/> 

<gap:splash 

    src="resources/android/splash/drawable-land-xxhdpi-screen .png" 

   gap:platform="android" gap:qualifier="land-xxhdpi"/> 

                                    534 

----------------------- Page 536-----------------------

<gap:splash 

    src="resources/android/splash/drawable-land-xxxhdpi-screen .png" 

   gap:platform="android" gap:qualifier="land-xxxhdpi"/> 

<gap:splash  src="resources/android/splash/drawable-port-ldpi-screen .png" 

   gap:platform="android" gap:qualifier="port-ldpi"/> 

<gap:splash  src="resources/android/splash/drawable-port-mdpi-screen .png" 

   gap:platform="android" gap:qualifier="port-mdpi "/> 

<gap:splash  src="resources/android/splash/drawable-port-hdpi-screen .png" 

   gap:platform="android" gap:qualifier="port-hdpi"/> 

<gap:splash  src="resources/android/splash/drawable-port-xhdpi-screen .png" 

   gap:platform="android" gap:qualifier="port-xhdpi"/> 

<gap:splash 

    src="resources/android/splash/drawable-port-xxhdpi-screen .png" 

   gap:platform="android" gap:qualifier="port-xxhdpi"/> 

<gap:splash 

    src="resources/android/splash/drawable-port-xxxhdpi-screen .png" 

   gap:platform="android" gap:qualifier="port-xxxhdpi"/> 

<gap:splash  src="resources/ios/splash/Default-568h@2x~iphone .png" 

   gap:platform="ios" width="640" height="1136"/> 

<gap:splash  src="resources/ios/splash/Default-667h .png" width="750" 

   gap:platform="ios" height="1334"/> 

<gap:splash  src="resources/ios/splash/Default-736h .png" width="1242" 

   gap:platform="ios" height="2208"/> 

<gap:splash  src="resources/ios/splash/Default-Landscape-736h .png" 

   gap:platform="ios" width="2208" height="1242"/> 

<gap:splash  src="resources/ios/splash/Default-Landscape@2x~ipad .png" 

   gap:platform="ios" width="2048" height="1536"/> 

<gap:splash  src="resources/ios/splash/Default-Landscape~ipad .png" 

   gap:platform="ios" width="1024" height="768"/> 

                                    535 

----------------------- Page 537-----------------------

     <gap:splash  src="resources/ios/splash/Default-Portrait@2x~ipad .png" 

          gap:platform="ios" width="1536" height="2048"/> 

     <gap:splash  src="resources/ios/splash/Default-Portrait~ipad .png" 

          gap:platform="ios" width="768" height="1024"/> 

     <gap:splash  src="resources/ios/splash/Default@2x~iphone .png" 

          gap:platform="ios" width="640" height="960"/> 

     <gap:splash  src="resources/ios/splash/Default~iphone .png" 

          gap:platform="ios" width="320" height="480"/> 

     <!-- Default  Icon  and Splash  --> 

     <icon  src="resources/icon .png" /> 

     <gap:splash  src="resources/splash .png" /> 

     <access  origin="*"/> 

</widget> 

This file is specific for the Quicklists application - notice how we’ve got a few lines that include plugins? 

ThewaypluginsareincludedwithPhoneGapBuildisdifferenttoCordova. Youmayrememberatthestart 

of building each application we run a bunch of commands like this: 

ionic  plugin  add     [plugin  name] 

tosetuptheplugins. Thissetsupthepluginlocallyintheproject,buttouseapluginwithPhoneGapBuild 

we need to specific it in our new config.xml file like this: 

     <plugin  name="cordova-sqlite-storage"  source="npm" /> 

     <plugin  name="com .phonegap .plugin .statusbar"  source="pgb" /> 

     <plugin  name="org .apache .cordova .splashscreen"  source="pgb" /> 

     <plugin  name="com .indigoway .cordova .whitelist .whitelistplugin" 

          source="pgb" /> 

                                                 536 

----------------------- Page 538-----------------------

Althoughmostare,notallpluginsareavailableforPhoneGapBuild. Whenaddingthepluginsforaproject, 

just search for the PhoneGap Build installation instructions, most plugins will include information on what 

you need to include for PhoneGap Build. So if you are building any of the applications in this book with 

PhoneGap Build, you should look in the Getting Ready section and make sure to include any plugins we 

are using in this config.xml file. 

Alsomakesureyouremembertoreplacethe idatthetopwithyourownBundleID,i.e: com .yourproject .yourname. 

Copy the Resources 

Theothermaindifferenceisthewaytheresources(splashscreensandicons)areincluded. Wealsoneed 

toaddreferencestothesetoour config.xml fileandweneedtocopyoverourresourcesbecausecurrently 

they live outside of the www folder (so they wouldn’t be included in our upload) 

       Copy the resources folder inside of the www folder 

As well as copying over the resources, you should also save a blank file with the name .pgbomit inside 

of the resources folder. This tells PhoneGap Build that the files in this folder should only be used for the 

splash screens and icons, and shouldn’t be made available in the application (which would take up a lot 

of space). 

Upload to PhoneGap Build 

Now that we’ve got everything ready, you just need to zip up the contents of the www folder (NOT the 

www folder itself) and upload it to PhoneGap Build. If you do not already have an account you will have 

to create one at build.phonegap.com. 

Onceyouhaveanaccountsimplycreateanewappanduploadthe.ziparchiveyoujustcreatedandclick 

‘Ready to Build’. The iOS build will fail initially but the Android version should succeed. This is because 

you don’t need to sign an Android application during development, but you do for iOS. 

When you’re building your release version, or if you want to download the iOS version, you will have to 

                                                    537 

----------------------- Page 539-----------------------

upload the signing keys you created in the last chapters. This means you will need to attach the .p12 file 

and the Provisioning Profile to your iOS build, and the keystore file to your Android build. 

Oncetheapplicationshavefinishedbuilding,youwillbeabletodownloadyour .ipa fileforiOSanda .apk 

file for Android. We will discuss how to get these on the app stores in just a moment. 

                                                    538 

----------------------- Page 540-----------------------

Submitting to the Apple App Store 

The time has finally come to send our application off to apple! Before submitting your application make 

sure that you familiarise yourself with the App Store Review Guidelines - if you don’t comply with these 

guidelines your application may be rejected. 

NOTE: Donotfollowthesestepsuntilyouhavecreatedyourownapplication-Youshouldnotuploadany 

example applications from this book. 

TosubmitanapplicationtotheAppStoreyouwillneedtocreateanAppStoreListingandofcourseupload 

your application. 

Creating an App Store Listing 

Let’s start by walking through how to create an App Store Listing. There’s quite a few things you need to 

do but it’s pretty straight forward. 

     • Log into iTunes Connect
 

     • Go to My Apps
 

     • Select the + icon on the left and then choose New iOS App
 

     • Fill out the details on this prompt and then click Create: 

                                                      539 

----------------------- Page 541-----------------------

If you’re using XCode to submit your application you can use Xcode iOS Wildcard App ID, or otherwise 

youcanchoosethespecificBundleIDyoucreatedforyourapplicationintheiOSCertificateslesson. The 

SKU does not need to be anything specific, it is just for your own reference and the Bundle ID Suffix 

should match the id you specified in your config.xml file. 

You should now see your application in the dashboard: 

                                                 540 

----------------------- Page 542-----------------------

* Open your new application in iTunes Connect and you should see a dashboard like this: 

                                                   541 

----------------------- Page 543-----------------------

* Fill out all the information on this page (including multiple screenshots for the different sized devices) 

NOTE:YouwillnoticeaBuildsectiononthispage. Youwillhavetocomebacktothissectionafteryouhave 

uploaded your application (which we will do in the next section) and select the build you have uploaded. 

     • Click the Pricing tab and fill out the following information: 

                                                      542 

----------------------- Page 544-----------------------

If you want to release a paid application you will need to have accepted additional agreements within 

iTunes Connect. 

Uploading the Application 

There’s a few ways to do this and the way you do it will depend on what format your application is in and 

what operating system you are using. To submit an iOS application for distribution through the app store 

youwillneedyourappsignedwithadistributioncertificate,andagain,thewayyoudothiswilldependon 

the method you are using. 

Onceyouuploadyourapplicationyoushouldbeabletoseeitinthe Build sectioniniTunesConnectand 

will be able to attach it to your app store listing. 

Submitting an app using XCode 

IfyouhaveaMacthenyoucanuseXCodetosubmittheapplication,whichisaprettystraightforwardway 

to do it. If you do not have a Mac and instead have a .ipa file generated from using PhoneGap Build you 

should skip to the Submitting an app using Application Loader section. 

Before continuing you should run the following command within your project directory: 

ionic  build       ios 

Converting a .xcodeproj file to .xcarchive 

Ifyouhavea .xcodeproj file(whichwillbegeneratedwhenyourunthebuildcommand)youwillfirstneed 

to generate a .xcarchive file from it. To do that then you will need to follow these steps: 

     • Open your .xcodeproj file (located in platforms/ios/snapaday.xcodeproj) in XCode by double 

       clicking it 

     • Go to Product > Scheme > Edit Scheme and make sure that the archive is set to a Release 

       configuration: 

                                                        543 

----------------------- Page 545-----------------------

* Make sure you have iOS Device or Generic iOS Device selected in the top toolbar, not an emulator: 

* Choose Product > Archive 

Uploading a .xcarchive file 

If you want to submit a .xcarchive first double click it to open this screen in XCode (this screen should 

also automatically open after you Archive your app): 

                                                   544 

----------------------- Page 546-----------------------

FirstyouwillwanttochooseyourarchiveandthenclicktheValidate… buttontomakesurethateverything 

is set up correctly. You should be given the option to choose your account: 

and then you will see your application displayed. Click Validate and if everything is set up correctly you 

should see this prompt: 

                                                    545 

----------------------- Page 547-----------------------

If validation does not work, make sure: 

     • You have set up your application in iTunes Connect 

     • You have followed the instructions in the iOS Certificates lesson 

     • The id in your config.xml matches the Bundle ID Suffix in iTunes Connect 

Once you have successfully validated your project click Done and then choose Submit to App Store… 

or Upload to App Store…: 

Youwillnowgothroughthatsameprocessagain,exceptthistimeyouwillchoose Submit. Onceyouclick 

Submit your application will begin uploading to iTunes Connect: 

                                                   546 

----------------------- Page 548-----------------------

Submitting an app using Application Loader 

If you do not have a Mac then your only option to submit an application is to submit the built and signed 

.ipa file. Remember,this .ipa fileshouldbesignedwithadistributioncertificateinsteadofadevelopment 

certificate if you are submitting it to the app store. 

If you do not already have a signed .ipa file, make sure to read the PhoneGap Build lesson. 

Youcanuseaprogramcalled ApplicationLoader tosubmita .ipafiletoiTunesConnect,butunfortunately 

thisprogramisonlyavailableonMacs. Literallytheonlythingyoucan’tdowhenbuildingiOSapplications 

on a Windows machine is upload the final file, how frustrating. 

There are ways around this though, and my two favourites are: 

     • Borrow a friends Mac. You will only need it for about 5 minutes, so if you know anyone who has a 

       Macjustshoveyour .ipa fileonaUSBstick,downloadApplicationLoaderontheirMacandupload 

                                                      547 

----------------------- Page 549-----------------------

       your application
 

     • Macincloud.com allows you to log in remotely to a Mac. This service does cost, but if you just buy 

       some prepaid credits it’s pretty cheap and since you will only ever be on there for a few minutes at 

       a time the credit will last ages (this is what I did before I got a Mac). 

Once you’ve figured out how you’re going to access Application Loader, open it up and log into your iOS 

Developer account then choose Deliver Your App: 

* Upload the .ipa file that is signed with a distribution certificate and then click Next 

Your application will now begin uploading to iTunes Connect: 

                                                       548 

----------------------- Page 550-----------------------

Submit for Review 

Once you have uploaded your application, either through XCode or Application Loader, you will need to 

finish up your app store listing in iTunes Connect. Go back to your application in iTunes Connect and go 

to the Build section: 

Youshouldnowseea + iconasshownabove. Clickthis,selectthebuildyoujustuploadedandhit Done: 

                                                     549 

----------------------- Page 551-----------------------

Double check everything in your listing, then go back to the top of the page, hit Save and then Submit 

for Review: 

to submit your application to Apple. Now you just have to cross your fingers and wait! The Apple review 

process usually takes around 5-10 days, which is a frustratingly long time. There’s nothing you can do 

about it though but sit back and wait. Just make sure that you are complying with all of Apples rules and 

guidelines so that your app does not get rejected (otherwise you will have to fix it and wait another 5-10 

days!). 

                                                      550 

----------------------- Page 552-----------------------

Submitting to Google Play 

Ifyou’vebeenthroughthenightmareofsigninganiOSapplicationandsubmittingittotheAppleAppstore 

thenyouareinforatreat. SubmittingtoGooglePlayissupereasybycomparison. Beforeyougetstarted, 

you will have to sign up as a Google Play Developer. 

Remember, before submitting to Google Play you must sign your .apk with a keystore file. 

IMPORTANT: IfyouareusingtheCrosswalkplugin,thenyouwillhavetwo.apkfilesgeneratedwhenyou 

build. The process for submitting is still mostly the same, but make sure you read the note at the end of 

this lesson about how you can upload both .apk files with the same submission. 

Creating a Build for Android 

UnlikewithiOS,itdoesn’tmatterwhetheryouhaveaMacorPC,youwillbeabletousethesamemethod 

forboth. However,ifyouareusingaPCandarealsobuildinganiOSapplicationthenthatmeansyouwill 

haveusedPhoneGapBuildtodothat,sinceyouarealreadyusingPhoneGapBuildthenitmakessenseto 

use it for Android to. So I would recommend using PhoneGap Build to build for Android if you don’t have 

a Mac, unless you are only building for Android. 

If you are using PhoneGap Build then you will already have a signed .apk file, in which case you can skip 

tothenextsection SubmittingyourApplicationtoGooglePlay. Ifyoudonotalreadyhaveasigned.apk 

file make sure to follow these steps. 

> Create a file at platforms/android/release-signing .properties and add the following: 

storeFile=snapaday-release .keystore 

keyAlias=snapaday 

Thisfiletellsthebuildprocesshowwewanttheapplicationtobesigned. Hereyouwillsupplythe keystore 

file you generated in the signing lesson, as well as the alias of the keystore. The first line should be the 

pathtowherethekeystorefileisstored,forsimplicityImovethekeystorefiletothesamelocationasthis 

file, however you can also specify a different path if you want. The second line is the alias name. 

                                                    551 

----------------------- Page 553-----------------------

Once you have that file in place, all you need to do is run the following command: 

ionic  build  android  --release 

and your .apk file (or files if you are using Crosswalk, more on that soon) will be generated for you at: 

platforms/android/build/outputs/apk/ 

Submitting Your Application to Google Play 

     • Log in to the Google Play Developer Console
 

     • Click +Add New Application: 

* Fill in the information on this prompt and then click Upload APK 

                                                   552 

----------------------- Page 554-----------------------

* You should see a page like the following: 

* Click Upload your first APK to Production and upload the signed .apk file you created in Lesson 2 

* You should now see the page updated like this: 

                                                    553 

----------------------- Page 555-----------------------

*Nowclickon StoreListing andfillinalltheinformationincludingscreenshotsandpromotionalgraphics 

for your application then click Save Draft 

* Next go to Content Rating and create a content rating for your application then click Save Draft 

                                                    554 

----------------------- Page 556-----------------------

* Go to Pricing & Distribution and fill out the information there then click Save Draft 

Once you have filled out all of the screens just hit Publish App and your application will be submitted! 

                                                    555 

----------------------- Page 557-----------------------

Unlike the Apple App store, your application should be available on Google Play within hours. 

Uploading Multiple APKs with Crosswalk 

The interesting thing about using Crosswalk is that it creates two separate .apk files, which .apk file is 

required for each user depends on which device they have. If you take a look in your platforms/an- 

droid/build/outputs/apk/ folder, you will find the following two release .apk files: 

     • android-armv7-release.apk 

     • android-x86-release.apk 

This leaves us with a bit of a dilemma - which one do you submit to the app store? 

You may read on forums about combining the two .apk files into one, but fortunately the problem is quite 

easy to solve. 

Although it may not seem like it you can actually upload two different .apk files, both the armv7 and x-86 

versions, for your app submission (although the ability to do this is hidden slightly). 

If you’ve uploaded apps to the app store before, you may know that whenever you upload a new version 

of the app it needs to have a higher version number than the previously uploaded application (which we 

can set in the config.xml file). This is how you update your application after already having submitted it, 

you increase the version number in the config.xml file, rebuild, and then resubmit. 

I’mgoingtoshowyouhowyoucanuploadmultiple.apkfilesforthesamesubmissionthough-justfollow 

these steps: 

     • ClickontheUploadAPKbuttontouploadyourfirst .apk file,either android-armv7-release.apk or 

       android-x86-release.apk it doesn’t matter which. 

     • Once that has finished uploading click [Switch to Advanced Mode] in the top right corner of the 

       screen: 

                                                     556 

----------------------- Page 558-----------------------

Once you have switched to advanced mode, click the upload button again and upload your second .apk 

file. 

You should now have both .apk files uploaded, and be able to see them listed. You will notice that they 

have the same version number but a different version code - one version code must be higher than the 

other in order for this to work - fortunately crosswalk handles this for us automatically. 

                                                           557 

----------------------- Page 559-----------------------

Updating on the App Stores 

You thought you were done? Almost, but there’s one more important topic we need to cover. 

Once you’ve got your application live on the app store, it probably won’t be too long before you want to 

make an update - to add some new feature or perhaps to fix a bug that found its way into the production 

application. 

Fortunately, updating your application is really easy. All you have to do is modify your config.xml file and 

bump up the version number: 

<widget  id="com .yourname .yourproject" version="1.0.1" 

     xmlns="http ://www .w3 .org/ns/widgets" 

     xmlns :cdv="http ://cordova .apache .org/ns/1.0"> 

In the example above I’ve updated the version to 1.0.1 but you could also use 1.1.0 or 2.0.0, it doesn’t 

matter just as long as the version number is higher than the one you submitted previously. 

Thenallyouhavetodoisrebuildyourapplicationusingtheexactsamestepsasyouusedbefore,except 

obviously it will be a bit easier this time because you don’t have to generate the certificates and so on 

again. In fact it’s important that you use the same details to sign the application again, otherwise it won’t 

work. 

You also won’t have to recreate your app store listings of course. In the case of iOS you will just need to 

logintomanageyourexistingapplicationiniTunesConnectanduploadandthensubmitanewbuild. You 

will find an option to add a new version: 

                                                     558 

----------------------- Page 560-----------------------

andyoushould choose the iOS option. Enterinthe versionnumberthatmatches thenew version in your 

config.xml file and update any fields in the listing that need to be updated. Upload your new build using 

XCode or Application Loader just like before, and once again add the new build to the app store listing: 

                                                    559 

----------------------- Page 561-----------------------

Once you have uploaded the new build you can submit it for review again. 

ForAndroidyouwilljustneedtogotoyourexistingapplicationintheGooglePlaydeveloperconsoleand 

updateanyfieldsthatneedupdating. YoushouldthengototheAPK sectionofthelistinganduploadyour 

new.apkfile(makesuretouploadboth.apkfilesifyouareusingCrosswalk)andthenhit‘Publishnowto 

Production’. 

New builds you submit will still need to go through the review process, so for iOS this is going to take 

about a week again and for Google Play it will be a few hours. 

                                                   560 

----------------------- Page 562-----------------------

If you’ve made it through this course (and even if you haven’t yet) I would like to give you a huge… 

Thank you! 

Not only have you invested your time and money into learning HTML5 mobile application development 

(which I think is a very wise choice), you’ve also invested time and money into me. I love teaching devel- 

opers HTML5 mobile development and it means a lot to me to know that you trust in my abilities enough 

to buy this book, and by doing that you’re also allowing me to invest more time into creating even more 

content for mobile developers. 

Iassumeifyou’vecompletedthiscoursethenyou’reprobablyfamiliarwith myblog,butifyou’renotmake 

sure to check it out. I release free HTML5 mobile development tutorials there every week, and if you’re 

looking to expand your Ionic skills even more there’s plenty to check out. 

Ihopeyouenjoyedthiscourseandhavetakenalotawayfromit. I’malwayslookingforfeedbackonhow 

to continually improve though so please send me an email with any feedback you have. 

If you need help with anything related to HTML5 mobile development feel free to get in touch. I respond 

to as many requests for help as I can but I receive a lot of emails so I can’t always get to them all. If you 

want more personal and guaranteed support, I also offer consulting services. 

Also feel free to send me an email just to let me know what you’re working on, I always like hearing what 

fellow HTML5 mobile developers are up to! 

                                                     561