Inside the HTML template, content is placed in between view module directives <ion-view>…</ion-view>. While the views work with Angular directives (prefixed with ng-), Ionic also have also has its own directives to use within the views. There are directives for navigation, content, tabs, lists, and buttons. To help you, I created a table to describe each directive and how it works below:
Now lets revisit the example form that I posted in the intro to this series to break down all the directives used. The form below is a modal for logging in users:
In the form, I use <ion-modal-view> to create a container for the form, specifying that this view will be a modal. All content will go within this container. In the header, <ion-header-bar> I created a title heading and set a close button that will trigger the closeLogin( ) click event that I will define in the controller code. After closing the header, I use <ion-content> as a container the actual login form content. Because I’m defining a form inside a modal, instead of using <ion-list>, I used a <div> and gave it the “list” Ionic class. Doing this still allows me to use the “item” Ionic class to do the form inputs. Both inputs use Angular ngModals to attach data to controller code.
*** Day 31 Recap ***
- Debugged CSS code in the Bootstrappin’ Portfolio project. This project is now finished and available for cloning and download here.
- Worked on assignment for week 1 of the Mobile App Dev course.
- Created searchbox.html template using handlebars.js as an example for the Web Design course. It uses jQuery to filter through a data array to match text entered in a search box. Code is available here.