SPA with ui Router Angular JS files many large

Question

SPA with ui Router Angular JS files many large

Navigation

#1 by (1 votes)

2

Talk the guys. This is a conceptual doubt.

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

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

And as it is a SPA and only parts of the pages are rendered according to the request I need all components, drivers, directives and etc to be available as soon as I start the application.

This causes a cascading effect, because the larger the application, the larger the number (or size) of files that my page loads as soon as the user logs in.

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 it goes, here was just an example (very close to my application)

Then the main page of my application stays.

<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">

You can understand where I want to go right?

Is this the right architecture for a SPA application? Is there another way to use server routes to load files as they are being 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.

angularjs single-page-application ui-router

asked by anonymous 08.10.2015 / 14:32

1 answer

Restrict access to a folder on the server after being signed in Why is the FloatingActionButton transparent?

score 1 · Accepted Answer

[..] And as it is a SPA and only parts of the pages are being rendered according to the request I need all components, drivers, directives and etc to be available as soon as I start the application.

... or not!

The ui-router-extras module has an extension named future states . You can use it to perform 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 in this line:

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

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

More information here:

link