#100DaysOfCode Day 31: Using Ionic Directives to Structure Your Templates

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:

list of Ionic directives

list of Ionic directives

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:

sample form using Ionic directives, classes, and Angular ngModels

sample form using Ionic directives, classes, and Angular ngModels

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.

Now that I spent some time discussing the HTML structure of an app, my next post will focus on configuration and coding the controllers in JavaScript. Stay tuned.

*** Day 31 Recap ***

  1. Debugged CSS code in the Bootstrappin’ Portfolio project. This project is now finished and available for cloning and download here.
  2. Worked on assignment for week 1 of the Mobile App Dev course.
  3. 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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s