CODEWITHSUNDEEP
javascriptangularjsinclude
flx
flx

Reputation: 1578

AngularJs load the needed Scripts

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'
    });
});

Upvotes: 2

Views: 63

Answers (3)

PSK
PSK

Reputation: 17943

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.

Upvotes: 0

7uc4
7uc4

Reputation: 194

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).

Upvotes: 0

Mina paulis
Mina paulis

Reputation: 402

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

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

Upvotes: 1

Related Questions