In order to further spruce up our app, we will be leveraging on the CSS libraries of TopCoat. You can get TopCoat CSS libraries from http://topcoat.io/. We also need to change our index.html file a bit more in order to leverage on the styles provided by TopCoat.
For a start, replace the stylesheet which points to Bootstrap CDN with the following code:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-light.css">After this, just before
<div ng-view class="todos"></div>, prepend the following code:<div class="topcoat-navigation-bar"> <div class="topcoat-navigation-bar__item center full"> <h1 class="topcoat-navigation-bar__title">Todos</h1> </div> </div>
This is to give a universal header that we commonly see in mobile apps.
After these changes, your
index.htmlfile should look like this:<!doctype html> <html ng-app="todoApp...