6

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)

2 Answers 2

7

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...

Sign up to request clarification or add additional context in comments.

2 Comments

I think you've missed the intention of the automatic loading of other modules. Yes, Angular will be able to load other modules in but it doesn't know where to find them on your server! You should either place every single script file in <script> tags on your page to load them in, or concatenate all your scripts into one large script. A framework or tool like Grunt will help you achieve this.
Your comment its what im search. Make Post and im mark it as Answer
4

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.

1 Comment

Please provide more details on how to use Grunt to solve this problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.