title: AngularJS: taking full advantage of AngularJS features/structures
body: <p>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.</p>
  
  <p>I checked lots of tutorials/info sites on AngularJS (<a href="https://stackoverflow.com/questions/15943465/structuring-my-angularjs-application">similar question</a>, <a href="http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/" rel="nofollow noreferrer">great blog post</a> 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. </p>
  
  <p>So you can better understand my problem, so far I only use two javascript files, first one being app.js :</p>
  
  <pre><code>var app = angular.module('MyAppName',[]);
  </code></pre>
  
  <p>and the second one being controller.js (I could of course use only 1 file for this):</p>
  
  <pre><code>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(){};
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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).</p>
  
  <p>Any help on the subject is appreciated. </p>
  
  <p><strong>EDIT:</strong>
  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. </p>
  
  <p><strong>EDIT2:</strong>
  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 </p>