AngularJS loading controllers from folder

Question

im new in AngularJS, and have question how i can load controller and other js from structured folders?

For example i have structure:

app/
-common
-users
--userController.js
--userService.js
-orders
-app.js

How i should load controller and service from folder user?

And one more small question: what means squre bracerts?

app.config(['someThing'], function($routeProvider)

Answer 1

You can put the your code where you wants to. If you put them into angular modules, angular will find it. So if you have a service in /app/common/services/foo.js like:

angular.module('app').service('foo', function() { ... });

You can do this in the userController:

angular.module('app').controller('UserController', function($scope, foo) { ... });

Here you see how I injected foo in our controller. Angular Dependency Injection system is smart enough to find your code no matter where you put them.

You can also create different modules than app, you can have:

angular.module('other').service('bar', function() { ... });

And where you define the app module, something like this:

angular.module('app', []);

You just need to add the new module there as a dependency, that is what the [] are for:

angular.module('app', ['other']);

Now you can use the service bar in your controller too :)

On the other hand, the syntax you're talking about is the array notation, something like this:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);

This is needed if you mangle your code when you minify it because in the minified code, you could get something like this:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);

As you see, the function parameters are now f and g and Angular doesn't know what to inject based on those names, so it looks on the strings we provided, so it will know that f is $scope and g is foo.

There is no need to use this annotation directly, there are several tools that will do that for you like ngmin.

Cheers.

EDIT: You would need to add every javascript file into a <script> or the won't get loaded and Angular wouldn't find it.

Adding the files one by one is a pain, because you can have 5 or you can have 200.

It is better to concat them and for that I recommend: grunt-concat-sourcemap because it will generate a sourcemap so you will have 1 file with the entire app but in the dev tools you will see them in separate files.

I recommend you to check linemanjs which is a good tool to develop javascript apps and it concat the files for you, source maps, minify, the array notation stuff also...

Answer 2

You will have to link all files in your main HTML page and make sure they are loaded. As pointed out by Dwight above.

An alternative approach would be to use something like Grunt.js to "build" the app. This would include combining all the controller.js files into one – which you then load into your HTML page. This way all the files will be separate for development but will get concocted for deployment.