How to split large AngularJS projects into modules

Question

I come from the world of Backbone and JavascriptMVC. But I am really tempted to switch to AngularJS. So far, I have one big issue that keeps me from converting.

I create single page apps. Let's pretend it contains a tab module, a file upload module and a filelist module.

What I would do in Backbone is that I would split each of these as standalone modules with their own view template, viewcontroller and so on. That way, I am able to use the module several places in my app. The modules don't know about anything other than itself.

How is this ment to be dealt with in AngularJS? Is it possible to create one angular.module per module (like for instance a tab module)?

I feel they tell a how to create many controllers within a module in their documentation. But that does not sound like what I need. Or am I misunderstanding some major concepts here?

EDIT: I have done some more research. It looks like directives is what I am looking for. While a module in AngularJS represents the entire web app. So the mixing of the names 'components' and 'modules' is what confused me.

Am I on the correct path now?

Answer 1

You absolutely can define modules and you include your modules at the app level and then with dependency injection you allow your controllers to use what they need.

I have a proof of concept example for a small app I was working on to learn angular (it is pretty dirty and my playground):

http://plnkr.co/edit/1jGqaB00OznAUpyPZVT3

My app definition looks like this:

angular.module('myApp', ['ngResource','ui.bootstrap', 'myApp.services', 'myApp.servicesMovie', 'myApp.servicesSearch', 'myApp.servicesUtils', 'myApp.servicesMovieList'])

You can see I am including a bunch of different modules with my app and then an example of a controller that takes some services from the services module:

function SearchCtrl($scope,  $rootScope, $route, $timeout, $routeParams, $location, SearchService, MovieListService) { etc }

Here is one of the module's defined (with its dependency too):

angular.module('myApp.servicesMovieList', ['myApp.services'])

With regards to templates, you can define these and include them with your route values:

$routeProvider.when('/view1', {templateUrl: 'view1.html', controller: ViewCtrl});
    $routeProvider.when('/movie/:id', {templateUrl: 'movie-detail.html', controller: MovieCtrl, resolve: MovieCtrl.resolve});
    $routeProvider.when('/search/:q/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.when('/searchlist/:url/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});

  }])

Or of course you can call them with ng-include

Answer 2

Yes, you're on the right path now. Another type of module in Angular are services. Services can be injected into any controller or directive (or even into other services) in a very clean manner.

Directives are primarily for reusable things that are visibly part of the UI, which is sort of reflected by the way they are put to use: by adding DOM elements/attributes.

Services are for more abstract things or things whose existence and behavior makes sense even without any directly corresponding user interface. The more logic you can sensibly shove into independent services, the more modular you application becomes and the more reusable the code is.

Controllers tend -- in my experience -- to be the least reusable and to be the first to grow complex and messy. (But that could just be me using them wrong.) The rule of thumb is to keep controllers as simple as humanly possible. Limit them to only pure business logic, and try to put most of that as well into services.

Angular does have a somewhat steep learning curve, but keep researching and then the different pieces will become apparent and fall into place. One resource right here on SO is this question: "Thinking in AngularJS" if I have a jQuery background?