Ionic Javascript and CSS doc confusion

ionic-v1
1

Hi i am new to ionic and the documentation seems quite confusing. There is two different way to use any element: the css way and the javascript way. A detailed question has been asked in stackoverflow but not answered properly so i am posting here on the ionic forum.

2

Just posted this on SO, but will repost it here.

Essentially, Ionic is both a css framework and a javascript framework.
You could theoretically use just the css class and build an app that way.

But since Ionic is built on top of angular, it allows us to create simple elements that already have those classes applied to them. So let’s look at an example.

Classes

    <ul class="list>
      <li class="item" ng-repeat="item in items">
         {{item.name}}
      </li>
    <ul>

Directive

    <ion-list>
      <ion-item ng-repeat="item in items">
        {{item.name}}
      </ion-item>
    <ion-list>

Both of these two blocks will render the exact same thing. A element with a class of list and some items inside that with a class of item.

The difference is, if you wanted to add some functionality with the lists (reorder the items, swipe option buttons) you would want to use the directives. Because we’re using directives, we can use the pre-defined functionality and not have to have a user wire that logic up themselves (like you would for a jQuery plugin).

Now this example is quite tame, but you can imagine this in the context of our Sidemenu component. While you could technically build out the sidemenu using classes, you would have to wire up the logic yourself, which is not ideal.

Hopefully this explains things a bit better.