Angularjs : Code organisation of controllers - javascript

I used the angular seed (with the file index-async.html(dependencies loaded asynchronously)) in order to start my web project, but my controllers would need some reorganisation. I have now 3 files full of controllers (700+ lines). Is there an elegant way to load my controllers if I reorganize them in 10 files (and more in the future).
Also, more files means less merging conflicts (Yeah!!!)
Thx in advance

I make extensive use of the angular.module().controller() syntax to group my controllers by module, which has greatly improved the organization of my angular code. As an added benefit, your controllers are no longer globally name-spaced functions.
You can read more in the Module API documentation.

Related

Angular - I'm referencing all JS files in index.html - is this ok?

I've started building my first AngularJS app.
I've been following a tutorial where it demonstrated on one controller adding everything in.
Now however I want to build on that so would like to seperate my controllers and services.
I easily seperated the services and controllers into seperate JS files and also realised that in my index.html i need to reference those JS files.
Is this the 'best practice' way? I'm feeling uneasy about listing so many js files in my index.html, feels untidy?
Any advice would be appreciated.
Thanks.
Your concern is valid. On one hand, having everything in separate files is a lot more maintainable. On the other, loading 100s of files slows the page down (for example, Chrome only loads... five (?) files at once, and if you have more than that, the page will slow down while it loads the rest).
I would look into software such as Gulp.js or Grunt, which you could use to concatenate all your files into one large build file, which can then be minified through the same software.
Have you looked at lazy loading angular modules and controllers using ocLazyload? and it works well with ui-router. You can find more details about ocLazyload at https://oclazyload.readme.io/docs

How to avoid a bloated index.html in AngularJS?

I've started learning Angular last week and going through lots of tutorials and best practices. One of the tips that I often encountered was to separate each controller, filter and service into its own file.
The idea is great and there are lots of resources on how to do this, but nobody ever talks about the index.html. My problem is that every single one of those individual files will now have to be loaded through a separate <script> tag inside the index.html, which makes the file seem bloated. So I was wondering:
Will loading everything on app start affect the performance on a bigger Angular app with lots of controllers and 3rd party libraries?
Is using RequireJS necessary on bigger apps or will I just complicate things without getting the benefit of faster loading times? Or does Angular have a way of truly modularizing an app and have it load controllers / filters / services / 3rd party libs on demand?
So is this the way to go if I want to modularize my app? Should I just leave things as is and not worry about the performance?
You can have dozens of files, all separated into controllers, directives, services and more, then simply use grunt or gulp to concatenate (and hopefully minify) them to one single file which you include. Take a look at Grunt-contrib-concat as an example grunt task.

Are AngularJS' dependency injection and RequireJS essentially the same?

I started using AngularJS not long ago and am practice to keep the Controller slim. My understanding of AngularJS' dependency injection is that it makes external JS code available in the controller.
I am also new to RequireJS, for I want to reduce loading time. I have done some reading but I am still confused. My impression is that AngularJS' dependency injection works similarly to RequireJS - loading functions on the fly when I need them.
Am I on the right track or am I completely wrong?
No, they are quite different. Angular DI involves components. Examples of Angular components are factories, directives, and filters. Angular provides several ways to inject a component into something else, but is not concerned about how to load these components or where they are stored. They could be all stored in a single .js file, in multiple files, or inline in the HTML document. The general assumption is that each component is loaded at page load, but that might not be the case.
RequireJS is a file and module loader. Each individual module is in it's own file. RequireJS uses ajax methods to load modules on demand as required.
Where Angular is more concerned with the IOC portion of the DI picture, RequireJS is more focused on file loading, data transfer, and memory conservation portions.
It is possible, and common, to use RequireJS to enhance the DI functionality of Angular, but unless it's a large scale app with hundreds of script files, it's normally not necessary.

How to include a config section in all modules in Angular?

I'm wondering if it possible to include a .config section just once and that it affects all modules. Question is related with caching requests in IE, and since I don't want to do this in every module that is making requests, I was wondering if it possible to include a .config section globally...
I've googled quite a lot, look in the Angular tutorial, looked at the NG-book and found nothing on this regard...any idea?
Thanks!
EDIT: Just added this as a config in the module included in all controllers and it works
During bootstrap all modules are combined into one application and a single injector is created for it. Services in Angular are singletons in the sense that they are only created once per injector.
This means that there is only once $http service created and its configuration will be global for the entire application.

What do the various terms in angularJS docs mean?

(The API reference given here: http://docs.angularjs.org/api is divided into several modules.
Each module has it's set of directives, services, filters.
I want to know what do these terms(i.e. directive , service, module etc.) mean and what role will they play in a typical web-app made using angularJS ?
"Service" is explained at https://docs.angularjs.org/guide/services.
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
"Directive" is explained at http://docs.angularjs.org/guide/directive.
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.
"Module" is explained at http://docs.angularjs.org/guide/module.
Most applications have a main method which instantiates, wires, and bootstraps the application. Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped.
I'm just including summaries in this answer. You probably will want a lot more detail, in which case follow the links and check out the docs.

Categories