ocLazyLoad to load controllers from a SPA AngularJS

Navigation
1

Hello, community!

I wonder if it's a good idea to use ocLazyLoad to load the controllers of an application (Single Page Application - SPA) from AngularJS .

I'm using UI Router instead of ngRoute .

The code I have works perfectly (in the example, it's simplified, just for demonstration purposes). 

'use strict';

var minhaAplicacao = angular.module('minhaAplicacao', ['oc.lazyLoad', 'ui.router']);

angular.module('minhaAplicacao').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'partials/home/home.html',
            data: {pageTitle: 'Home'},
            resolve: {
                service: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        serie: true,
                        files: [
                            'partials/home/home.controller.js'
                        ]
                    });
                }]
            }
        });
<!DOCTYPE html>
<html ng-app="minhaAplicacao">
    <head>
        <meta charset="utf-8">
        <title data-ng-bind="'GEOPS | ' + $state.current.data.pageTitle">GEOPS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="bower/vendor/bootstrap-3.3.6/css/bootstrap.min.css">
    </head>
    <body>
        <div ui-view></div>
        <script src="path/to/angular.js"></script>
        <script src="path/to/ocLazyLoad.js"></script>
        <script src="path/to/ui-router.js"></script>
    </body>
</html>

My question is about the implications of this practice.

Is it wrong to do lazyloading of controllers AngularJS?

Is there a security or scalability issue in this type of practice?

    
asked by anonymous 13.11.2016 / 01:13

2 answers

2

Well this goes from your project, I think it's worth using it to load controllers , services and etc, when for example your application must fit the user profile. Example: The operator user profile does not see more than 2 screens / routes of your SPA , so you'll load the .js needed for it to work instead of having it load the entire application. It also prevents some "super user" from seeing .js loaded beyond what it has access to.

    
15.11.2016 / 17:07
1

Hello

I use $ ocLazyLoad to load scripts and third-party plugins as needed. I've even created a dependency mechanism of these plugins for automatic download on the resolve of the route. For the files of angular controllers, services, components ... I do not use $ ocLazyLoad, but I minimize them and separate them by modules. Option issue, I see no problem.

    
14.11.2016 / 17:18
Share button ___ ___ erkimt Sharing the variable $ scope from one controller to another with parameters in AngularJS ______ qstntxt ___

I have this:

%pre%

I wanted my second controller to get the $ scope.getIdJobs variable and save it to a variable again. How can I do this?

%pre%

app.js

%pre%     
______ azszpr165042 ___

A simple solution is to have a factory that returns the value that you need (an object for example): JS:

%pre%

HTML:

%pre%

Demo: link

When applications get larger, more complex, and harder to test, you may not want to expose the entire object of a factory in this way, but instead give limited access for example via getters and setters:

%pre%

With this approach controllers consume the service with new values and use $ watch to observe the changes:

%pre%

HTML:

%pre%

Demo: link

    
______ azszpr164875 ___

I'm a beginner too but I'll try to help you by giving two tips:

  • There is %code% that holds information and when loaded can be passed from controllers to controllers, much used for IDs.

  • Another way would be to store this %code% in a service and then use it in other controllers by calling it: %code%

    • ______ azszpr164891 ___

    You can put the products variable in $ rootScope, so you can access it for $ rootScope anywhere. But I advise you to use the ui-router to make the parameters pass, it gets more cohesive and with less chances of you having undesirable variable value substitution problems, or something like that.

    You should set the parameter in your state:

    %pre%

    And it will pass it this way:

    %pre%     
    ______ azszpr165044 ___

    Good,

    In my opinion it is advisable to create a %code% for the date, which will be %code% , where you can encapsulate the date and its %code% . Then just call the %code% you need in the controllers.

    Here's the example in this jsfiddle

    %pre%

    In the controller that accesses %code% you call the %code% method.

    %pre%

    In the second controller, just declare %code% or if necessary you can filter again with a new id.

    %pre%

    In this way, you can clear the %code% , and everything relative to that date can be reached in %code% and %code% easily.

    Or you will have the option of %code% , which also works for what you want.

    About routers, I advise you to take a look at ui-router , a far superior tool in my understanding.

        
    ___