How to load scripts within a partial in Angular.js SPA

Question

How to load scripts within a partial in Angular.js SPA

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, I'm starting in Angular Js, and I'm doing a project in Single Page Application, in my index, I load some scripts and my ng-view, but in one of my partials, I need to load a script into it, it does not make sense to load directly into the index , because I need DOM elements that are in my view, and would be an unnecessary loading because not all users will reach this view. But I realized that the scripts inside partials are not executed. Could someone give me some help, follow my index, main and partial codes. Thank you.

Index.html

<html lang="pt-br" ng-app="sistema">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Index.html</title>
        <script src="/js/lib/angular.min.js"></script>
        <script src="/js/lib/angular-route.min.js"></script>
        <script src="/js/lib/angular-resource.min.js"></script>
        <script src="js/main.js"></script>
        <link href="/css/style.min.css" rel="stylesheet" />
        <script src="/js/lib/jquery.min.js"></script>
    </head>
    <body>            
        <ng-view></ng-view>
    </body>
</html>

Partial.html

<script src="caminho-do-meu-script.js"></script>
<script>
$(document).ready(function(){
    alert("aqui meu script inline");
});
</script>
<h1>Minha partial com scripts</h1>

Main.js

angular.module('sistema', ['ngRoute', 'ngResource'])
    .config(function($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.when('/teste', {
            templateUrl: 'partials/partial.html'
        });

        $routeProvider.otherwise({redirectTo: '/teste'});

    });

javascript angularjs

asked by anonymous 02.08.2016 / 21:23

2 answers

1

Have you researched Controllers? Take a look, I think that's what's missing in your Single Page Application.

For example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><divng-app="myApp" ng-controller="myCtrl">

<button onclick="customAlert('aqui meu script inline')">Alert</button>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    customAlert = function(message) {
        alert(message);
    }
});
</script>

</body>
</html>

02.08.2016 / 23:10

Get some of the contents of the SVG ID with PHP C # conversion from a private void to public void [closed]

score 1 · Accepted Answer

They do not run because they need to be bound to a module which, if there is no insert service, should be started at the beginning of the application.

The method I know of, and also the most commonly used one (which was used as the basis for developing Angular2 as well) is ocLazyLoad .

It provides not only a rough lazyload, or lazyload of Js files, but also a large variety of extensions, as well as several loads within the same call, among other options. It's pretty full.

On the documentation page you can see its use in more detail: link

Basic example:

myApp.controller("MyCtrl", function($ocLazyLoad) {
    $ocLazyLoad.load('testModule.js');
});

What struck me most about it was that it could be used together with ui.router inside a solve, which I think would be interesting for you too. From what you commented, it seems to be a restricted area where not all users will access.

Putting these two techniques together, you can use resolves to prevent view (and consequently files) from being loaded as long as there is no user authentication.

Here is an example of a restricted area that I use by combining ui.router and ocLazyLoad:

.state('app-adm', {
    url: '/Admin',
    views: {
        'main': {
            templateUrl: 'app/adm/main.html'
        }
    },
    data: {
        requerLogin: true, //Login obrigatório
        usuarioTipo: 1, //Tipo do usuário
        usuarioCargo: ['admin','master'] //cargo do usuário
    },
    resolve: {
        lazyLoad: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: ['app.admin'],
                files: ['dist/js/admin.min.js']
            });
        }
    }
})

In this case, before the resolve is started, it does login validation, type of user and if the position has access to that view . If all of this is ok, it will load the module, otherwise it will block access.

Remembering that the validation and verification I commented on is done in another script, using stateChangeStart , which is an event of ui.router .