AngularJS - carregamento dinâmico de JS externo com base em rotas

Question

May 14, 2014, 03:34 PM

AngularJS - carregamento dinâmico de JS externo com base em rotas

Eu sou muito novo no Angular. Eu assisti alguns tutoriais e li algumas da documentação. Agora estou começando a sujar as mãos. Estou tentando criar um aplicativo móvel simples de uma página com várias visualizações e um botão próximo \ voltar para controlar cada visualização. Estou usando a biblioteca Angular Mobile UI, mas isso não deve importar muito.

A maquete básica é a seguinte:

<html>
    <head>
        <link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css">
        <link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css">

        <script src="js/angular/angular.min.js"></script>
        <script src="js/angular/angular-route.min.js"></script>
        <script src="mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>

        <script src="app/app.js"></script>
        <script src="app/firstController.js"></script>
        <script src="app/secondController.js"></script>
        <script src="app/thirdController.js"></script>

    </head>

    <body ng-app="demo-app">
        <div ng-view></div>

        <div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom">
            <div class="btn-group justified">
              <a href="#/" class="btn btn-navbar btn-icon-only"><i class="fa fa-home fa-navbar"></i></a>
              <a href="#/second" class="btn btn-navbar btn-icon-only"><i class="fa fa-list fa-navbar"></i></a>
            </div>
        </div>

    </body>


</html>

App.js é o seguinte:

var app = angular.module('demo-app', [
  "ngRoute",
  "mobile-angular-ui"
]);

app.config(function($routeProvider) {
  $routeProvider.when('/', { controller: "firstController",
                             templateUrl: "views/first.html"});
  $routeProvider.when('/', { controller: "secondController",
                             templateUrl: "views/first.html"});
  $routeProvider.when('/', { controller: "thirdController",
                             templateUrl: "views/first.html"});
});

controllers = {};

controllers.nextBackController = function($scope, $rootScope) {
    //Simple controller for the next, back buttons so we just put it in app.js
};

app.controller(controllers);

O firstController.js conterá algo semelhante a:

controllers.firstController = function($scope) {
    //Do our logic here!!!
};

O problema é que, se você perceber que, na parte superior da página HTML, tenho que carregar todos os controladores. Isso não é escalável. Quero que cada controlador esteja em seu próprio arquivo JS e não precise carregar estaticamente cada um, pois o usuário pode nem precisar desse controlador. Existe uma maneira de carregar dinamicamente o arquivo JS real ao alternar rotas? ou posso colocar uma tag de script na parte superior do meu "first.html", "second.html" etc.