Update: Confusion has been cleared. Just realized that I can use Ionic CSS components as pure UI components without AngularJS, according to http://ionicframework.com/docs/api/. I quote,
I am not sure if I am retarded or what; I just find things confusing when I go through the sample project templates for Ionic 1 and looking at the docs.
I have cloned a copy of the Ionic 1 sample projects (side menu and tabs). Looked through it. I saw numerous AngularJS directives like
I tried to do little modifications to test out. So I looked at those [Ionic Framework components docs] (http://ionicframework.com/docs/components/) as mentioned earlier. They are all normal HTML
ion-* AngularJS directives. A tab is simply:
<div class="tabs"> <a class="tab-item"> Home </a> <a class="tab-item"> Favorites </a> <a class="tab-item"> Settings </a> </div>
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Dashboard Tab --> <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Chats Tab --> <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab> <!-- Account Tab --> <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>
So what’s the right way? Is there a list of the AngularJS directives in the API reference docs?
But the sample projects’ codes use Ionic as a AngularJS style directives.