Are AngularJS' dependency injection and RequireJS essentially the same? - javascript

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.

Related

Are there any benefits of pre-fetching templates in angularjs?

I have question concerning optimising application. I have application with multiple directives, so I decided to build single min. css and js file for them all. But at the same time, I was thinking of another way.
What if I would also build one big, minimalised HTML file? Angular allows including templates from script tag:
<script type="text/ng-template" id="tempName">
Template content
</script>
If so, what would be downsides of injecting every directive's HTML in one big file? Would it be any better than multiple small files and firing request when they are needed?
I know, that it wouldn't be so good if we have big application with multiple views, but user only stays at few of them. My idea is to build this file for smaller directives, that shoulnd't cause any problems, right?
What do you think of this?
Like anything there are pros and cons to this approach of caching templates.
Pros:
No need to fetch the template - good for offline capability
If network is slow and this fetch is going to cause some lag as the directive, route, include must resolve the templateUrl. In such cases pre-fetching helps in improving the smoothness of feel.
Pre-fetching also pre-compiles the template ready to be used as it puts in the templateCache.
Cons:
In a large application if all the templates are prefetched we are essentially utilizing more memory to store all the templates when only a handful might get used.
If the prefetched templates are fetched during loading it causes additional request.
If the pros exceed in your application you may want to use some build tool such
as:
gulp-angular-templatecache
webpack-templatecache
grunt-angular-templatecache
... and more
Each file you include is an additional request the browser has to make back and forth, so if u can include it in the same page, then its going to be faster and more efficient.. the main reason for excluding in multiple files is simply for organisation vs the 0.01ms different in page load time.
You can also use something like grunt to work with separate files and then have grunt automatically concat and minify your files for you for on the fly optimization.

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.

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.

How to do JavaScript Library Dependency Injection in Angular?

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.

Backbone.js micro templating

I have an application, that uses Backbone.js,Jquery,Mustache and PHP as backend.
I have implemented micro-templates from underscore.js, which I currently define in my header-page.
I'm a bit dubious as to how I should organise the templates. Is there any efficient way to organise all templates in files and load them as required?
I use the exact same setup as you. Backbone, jQuery, mustache (for initial page render), and PHP (are you a SlimPHP fan? :-) I'm sure there are many ways to do this but one really great tool you might consider using is require.js.
With require, basically you code your Backbone client-side app as a series of AMD modules. Models, Collections, Views are their own modules that define dependencies with one another. The nature of AMD modules is that all modules are loaded asynchronously. So when your first page loads, only the code necessary to get that page going executes. When you leave the page and go to another, then that code is executed including all the dependencies that code has defined.
The nice thing about require is that it has a plugin that allows you to separate all your HTML code into html files. You simply define which views need those files as dependencies and it imports them as text to be used in the underscore templates.
Once you're ready to go live, you can use require.js' optimize feature to minify and combine all your js scripts + html templates into one file. Bang.
For big projects, a tool like this is pretty nice.
RequireJS

Categories