How To Organize The Files In Your Ionic Project

If you're a developer who hasn't worked with AngularJS before, and are just learning it as-you-go while building Ionic apps, you might not know the best way to structure the files in your app.

There are different ways to organize the files, a lot of times you'll see the following structure:

app/
	controllers/
        detail.js
		overview.js
        settings.js
    services/
    	service1.js
        service2.js
    views/
    	detail.html
        overview.html
        settings.html

This folders-by-type structure is not so easy to use, for example: if you're working on the Overview feature in the app, you'll have to constantly switch between the controllers folder and the views folder.

I did some digging around on the internet when I first started with AngularJS because I wanted to find some sort of best-practices guide. I found the Angular Style Guide by John Papa and have been using that in the Ionic apps I build.

The Angular Style Guide gives you a better approach to organizing your files by using the Folders-By-Feature structure.

So, if we restructure the previous example, it will look like this:

app/
	detail/
    	detail.controller.js
        detail.html
	overview/
    	overview.controller.js
        overview.html
    services/
    	service1.js
        service2.js
    settings/
		settings.controller.js
		settings.html

Now this is a very simple example, but imagine that you have an app with at least 10 features and within the features you have more than 2 files. It will be a lot easier to work within this structure, because all the files are grouped by feature. You don't have to go digging through the folders to find the files that belong to a feature.

Make sure you go through the whole Angular Style Guide, there are a lot of helpful guidelines in it and more importantly, there is an explaination per guideline as to why you should use it.

John Papa also did a talk on ng-conf about the style guide.