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.
Related
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.
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
Our angularjs app becomes bigger and bigger. Lots of modules and up to 10MB js libraries loaded when the app starts.
What the best practice to resolve this? Requirejs or separate it to several standalone angular apps?
Requirejs will help you organize, but 10 megs of static javascript do not sound like an organization problem only.
If breaking down into separate apps makes sense for you (i.e. various distinct functionalities housed under the same roof), it could also help you shrink down on javascript statics the client has to load (assuming one part of the site does not request js files it doesn't need) by only including the required js files.
With requirejs however you will enjoy a more structured development time, and you could opt to use the files unpackaged or optimized (r.js optimizer)- but lazy loading (http requiring) unpackaged modules could hurt perceived website performance more than the all-in-one-min.js
If you can put in the time for optimizing require builds, you could try dehydration or split packaging to help speed up your app(s)
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.
I've been getting into Backbone.js lately and I'm enjoying it so far. All the examples tend to be simple to-do lists, so it's been a little difficult extrapolating code organization and file structure for a larger/more robust single page application.
I've come to a crossroad:
Should I use something like Yepnope.js to load models and views as I need them or,
Combine and minify into fewer files and front-load it all.
Some combination of both?
Any advice would be appreciated!
It depends of the size of your app. If you have a bunch of different views its definitely worth to start with a loader, where you can start the app with minimal feature set and load other views when needed. I can't tell anything about yepnope, but it seems the focus is more about polyfills then to structure your app with modules. We use requirejs for our app, and it works really well. You have to write a bunch of boilerplate code for the AMD modules but its really worth it.