Structuring AngularJS Code
It seems that one way is to separate out directory/files for each type of angularJS modules(controllers, directives, services and filters). The “angular-seed” project provides concise template for the project structure. They’re defined as sub-modules (e.g. “myApp.controllers” or “myApp.services”), and they’re referenced in the “angular.module” statement for being used.
angular.module(‘myApp’, [‘myApp.filters’, ‘myApp.services’, ‘myApp.directives’, ‘myApp.controllers’]).
- GitHub – angular/angular-seed
- It’s a simple template for AngularJS project with test runners.
- Building Huuuuuge Apps with AngularJS
- It shows some examples to seperating out files into categories.
- AngularJS Best Practices: I’ve Been Doing It Wrong! Part 1 of 3
- It shows example structure along with some related technologies like Grunt and Karma.
The basic models in AngularJS are the variables defined in $scope. Just keep adding data in the $scope can become very flat and messy. Then, Angular’s services (or factory) can be used as model class that contains data and behaviors. If the model value is assigned to the $scope variable, changing the data in the service (arrays and lists contained in the service) are reflected back to the $scope through data-binding. Then, the corresponding views are updated (though replacing the array/list itself needs to be separately handled).
- Modeling Data and State in Your AngularJS Application
- Showing an example to define the model as Angular’s service.
- AngularJS: Where to put model data and behaviour?
- Another example to define it as Angular’s service (ListService) and related discussion.
- An example that uses Angular’s factory. It’s a little difficult to identify which one to use.