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.
Related
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 can I include JavaScript libraries on a controller basis using Angular?
For example, I'm using morris.js and ckeditor in this project which require nearly 1MB (dev versions) of resources even though they are only used on two pages.
It's obviously a waste to include these within the entire single page application by referencing them in the index.html file.
Is there a way to use Angular Dependency Injection to include these in a controller? I'm guessing using a service or a directive but I'm not sure how those components would look in this case.
You are better off using require.js to load these modules in your SPA based on when you need them.
I have written an application using AngularJS 1.0.7. I would like to migrate to AngularJS 1.2. What is the migration path (what issues might I need to fix when migrating)?
The angular team has put together a very comprehensive 1.x to 2.0 migration guide here: http://docs.angularjs.org/guide/migration
Exceptions logged in the console have also been greatly improved. They now include a link to an error reference manual with a detailed explanation of the exception and how to correct it. You can find the error manual here: http://docs.angularjs.org/error
There is no official guide to migrate from 1.0.7 to 1.2 but the best thing I can find is the changelog through angularJS's versions: https://github.com/angular/angular.js/blob/master/CHANGELOG.md .
They notice the crucial changes that can break in the new version so you can look into that.
The biggest change you probably need to deal with is on routing: there is now a separate module to handle routing, just as angular-resource was already separate. You'll need to load the separate angular-route.js file and declare ngRoute as a dependency when you create your app. Until you do that, your app will likely be broken. But that was the only major obstacle I faced. (I've heard we should expect this trend to continue, as they break Angular down into smaller, more modular chunks, so people can take what they need, and skip what they don't.)
Beyond that, there are wholesale new features like the Animations module, a bunch of new directives, and some nice new docs. But I'm not yet aware of anything else you'll need to 'migrate', unless you had already implemented some of the new features on the 1.1.x branch. (FWIW, I've collected some additional detail on this stuff on my blog.)
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.
(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.