0

Olá, Estou iniciando em Angular Js, e estou fazendo um projeto em Single Page Application, em minha index, carrego alguns scripts e minha ng-view, mas em uma das minhas partials, eu preciso carregar um script nela, não faz sentido carregar direto na index, pois preciso de elementos DOM que se encontram em minha view, e seria um carregamento desnecessário pois nem todos os usuários chegarão até esta view. Mas percebi que os scripts dentro de partials não são executados. Alguém poderia me dar uma ajuda, segue meus códigos da index, main e partial. Obrigado.

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

    });

2 Respostas 2

1

Eles não são executados pois precisam estar vinculados a um module que, se não houver algum serviço de inserção, deve ser iniciado no início da aplicação.

O método que eu conheço, e também o mais comumente utilizado (que foi usado como base no desenvolvimento de Angular2 também) é o ocLazyLoad.

Ele proporciona não só um lazyload bruto, ou lazyload de arquivos Js, como de uma variedade grande de extensões, bem como diversos loads dentro de uma mesma chamada, entre outras opções. É bem completo.

Na página de documentação você pode ver o uso dele com mais detalhes: https://oclazyload.readme.io/docs

Exemplo básico:

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

O que mais me chamou a atenção nele, foi o fato de poder ser usado junto com o ui.router dentro de um resolve, o que acho que seria interessante para você também. Pelo que você comentou, parece ser uma área com restrição, onde nem todos os usuários irão acessar.

Juntando essas duas técnicas, você pode usar o resolve para impedir que a view (e consequentemente os arquivos) sejam carregados enquanto não houver autenticação do usuário.

Aqui está um exemplo de uma área restrita que uso combinando o ui.router e 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']
            });
        }
    }
})

Neste caso, antes que o resolve seja iniciado, ele faz a validação de login, tipo de usuário e se o cargo possui acesso àquela view. Se tudo isso estiver ok, ele vai carregar o módulo, caso contrário, irá bloquear o acesso.

Lembrando que a validação e verificação que comentei é feito em outro script, usando o stateChangeStart, que é um evento do ui.router.

2
  • cara,tava dando uma olhada ai neste LazyLoad, era isso mesmo que eu estava perguntando se existia. Muito obrigado pela resposta :) Commented 2/08/2016 às 21:57
  • @AldoFernandesJunior é excelente! Deixa a aplicação muito mais dinâmica, ágil, não vi nenhum contra ainda. Commented 2/08/2016 às 22:02
1

Já pesquisou sobre Controllers? Dê uma olhada, acho que é isso que está faltando na sua Single Page Application.

Por exemplo:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-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>
2
  • Cara, eu estava querendo mesmo algo como o LazyLoad que responderam aqui embaixo. MAS, no caso que eu precisava aqui, colocando o script na controller resolve meu problema, muito obrigado! Commented 2/08/2016 às 22:00
  • Que bom que conseguiu resolver seu problema. Abraços. Commented 3/08/2016 às 12:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .