Roc's blog

About web development

Organize Angularjs Files Ftw

In a recent project I just started to use angularjs to develop complicated front UI, this project is not a SPA, we only use angularjs in places that ui elements is so complicated that is easier to do with front end. Since new on angularjs, i searched on the internet for best practices that organize large codebase and module naming, found couple ways.

1. Put everything in one file for simplest case.

app.js.coffee everything in one file
1
2
3
4
5
6
7
8


  angularjs
    .module('myApp', [])
    .controller('MyCtrl', ['$scope', ($scope)->
      $scope.hello = "world"
    ])
    .constant('Contacts', ['Foo', 'Bar'])
    ...

2. Put different kind of stuff in different files

app.js.coffee define app namespace
1
2
3
4


  angularjs.
    .module('myApp', [])
controllers.js.coffee define controllers
1
2
3
4
5
6
7
8


  angularjs.module('myApp')
    .controller('OneCtrl', ['$scope', ($scope)->
      $scope.hello = 'world'
    ])
    .controller('TwoCtrl', ['$scope', ($scope)->
      $scope.foo = 'bar'
    ])
constants.js.coffee define constants
1
2
3


  angularjs.module('myApp')
    .constant('Contacts', ['Foo', 'Bar'])

3. Create directories to save different kind of files

constants.js.coffee define constants
1
2
3
4
5
6
7
8

  - app.js.coffee
  controllers/
    OneCtrl.js.coffee
    TwoCtrl.js.coffee
  constants/
    Contants.js.coffee
    Contacts.js.coffee

4. Create features directories to store everything for each features

constants.js.coffee define constants
1
2
3
4
5
6
7

  - app.js.coffee
  Users
    - UserCtrl.js.coffee
    - UserModel.js.coffee
  Contacts
    - ContactsCtrl.js.coffee
    - ContactModel.js.coffee

5. How do organize code for multiple angularjs apps

constants.js.coffee define constants
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  - app.js.coffee
  - modules
    AppOne.js.coffee
    AppTwo.js.coffee
  - controllers
    AppOne/
      OneCtrl.js.coffee
    AppTwo/
      TwoCtrl.js.coffee
  - models
    AppOne/
      UserModel.js.coffee
    AppTwo/
      ContactModel.js.coffee

In app.js.coffee, I define top level module to include basic dependencies share between apps.

app.js.coffee
1

  angularjs.module('app', ['dep1', 'dep2'])

In AppOne.js.coffe, it define a new module and load app as dependencies and the shared dependencies define in app will be available in AppOne.

AppOne.js.coffee
1

  angularjs.module('app.appOne', ['app'])

In html only need to specify AppOne in place that app one is need.

1
2
3
4

  <div ng-app='app.appOne'>
    <div ng-controller="OneCtrl">
    </div>
  </div>

Conculsion

I didn’t choose solution 4 because it seems not good to put different stuff together even though it’s easier to find files for changes. So I follow solution 3 and extend it for multiple apps.