AngularJS: taking full advantage of AngularJS features/structures

Question

I am working on a web app with AngularJS which I just started learning a while back. I find it extremely useful but after working on it for few days, I figured that the app is going to get all messed up sooner or later, since I wrote all my 'backend' code in one controller. The app uses lots of $http requests to get/post/delete/put data from/to remote servers and also many scope variables which are needed to manipulate page in one way or another.

I checked lots of tutorials/info sites on AngularJS (similar question, great blog post for instance) but I am still not sure how to implement one of my own within my app. I was wondering what is the usual case with using your own service/module/directive/factory? I am hoping to restructure my code a little bit so everything is going to seem more organized; at the moment I think I am not fully taking advantage of AngularJS with all my code in one place and without using any services/modules besides my main app module and controller and built-in $http.

So you can better understand my problem, so far I only use two javascript files, first one being app.js :

var app = angular.module('MyAppName',[]);

and the second one being controller.js (I could of course use only 1 file for this):

app.controller("MyController", function($scope, $http){
    // all my functions/variables in here
   // I initialize them  with $scope.someName = … if they are needed within this controller view.
  //  If they are not needed within view I initialize them (functions for instance)
 // as functionName = function(){};
}

Everything works as it should this way, but I think this approach is not using all the capabilities of AngularJS. For instance: I don's use routing which I probably should?(url stays the same all the time). I also don't use any other advanced features of angularJS such as custom services/directives/modules.

So I ask: how can I restructure my code so that it uses more of AngularJS features and so that it stays readable? When do you usually create your own service/module/factory ? I kind of didn't grasp the whole thing on AngularJS site, probably because I started developing too early with not enough knowledge and now I hardly get it (was too much into two-way-binding and started coding immediately).

Any help on the subject is appreciated.

EDIT: OK, I see I should clear some things up: my main problem is not the outside folder/file structure, but the code structure itself. Now I have one controller which contains every variable (30+) and function to use in my web app, such as login function, sign out function, functions for showing/hiding parts of page, function to add/delete data to/from server etc… I would like to be able to structure these functions/variables as some independent parts somehow, but I am not sure how.

EDIT2: I figured how to use services for instance, but unfortunately you cannot call service functions inside views, such as with ng-click directly... you can only call $scope variables which is logical actually... unfortunately i still don't know how to organize my code to seem more readable and structured

Answer 1

There are lots of opinions about how to organize AngularJS code. Have a look at these blog posts:

• Code Organization in Large AngularJS and JavaScript Applications
• Code Organization in Angular

There are also lots of sample projects out there that showcase various code organization schemes.

Take a look at the angular-seed project:

https://github.com/angular/angular-seed

One alternative to the above is angular-enterprise-seed:

https://github.com/robertjchristian/angular-enterprise-seed

You didn't mention what backend you're using, but there are also similar "seed" projects demonstrating the recommended code organization scheme for AngularJS + [your backend]. For instance, if you're using Express.js, you might want to take a look at angular-express-seed:

https://github.com/btford/angular-express-seed