AngularJs load the needed Scripts

Question

Hi, I couln't find an exact answer to my problem on the internet

I'm currently playing around with AngularJs and I've realised, that I have to load every single file in my index.html.

It doesn't feel very smooth doing it like this and I'm pretty sure that it affects the loading time.

Is there any way to do this in a proper and faster way?

---

index.html:

<!-- modules -->
<script src="js/app.js"></script>
<!-- controllers -->
<script src="js/controllers/Controller00.js"></script>
<script src="js/controllers/Controller01.js"></script>
<script src="js/controllers/Controller02.js"></script>
<!-- directives -->
<script src="js/directives/Directive00.js"></script>
<script src="js/directives/Directive01.js"></script>
<!-- services -->
<script src="js/services/Service00.js"></script>
<script src="js/services/Service01.js"></script>

app.js

angular.module('MyApp', ['ngRoute']).config(function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');

  $routeProvider
    .when('/', {
      redirectTo: '/00'
    })
    .when('/00', {
      templateUrl: 'view/00.html',
      controller: 'Controller00',
      controllerAs: 'ctrl00'
    })
    .when('/01', {
      templateUrl: 'view/01.html'
    })
    .when('/02', {
      templateUrl: 'view/02.html',
      controller: 'Controller02',
      controllerAs: 'ctrl02'
    })
    .when('/03', {
      templateUrl: 'view/03.html',
      controller: 'Controller03',
      controllerAs: 'ctrl03'
    })
    .otherwise({
      redirectTo: '/00'
    });
});

Answer 1

You can lazy load your modules and components using third party like ocLazyLoad

Check their docs https://oclazyload.readme.io/

Answer 2

You can use a task runner (like grunt, gulp etc ..) to concat, minifiy, uglify your code and load a single *.min.js file.

Or, you can use a static module bundler as well. Webpack, for example, is well documented, - specially for Angular - and you can use it to packet AngularJS application also.

For what concerns ocLazyLoad (suggested by another user) be aware that AngularJS isn't designed to support lazy loading. OcLazyLoad, that I've used, overrides some AngulrJS core method, like the angular.boostrap function (just to provide an example) and so, with it, you are not running AngularJS anymore, but a "fork" ...

Then, IMHO, serve files enabling gzip (server side).

Answer 3

Go for Bundling and Minification which provide a way to reduce the number of requests needed to get JS and CSS resource files and reduce the size of the files.

It doesn't feel very smooth doing it like this and I'm pretty sure that it affects the loading time.

It helps when you are debugging and developing, when you want to publish the code all your JS files should be bundled into a single file. Don't worry about the performance as the static content gets cached in the browser.

As a best practice use a package manager, it will help you to organize your files. You can check Bower

If you really want to implement best web development practices, I suggest you visit Yeoman

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.