Working with Blank template in Ionic Framework

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

I use the Ionic Framework blank template for my tutorials in this post I will show you how to setup a blank template with controllers and views for Ionic version 1.x so you can easily try out demo examples without worrying getting cluttered in the template code.

So let’s get right to it, first we will create a new project with the blank template like so,

Opening the project folder we see the following folder structure inside the www folder

 

In the index.html file in the body tag we have the following

 

We will move the ion-content tags to the templates and use ion-nav-back-button in place of ion-header-bar,

so we end up with the following code for the entire index.html file

We are using the ion-view tags which will load our state that we will create later.

Note here that we are adding a file called  js/controllers.js we will create that later on.

 

Now we will need to create a controller.js file in the www/js folder along side the app.js file with the following

Here we have created an angular module which we will need to inject in out main annular module in the app.js file,

we can do that like the following in the app.js file

Notice that i am storing the angular.module instance in a variable called myApp, this is done on purpose to avoid chaining.

Now it is time to create an angular state and configure it’s views, you can learn more about angular states here.

We end up with the following app.js file

 

Notice in the .states() property we are passing a JSON object with templateUrl and controller.

The controller name refers to the controller we created in out controller.js file which is demoController.

The templateUrl we are giving a path to a file called tabs.html inside the templates directory both of which we have not created, so well will have to create them and put the following code in the tabs.html file.

 

We are now done with prepping our Blank template for our future projects. You can directly use this template using the ionic start command, instead of doing ionic start myAppName blank we can do the following

This will give you the above-created template directly to work with.

You can also download the code from here.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: