Structuring AngularJS Code

As my AngularJS trial application is getting larger, code structure is getting messy. Then, I just bestirred myself to do some research on how to structure the AngularJS code well. This framework surely has an ability to structure the code well, but I feel it’s a little too powerful and difficult to control them. Some opinionated frameworks like “Ruby on Rails” have very solid structure and relatively easier to make the code fit into the system. I need more practice and learning for JavaScript world.

Note

File Structure

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’]).

Model Definitions

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).

Advertisements

Posted on July 8, 2013, in JavaScript, Software Design. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: