How to organize the codes in AngularJS?

Question

How to organize the codes in AngularJS?

Navigation

#1 by (5 votes)
#2 by (4 votes)

7

I have several modules with AngularJS

angular.module('modulo1', ['ngTable']);
angular.module('modulo2', ['ngTable']);
angular.module('modulo3', ['ngTable']);


window.app = angular.module("app", ['ngRoute','modulo1','modulo2','modulo3']);

And within each of the modules, I have several controllers / filters / services ...

Well, there are many files, for example:

<!-- Load app main script -->
<script src="app/app.js"></script>

<!-- Load services -->
<script src="app/services/placesExplorerService.js"></script>
<script src="app/services/placesPhotosService.js"></script>
<script src="app/services/placesDataService.js"></script>


<!-- Load controllers -->
<script src="app/controllers/placesPhotosController.js"></script>
<script src="app/controllers/placesExplorerController.js"></script>
<script src="app/controllers/userContextController.js"></script>
<script src="app/controllers/myPlacesController.js"></script>
<script src="app/controllers/navigationController.js"></script>
<script src="app/controllers/aboutController.js"></script>

<!-- Load custom filters -->
<script src="app/filters/placeNameCategoryFilter.js"></script>

<!-- Load custom directives -->
<script src="app/directives/fsUnique.js"></script>

Well, there are only a few, and if you had 10 modules and 20 controllers, there are 200 files to upload to ....

How could I solve this problem? Does angularJS have something to solve this problem? PS: Without using RequireJS, I opt for any other fw, less requirejs

javascript angularjs

asked by anonymous 13.08.2014 / 05:07

2 answers

5

You can also use browserify + Grunt or Gulp to create a bundle. link

13.08.2014 / 15:48

How do I get a random string from a list of strings? In Python, is there any rule or advantage over using 'Self'?

score 4 · Accepted Answer

One of the best ways to organize the code I've used to work with these frameworks has been the Asynchronous Module Loader (AMD). This link has a very complete example using AngularAMD

With it you define the dependencies of each file that must be loaded before that file and in html you only insert the main definition file

Transcribing here an example of using the site

Step 1:

Set the components and dependencies in the main.js file:

require.config({
    baseUrl: "js",    
    paths: {
        'angular': '.../angular.min',
        'angular-route': '.../angular-route.min',
        'angularAMD': '.../angularAMD.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['app']
});

And load RequireJS, and only RequireJS, into your index.html file:

<head>
    <script data-main="js/main.js" src=".../require.js"></script>
</head>

Step 2:

Create the app.js file using the define function of RequireJS:

define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    return angularAMD.bootstrap(app);
});

Step 3:

Create the controller using the app.register method:

define(['app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});

In this way, you only have to define the dependencies using the define and registering in main that, when the site loads it will load the modules respecting their dependencies.