AngularJS directives and Ionic examples

ionic-v1
1

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,

Ionic is both a CSS framework and a Javascript UI library. Many components need Javascript in order to produce magic, though often components can easily be used without coding through framework extensions such as our AngularIonic extensions.

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 ion-tabs, ion-tab, ion-nav-view, ion-side-menu, ion-header-bar etc.

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 divs. No 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>

compared to:

<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? :confused:

Just to add, it appears that the docs examples seems to use Ionic as a pure HTML/JavaScript library.

But the sample projects’ codes use Ionic as a AngularJS style directives.

2

AngularJs is a back bone of Ionic framework. If you are only interested with static contents then Ionic is more than sufficient else you need to modify the ionic tags or customize it as per your requirements with the help of AngularJs directives