Foro

Multiples vistas Multiples Controladores

0
Estoy intentando hacer una aplicación con varias vistas, pero no quiero crear todos los controles y hacerle referencia a todos juntos en la pagina web. 

Lo que estoy buscando es que cuando se hace clic en un opción que automáticamente cargue el controlador.
Hice referencia dentro de la vista (un archivo html externo) a javascript por medio de tag, pero por alguna razón no carga nunca ese javascript referenciado.

alguna recomendación o ayuda sera muy agradecida.

Desde ya muchas gracias a la comunidad.


7 Respuestas

Mejores votos Por fecha Solución
0
Que tal Fernando.

¿Como estas manejando tu DOM y tu aplicacion?

A lo que entiendo, es que desde una vista quieres cargar el controlador de una pagina externa solo cuando sea necesario.

¿Tendras algun ejemplo de lo que estas intentando?

Saludos.
0
Lo que hice hasta ahora fue intentar una cosa asi una pagina html donde esta mi vista que se carga

$routeProvider .when('/', { templateUrl : 'views/pagina1.html', controller  : 'mainController' })

dentro de pagina1.html puse
  <script src="js/app/pagina1.js"></script>
pero nunca lo carga




Eduardo Briseño: ¿Cual es tu directorio de trabajo? 20/02/2015
0
¿Cual es tu directorio de trabajo?

Yo he tenido problemas trabajando con scripts que no los toma, sea por la configuracion del servidor u otra cosa, como lo resuelvo, (no se si sea best practices) es utilizar el tag base dentro del <head> y a partir de ahi trabajo.

<base href="directorio_root_de_la_app">
Como ejemplo, basado en la siguiente estructura
/miApp <- directorio principal
/miApp/views <- vistas
/miApp/js <- JavaScripts

Si tengo una vista pagina1.html en /miApp/views/ y quiero utilizar un script que esta en /miApp/js/ llamado script.js, entonces en el header de mi pagina1.html pondria:

<head>
<base href="../">
<script src="js/script.js"
</head>
El tag base href="../" indica que el directorio base de esa pagina será el directorio padre, es decir /miApp, y de ahi parte para tomar TODAS las direcciones de la pagina, esto incluye tags "html/javascript paths" de la pagina.
Por lo tanto, la parte del <script src="js/script.js"> buscará la carpeta js en el directorio padre, y luego el script.js en la carpeta js

Nota: Si manejas PHP o ASP, el tag base no es considerado, debido a que son tecnologías del lado del servidor.

El archivo donde tienes el codigo de abajo, donde está?

$routeProvider	 .when('/', {	 templateUrl : 'views/pagina1.html',	 controller  : 'mainController'	 })
0
Hola, Fernando,  te cuento como lo hago yo, no sé si es lo correcto pero yo lo he visto así y a mi nunca me ha dado ningún problema.

   Los ficheros *.js los cargo todos en la página index.html al final del todo (para que no retrase y muestre la página).

No entiendo lo que dices:
Estoy intentando hacer una aplicación con varias vistas, pero no quiero crear todos los controles y hacerle referencia a todos juntos en la pagina web.

Angular js solo usa el controlador cuando encuentra los tags por ej.  

<div ng-controller="MainController"> 
// solo aquí se utiliza el código del js donde está el controlador
</div>
 

Ten en cuenta que en los controladores solo tienes la logica de la aplicación,  otras cosas como descarga de ficheros, cosas repetitivas y demás irán en factorys y servicios.

En tu caso en particular, creo que no te funciona porque en el momento de redirigir (donde está el código del route provider) angular no encuentra ese controlador que le indicas.



 



0
Logre hacerlo con la libreria Required JS, cada vez que el route provider pide una pagina carga el template y todas las dependencias de archivos js que necesita. Si nunca es solicitada la pagina, nunca le pide al servidor los archivos js.

window.app.config([
    '$routeProvider',
    '$controllerProvider',
    '$compileProvider',
    '$filterProvider',
    '$provide',
    function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        $routeProvider
            .when('/', {
                templateUrl: 'views/pagina1.html',
                resolve: {
                    load: ['$q', '$rootScope', function ($q, $rootScope) {

                        var deferred = $q.defer();

                        require ([
                            'js/app/controllers/pagina1',
                            'js/app/controllers/pagina1-calculador'
                        ], function () {

                           $rootScope.$apply(function () {
                                deferred.resolve();
                           });

                        });

                        return deferred.promise;
                    }]
                }
            })
            .when('/about', {
                templateUrl: 'views/pagina2.html',
                resolve: ['$q', '$rootScope', function ($q, $rootScope) {

                    var deferred = $q.defer();

                    require ([
                         'js/app/controllers/pagina2',
                         'js/app/controllers/pagina2-dialog'
                    ], function () {

                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });

                    });

                    return deferred.promise;
                }]
            });

        window.app.components = {
            controller: $controllerProvider.register,
            service: $provide.service
        }

    }
]);

 


ricardo: como hiciste para que los controladores los reconociera o de que forma los escribiste no me los detecta para implementar su funcionalidad si pudieras subir tu codigo por favor gracias 04/03/2015

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Angular JS