CODEWITHSUNDEEP
javascriptcsscordovaphonegap-buildionic-framework
Subjective Effect
Subjective Effect

Reputation: 1465

Ionic basics - which elements to use for a basic app?

The ionic documentation is very frustrating. First of all I can't install it via the method described on the site, on my Mac or PC I get a "Your version of Cordova is too old. Please reinstall." error and despite following instructions I can't fix it.

Tbh I'm not a huge fan of installing things on the command line if I can just download the files (a la jQuery mobile) and get on with it. So I got the latest Ionic beta and I've been trying to build some tests with it. The todo app on the Ionic site pretty much works (though the project list text is white when you Phonegap Build it).

Anyway, my question is this: Which elements am I supposed to use for building - the CSS ones or the JavaScript ones?

I'm hoping I'm missing something really obvious but I've used the docs here: http://ionicframework.com/docs/components/ and here: http://ionicframework.com/docs/api/

Let's take headers. The CSS page says you can build them like this:

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

and the JavaScript page says like this:

<ion-header-bar class="bar-light">
  <h1 class="title">bar-light</h1>
</ion-header-bar>

Both work for me, locally at least. So which is it? The CSS elements aren't all mirrored in the Javascript page. I'm just baffled by this and I don't want to use the slower, less efficient or less flexible method.

Upvotes: 2

Views: 264

Answers (3)

mhartington
mhartington

Reputation: 7025

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.

Upvotes: 3

Mike K
Mike K

Reputation: 24

You can use either the JS or the CSS method. I personally prefer the CSS method.

You do not need to use the CLI to install Ionic. Simply download all of the files here on Ionic's GitHub to your project and use the references here from Ionic's guide in your index.html. Your app will be able to use all of Ionic and Angular.js!

Upvotes: 0

Nazeel
Nazeel

Reputation: 336

You can have pretty good examples from website codepen.io/ionic/

Always try to use the latest versions of library (as of now it is 0.9 beta), latest version are more faster and efficient.

I have used Phonegap build, and referred only ionic library and css files, it was cool.

Upvotes: 0

Related Questions