SPA with ui Router Angular JS files very large

Question

Talk guys. This is a conceptual doubt.

Recently I started to develop a SPA application (Single Page Application) making use of the partial rendering concept, using ui Router (more information about ui Router here).

It was then that as the application was growing and getting more functionality and more information I saw that for the concept of SPA I had a single page - can call as you like (index.html, layout.html, base.html, etc...) - and in it I import dozens of javascript files, because they represent my application.

And as it is a SPA and only parts of the pages are rendered as requested I need all components, controllers, directives and etc to be available immediately upon application start.

This causes a ripple effect because the larger the application the larger the number (or size) of files my page loads as soon as the user accesses.

Example:

I have the following files

app.js
routes.js
controllers/
|--------- users/
|--------------- UserControler.js
|--------------- UserProfileController.js
|--------- appointments/
|--------------- AppointmentsControler.js
|--------- tasks/
|--------------- TasksControler.js
|--------------- TasksManagerController.js
directives/
|--------- basic/
|--------------- DropdownPattern.js
|--------- users/
|--------------- RefreshForm.js
services/
|--------- users/
|--------------- UsersServices.js

And so on, here was just one example (very close to my application)

Then on the main page of my application is.

<script type="text/javascript" src"libs/angularjs.js">
<script type="text/javascript" src"libs/ui-router.js">
<script type="text/javascript" src"libs/angular-resource.js">
<script type="text/javascript" src"app.js">
<script type="text/javascript" src"routes.js">

<!-- Controllers import -->
<script type="text/javascript" src"controllers/users/UserControler.js">
<script type="text/javascript" src"controllers/users/UserProfileController.js">
<script type="text/javascript" src"controllers/appointments/AppointmentsControler.js">
<script type="text/javascript" src"controllers/tasks/TasksControler.js">
<script type="text/javascript" src"controllers/tasks/TasksManagerController.js">

<!-- Directives import -->
<script type="text/javascript" src"directives/basic/DropdownPattern.js">
<script type="text/javascript" src"directives/users/RefreshForm.js">

<!-- Services import -->
<script type="text/javascript" src"services/users/UsersServices.js">

I can see where I’m going with this?

Is this the standard, the right architecture for a SPA application? There is another way to use server routes to upload files as they are requested?

Why do I imagine that in the final application the first load of the page where ALL will be loaded to stay in the browser cache will be a very time consuming load.

Answer 1

[..] And as it is a SPA and only parts of the pages are rendered as requested I need all components, controllers, directives and etc to be available immediately upon application start.

...or not!

The module ui-router-extras has an extension called Future States. You can use it to accomplish Lazy loading of partial views and controllers:

var myapp = angular.module('myapp', ['ct.ui.router.extras']);
myapp.config($futureStateProvider) {
    $futureStateProvider.addResolve(function($q, $timeout) {
        var d = $q.defer();
        $timeout(function() { 
            d.resolve("When this resolves, future state provider will re-sync the state/url");
        }, 1000);
        return d.promise;
    });

    var futureState = { type: 'ngload', stateName: 'foo', url: '/foo', src: 'foo.js' };
    $futureStateProvider.futureState(futureState);

    $futureStateProvider.stateFactory('ngload', ngloadStateFactory);
});

The key is on this line:

var futureState = { type: 'ngload', stateName: 'foo', url: '/foo', src: 'foo.js' };

Where you can specify, in the property src, the file . js to be loaded.

More information here:

http://christopherthielen.github.io/ui-router-extras/#/Future