Menu
I have been writing a angularjs app and i have a number of controllers which I have placed in a 1 JS file. I was hoping for something a little more modular and separating my controllers into there own files.
I thought of RequireJS but is this the recommended way? or does angularjs provide something else and any clue on where it is explained?
Also having all these files is great for debugging but once a production build is required does angularJS provide some sort of merging of of the modules into 1 file and minimizing the results?
If anyone can explain the best way to go about it it would be very helpful.
Thanks
367
RequireJS is a JavaScript library that helps in lazily loading JavaScript dependencies. Modules are just JavaScript files with some RequireJS syntactic sugar in them. RequireJS implements Asynynchronous Modules specified by CommonJS. RequireJS offers simple APIs to create and refer to modules.
As you can see, we have RequireJS dependencies on angular, on our application module file, as well as two helper libraries for Internet Explorer. AngularJS is defined as a shim and injects the angular object into the RequireJS module.
In the above example, the angular. module() method creates an application module, where the first parameter is a module name which is same as specified by ng-app directive.
Injecting a value into an AngularJS controller function is done simply by adding a parameter with the same name as the value (the first parameter passed to the value() function when the value is defined). Here is an example: var myModule = angular. module("myModule", []); myModule.
Angular dependencies injection is really great and you should create a lot of small modules.
When it comes to file organization it's way easier to have a lot a small files (one per module maybe), but then you face the issue you're talking about: what do I do with all these files? How do I load them all?
It is worth taking a look at these 2 sources: Brian Ford's blog and this Github repo. It helped me a lot improving my workflow and better understand/use Angular modules.
What I do for my projects is using Grunt to concat (minify if needed) all the js files (and way more: less css compilation, assets management, javascript templates compilation).
A good example is given in the Github repo above.
I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice. [Brian Ford]
My app folder looks like this:
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 work on are in the src folder which then 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.
Then I use Grunt to 'compile' everything into the dist folder.
An example of a gruntFile can be found here.
I have a one-time job for deployment and some watchers for development.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
