Welcome to Part 5 of this review of the Pluralsight course “Building Mobile Apps with the Ionic Framework and Angular JS” by Steve Michelotti.
Steve is a Microsoft ASP.NET MVP and holds MCSD, MCPD, and MCT certifications. He has produced a total of 7 courses for Pluralsight and is working on more.
Also in this series
Part 5 – Customizing Ionic
This module begins with a custom Angular directive for using Markdown for client-side formatting and display
Custom Markdown Directive
Steve shows us how to install and add our reference to Showdown, which is the most common library for dealing with Markdown
See a live demo here: http://showdownjs.github.io/demo/
Next we see how to create a custom Angular directive to execute Markdown code.
Customizing the CSS
Steve adds an allow-bullets CSS rule which correctly displays the bullet points on the screen
Ionic CSS is built on SASS, which is a CSS preprocessor. If you aren’t at all familiar with it, you have a few options:
You can check out the Using SASS module of Shawn Wildermuth’s “A Better CSS: LESS and SASS”
or see Jason Roberts “Simplifying CSS in Visual Studio With Sass”
or see Gary Simon’s “Speeding up Your CSS Workflow with Sass and Compass”
Having said all of that, Steve gives you a high level overview here and you should be able to follow along anyway. And as Steve says, there’s also good documentation at sass-lang.com
You can see official Ionic documentation on SASS here
To install SASS see http://sass-lang.com/install
Steve uses Ruby gems to install sass
Implementing SASS Changes
Steve gives a quick demo to show that it’s easy to customize the Ionic SASS in your app.
App Metadata and Icons
The default home screen icon shows the generic Cordova image and “HelloCordova” as the title. This is due to these being the defaults in config.xml
Fortunately these are trivial to update.
Steve says he made his icon images at makeiconapp.com – I couldn’t find this website but I did find https://makeappicon.com/ which does the same thing, and I found this pretty easy to use.
Steve also shows some of the parts that you might want to update in AndroidManifest.xml
Continue to Part 6 – ngCordova