Geek Answers Handbook

AngularJS - Using RequireJS or something inline for modular development?

I am writing an angularjs application and I have several controllers that I placed in 1 JS file. I was hoping for something more modular and split my controllers into my own files.

I was thinking about RequireJS, but is this the recommended way? or do the corners provide something else and suggest where this is explained?

In addition, the presence of all these files is great for debugging, but as soon as assembly is required, does angularJS provide some kind of combination of modules into 1 file and minimize the results?

If anyone can explain how to do this, it will be very helpful.

thanks

+6
source share
4 answers

Angular dependency injections are really great, and you have to create many small modules.

When it comes to organizing files, it is easiest to have small files (one per module, maybe), but then you are faced with a problem that you are talking about: what should I do with all these files? How to download them all?

It's worth taking a look at these 2 sources: Brian Ford's blog and this is the Github repo . This helped me greatly improve my workflow and better understand / use Angular modules.

TL DR

What I do for my projects, use Grunt to concat ( minify if necessary) all js files (and much more: less css compilation, asset management, compilation of javascript templates ).
A good example is given in the Github repository above.

I do not recommend using RequireJS with AngularJS. Although it is certainly possible, I have not seen a single instance where RequireJS was useful in practice. [Brian Ford]

File organization

My application folder is as follows:

www |-dist/ = Created by Grunt. Generated files (served by my web server). |-node_modules/ = node modules (ie. Grunt modules. Grunt is based on NodeJS) |-src/ = My workspace |-test/ = Some tests |-vendor = External libraries (AngularJS, JQuery, Bootstrap, D3, ... Whatever you need) |-gruntFile.js = The Grunt configuration file: contains all the jobs for Grunt. |-package.json = App infos + dependencies (Grunt modules) I use (concat, uglify, jshint, ...)

So, all the different files I'm working on are in the src folder, which looks like this:

 www/src |-app = Folder for my controllers | |-Controller1.js | |-Controller2.js | |-... |-assets = Folder for the static assets (img, css, ...) | |-img/ | |-css/ | |-favicon.ico |-common = Folder for the shared modules (directives, resources, services, ...) | |-directives | | |-chart.js | | |-map.js | | |-... | |-resources | | |-users.js | | |-another-cool-resource.js | | |-... | |-services | | |-service1.js | | |-... |-views = Folder for my templates | |-profile.tpl.html | |-search.tpl.html | |-... |-index.html = The main and unique html file.

Grunt

Then I use Grunt to compile everything into a dist folder.
An example of gruntFile can be found here . I have a one-time deployment job and some development observers.

Need more explanation?

+12
source

Angular allows you to define modules that can be injected into your controllers, see here:

http://docs.angularjs.org/api/angular.module

These modules may depend on other modules that can be introduced as follows:

 app.factory('module2', ['module1', function (module1) { var functions = { myModule2Function: function (variable) { return module1.testfunction(variable); } } return functions; }]);

then in the controller:

 function MyController($scope, module2) { $scope.aControllerFunction = function (variable) { return module2.myModule2Function(variable); } }
+3
source

Downloading modules on demand is what we need for really huge applications, for example, for a trading application. I think this is a smart way to handle behavior, at least on mobile devices, where we don’t want to download the entire application to a 3G connection. In these cases, RequireJS is best suited.

+2
source

Using RequireJS with AngularJS makes sense, but only if you understand how each of them works in relation to dependency injection , since although both of them introduce dependencies, they introduce very different things.

AngularJS has its own dependency system that allows you to inject AngularJS modules into a newly created module to reuse implementations. Let's say you created the “first” module that implements the AngularJS welcome filter:

 angular .module('first', []) .filter('greet', function() { return function(name) { return 'Hello, ' + name + '!'; } });

Now let's say you want to use the greet filter in another module called second, which implements the goodbye filter. You can do this by entering the "first" module in the "second" module:

 angular .module('second', ['first']) .filter('goodbye', function() { return function(name) { return 'Good bye, ' + name + '!'; } });

The fact is that for this work to work correctly without RequireJS, you must make sure that the "first" AngularJS module has been loaded on the first page before you create the "second" AngularJS module. Quoted documentation:

Depending on the module, it is understood that the required module must be loaded before loading the required module.

In that sense, here is where RequireJS can help you, as RequireJS provides a clean way to inject scripts into a page, helping you organize script dependencies among themselves.

Going back to the “first” and “second” AngularJS modules, here is how you can do this using RequireJS splitting the modules into different files to use script dependency loading:

 // firstModule.js file define(['angular'], function(angular) { angular .module('first', []) .filter('greet', function() { return function(name) { return 'Hello, ' + name + '!'; } }); }); 
 // secondModule.js file define(['angular', 'firstModule'], function(angular) { angular .module('second', ['first']) .filter('goodbye', function() { return function(name) { return 'Good bye, ' + name + '!'; } }); });

You can see that we are dependent on the firstModule file to be inserted before the RequireJS callback request is executed, for which you need to load the first AngularJS module to create the “second” AngularJS module.

Side note: entering "angular" in the files "firstModule" and "secondModule" depending on the need to use AngularJS inside the RequireJS callback function, and it needs to be configured in the RequireJS configuration to map "angular" to the library code. You may have AngularJS loaded in the traditional way (script), although it benefits from RequireJS requirements.

More information about RequireJS support from the AngularJS 2.0 kernel in my blog post.

Based on my blog post "Understanding Requirements with AngularJS", here is the link.

0
source

More articles:


All Articles