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

Could you create a fiddle or plunker please? Even if it's not working, just for us to see what and where you are doing your stuff to guide you. — glepretre
– glepretre, Commented Feb 10, 2014 at 10:44
This is just an ugly try on what my code looks like (can't copy all of it, there's just too much already). Try to focus on the one issue: functions and variables all spread in one controller, it's a mess.. jsfiddle.net/JTUTn/1 — trainoasis
– trainoasis, Commented Feb 10, 2014 at 11:18
Maybe you could start cleaning your main scope: I created a $scope.show object wrapping all you $scope.showFoo variables and you could try to externalize $scope.login as a service using factory. Updated fiddle: jsfiddle.net/JTUTn/2 — glepretre
– glepretre, Commented Feb 10, 2014 at 13:19
@glepretre thanks for help. Yes wrapping similar vars together sounds like a good step forward. But externalising login as a service factory, that's beyond me I think. I'm not sure how to start doing that even? — trainoasis
– trainoasis, Commented Feb 10, 2014 at 13:58
Did you try out AngularJs tutorial, watch resources to get started like eggehead.io videos? If not, I think you should do this first, before diving into the Angular World directly. Then, you will be able to look at some service examples like this one and fully understand them ;) — glepretre
– glepretre, Commented Feb 10, 2014 at 14:41

Lukas S. · Accepted Answer · 2014-02-08 22:09:56Z

2

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

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

answered Feb 8, 2014 at 22:09

Lukas S.

5,7685 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

glepretre Over a year ago

Good answer, this presentation could also interest you: slid.es/jdobry/building-large-apps-with-angularjs

trainoasis Over a year ago

Thanks for your time. My question shows I have problems organising within my code as well - not just the folder/file structure, but how to build my own 'blocks' of code so that my code is more structured - such as services, factories; I'm still not sure how to use those as my own.

trainoasis Over a year ago

Added Edit to my question

Jean Kellou · Accepted Answer · 2015-07-04 03:46:25Z

Data Binding - Angular JS provides two way binding is automatic synchronization of the data between model and view. Extensible - AngularJS is customized and extensible . Allows you to create customizable components.

Code Reusability and Maintainability - AngularJS forces you to write code in modular way. Variables and functions can only be created to the respective component(Controller). Provides service and factory implemetation to use across the controllers.

Compatibility - AngularJS is compatible to all major browsers

Testing - AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.

http://astutejs.blogspot.in/2015/06/advantages-of-angular-js.html

Collectives™ on Stack Overflow

AngularJS: taking full advantage of AngularJS features/structures

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related