How to organize the codes in Angularjs?

Asked

Viewed 1,242 times

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 module, I have multiple controllers/filters/services...

Well, it gets many files, 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, I only have a few, and if I had 10 modules and 20 controllers, that’s 200 files to load....

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

2 answers

5

  • 2

    a very interesting resource. Even more than AMD, but could you transcribe at least part of the solution to, if the link is unavailable someday, the answer will not be lost. Just don’t forget to quote the source.

  • 1

    You can put the Angularjs CDN globally and use Browserify only for your solution.

4


One of the best ways to organize the code I’ve ever used to work with these frameworks is asynchronous module loading (AMD - Asynchronous Module Loader). At this link has a very complete example using the Angularamd

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

Transcribing here an example of website usage

Step 1:

Define components and dependencies in the file main.js:

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 file app js. using the function defines of the 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 method app Register.:

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

That way, you just go defining the dependencies using the defines and registering in the main that when the site loads it will load the modules respecting their dependencies.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.