Ionic tabs starter project refactored using angular style guide

I have refactored the Ionic tabs starter project according to the angular style guide by @johnpapa. You can take a look on my github. I thought it might be useful for people to see. I’d also appreciate any comments and suggestions.

Many of the principles in it are essential for scaling up a project. As a project becomes larger, storing all the code in three files (app.js, controllers.js, and services.js) and using inline anonymous functions rapidly becomes unmanageable.

I haven’t implemented everything in the style guide. My next steps are to try out things such as ng-annotate, exception handling, and logging.


There are a few articles out there regarding organisation of code and using a more modular approach. Lots of good stuff.

I think the purpose of the Ionic starter projects are to provide a starting point for somebody who is brand new to Ionic and Angular. For those people, having the three file structure is really, really easy to understand.

As they grow and start building real apps (and larger apps), they will discover organically that the three file structure doesn’t scale.

So, in summary, I would say that you are 100% correct that the module structure scales much better, but the three file structure is much easier to learn.

1 Like

Though I agree with @andrewmcgivery this is still excellent starter skeleton app.

Give me some time to test it out, in a meantime keep a good work.

One request, please edit your post and move it to tutorials group (instead of Ionic). It will be still visible to everyone but much easier to access.

1 Like

Looks great, thanks so much for building and sharing this!

While I personally find the style a bit verbose for a starter, this style seems like a MUCH easier way to do scaffolding, like if we had:

$ ionic add:page dash and it would generate a structure like this. As it stands, our starters make that nearly impossible!

1 Like

I pretty much set mine up this way right after I start the project.

1 Like

There’s no doubt that the three file structure is really easy to understand, but I feel like they are dumbed down too much. Reducing the starter to that extent underestimates the amount of background that someone needs to use Ionic effectively. I’m a very experienced programmer, but never worked with Javascript. It took me a couple of days to set up the technological stack (Android, Xcode, node, bower, …)

The existing starter project provides enough examples to do copy-and-paste programming, but it’s not enough to really teach Ionic and Angular. I agree that people will discover organically that the three files don’t scale, but there’s no guidance on what to do instead.

Personally, I really struggled with the three file structure. It didn’t make sense me from a software engineering perspective. I kept asking myself whether people really developed Angular/Ionic this way. Obviously, the answer is they don’t. But it took a while to figure out and this project is the output.

@benevolentprof +1 agree 100% the problem is that learning the wrong way just makes it harder to switch to the right way. And in a world where a lot of developers are cutting and pasting there way to a final app… they might as well cut and paste the correct way.

I teach ionic YES I use a lot of the demo code as reference, but the for every demo I explain that the file structure is incorrect and if they turn in any assignment structured that way, they lose points

1 Like

@benevolentprof Great work and thanks for sharing it! I’m sure it will help beginners to set up their projects with best practices.

I also use the Angular Style Guide in my projects, it was one of the first things I searched for when I started Ionic development.

1 Like

Hi @benevolentprof I haven’t done any Ionic app yet because firstly I wanted to create an environment where I feel comfortable and your starter app has inspired me to begin and setup the environment.

As I’m more comfortable programming with CoffeeScript and Jade, I have translated it and added a few gulp tasks to start with.

Here is the repo for the coffee and jade fans: ionic-tabs-starter-sass-jade-coffee
I hope it is useful for more people.

1 Like

@dpramar, this is so awesome! Thanks for doing this. I’ve been meaning to learn Coffeescript. This is a great springboard for me. Thanks again.

This is a great job @benevolentprof , an i’m agree with pretty all of you (@max, @andrewmcgivery, @Gajotres. The file tree in the ionic start are really too simple to do a real app.

But let’s say it’s ok for beginners, it would be awesome to have some real/professional exemples of ionic apps. All questions that everyone asking himself when trying to create a real application using Ionic like:

  • what application structure do i need to have?
  • how to make a real custom theme? (there’s some documentation about custom sass vars in ionic doc but it’s really too superficial)
  • how to make my custom components?
  • how to handle user information and authentication through the application?

I think it would be really nice to have some “real official application exemples” showing the path to develop a real application using ionic.

1 Like

Awesome work @benevolentprof I would love to see all the starter projects converted for even more examples.

1 Like

Created an account just so I can thank you @benevolentprof, and give you some feedback.

I love how you’ve set the layout up. I’ve done it myself for all my angular projects, but I’m just starting in Ionic and was about to rip the entire thing up when I found your starter project. It definitely saved me a bunch of time.

Here’s what could be better:

  • Spaces vs tabs. Most of the files are on 4 spaces. There is one file (app.module.js) that had tabs. I did a search and replace for the js and html files to change them all to 2 spaces (personal preference)
  • Old comments from the original starter app. Back in app.module.js, there’s reference to and starter.controllers. You’ve done phenomenal work to clean up the structure, the comments would be the icing on the cake!
1 Like

One more, layout.route.js had bad identation and commented-out code that should be removed.

1 Like

Thanks for the compliments and feedback, @ricfaith.

The real solution is to add js Hint and jscs to the project, so style checking is being done all the time. I have that done on a separate branch.

I haven’t merged it into the main branch because these are additions to the starter project, as opposed to straight improvements. I haven’t got it sorted out in my mind how I should navigate this.

Happy to take suggestions.