What is the best way in which ionic application code can be split?

Question

I am building an ionic app and as the application is going large, the code is also going messy. Right now the structure is like this :

How can i make my code modularized ? something like this :

js/
  `-controllers/
     `- controller_A.js
  `-services/
     `- service_A.js
  app.js

I also used requireJS but i didn't understand the concept. Right now i am using gulp to concatinate all the files under js/ directory and bundle it into bundle.js .

Please tell me how to make a best structure on which i can build application

Answer 1

I highly encourage you to group your files (html / js) by feature rather than file type. This approach will significantly ease development for you.

So your directory should look like this:

app/
 login/
   login.controller.js
   login.template.html
   login.scss

You may use a task runner (Gulp / Grunt) to compile and copy the files into dest (www) directory.

Check out angular style guide by John Papa. A great resource for angular's best coding practices.