Lo que quiero saber es cómo usar varios controladores para una aplicación de una sola página. Intenté resolverlo y encontré preguntas muy similares a las mías, pero solo hay un montón de respuestas diferentes que resuelven un problema específico en el que terminas sin usar varios controladores para una aplicación de una sola página.
¿Se debe a que no sería prudente utilizar varios controladores para una sola página? ¿O simplemente no es posible?
Digamos que ya tengo un controlador de carrusel de imágenes increíble que funciona en la página principal, pero luego aprendo cómo (digamos) usar modales y también necesito un nuevo controlador para eso (o cualquier otra cosa que necesite un controlador). ¿Qué haré entonces?
He visto algunas respuestas a otras preguntas en las que preguntan sobre casi las mismas cosas que yo y la gente responde "* Dios mío. ¿Por qué harías eso, solo haz esto ...".
¿Cuál es la mejor forma o cómo se hace?
Editar
Muchos de ustedes están respondiendo simplemente declarar dos controladores y luego usar ng-controller para llamarlo. Utilizo este código a continuación y luego llamo a MainCtrl con ng-controller.
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: "templates/main.html",
controller:'MainCtrl',
})
.otherwise({
template: 'does not exists'
});
});
¿Por qué necesito configurar un controlador aquí si puedo usar ng-controller sin él? Esto es lo que me confundió. (y no se pueden agregar dos controladores de esta manera, creo ...)
fuente
when: /home, controller: MainCtrl
. no puede agregar más que eso, o du, ¿quiere decir simplemente llamarlo con el controlador ng?Respuestas:
¿Cuál es el problema? Para usar varios controladores, simplemente use varias directivas ngController:
Deberá tener los controladores disponibles en su módulo de aplicación, como de costumbre.
La forma más básica de hacerlo podría ser tan simple como declarar las funciones del controlador de esta manera:
fuente
when /home, controller: MainCtrl
ng-controller
de varios elementos DOM, es decir, en un escenario en el que tengo MUCHOS elementos imprimiendo en el DOM a través deng-repeat
. Digamos que cada uno de estos hace una llamada ang-controller="myController
. De algunos de los registros de la consola que he visto en mi aplicación, semyController
reinicializa con CADA elemento que se representa en el DOM que lo llama ... Tal vez arruiné algo en mi uso particular, o tal vez más allá del alcance de los OP pregunta, pero curioso si otros han experimentado eso en absoluto ....Creo que le falta el significado de "aplicación de una sola página".
Eso no significa que tendrá físicamente un .html, sino que tendrá un
index.html
archivo .html principal y varios NESTED. Entonces, ¿por qué una aplicación de una sola página? Porque de esta manera no carga las páginas de la forma estándar (es decir, una llamada del navegador que actualiza completamente la página completa) sino que simplemente carga la parte de contenido usando Angular / Ajax. Como no ve el parpadeo entre los cambios de página, tiene la impresión de que no se ha movido de la página. Por lo tanto, se siente como si estuviera en una sola página.Ahora, supongo que desea tener MÚLTIPLES contenidos para su aplicación de UNA PÁGINA: (por ejemplo) casa, contactos, cartera y tienda. Su aplicación de una sola página / contenido múltiple (la forma angular) se organizará de esta manera:
index.html
: contiene encabezado<ng-view>
y pie de páginacontacts.html
: contiene el formulario de contacto (sin encabezado, sin pie de página)portfolio.html
: contiene los datos de la cartera (sin encabezado ni pie de página)store.html
: contiene la tienda, sin encabezado ni pie de página.Estás en el índice, haces clic en el menú llamado "contactos" y ¿qué pasa? Angular reemplaza la
<ng-view>
etiqueta con elcontacts.html
código¿Cómo logras eso? con
ngRoute
, como lo estás haciendo, tendrás algo como:Esto llamará al html correcto y le pasará el controlador correcto (tenga en cuenta: no especifique la
ng-controller
directivacontacts.html
si está utilizando rutas )Luego, por supuesto, puede declarar tantas directivas ng-controller dentro de su página Contacts.html. Aquellos serán controladores secundarios de
ContactCtrl
(heredando así). Pero para una sola ruta, dentro derouteProvider
, puede declarar un solo controlador que actuará como el "controlador padre de la vista parcial".EDITAR Imagine las siguientes plantillas / contactos.html
lo anterior
routeProvider
inyectará un controlador en su div contenedor. Básicamente, el html anterior se convierte automáticamente en:Cuando digo que puede tener otros controladores, significa que puede conectar controladores a elementos DOM internos, como se muestra a continuación:
Espero que esto aclare un poco las cosas.
UNA
fuente
<div ng-controller="FancyStuffController">
dentro de una etiqueta de cuerpo que ya tiene un controlador aplicado, por ejemplo, ¿<body ng-controller="BodyController">
esto funcionará? Recibo errores sobre$apply already in progress
cuándo hago esto, pero creo que está relacionado con dpd.js. Para no entrar en eso, creo que es solo cargarlo dos veces o algo así, no estoy seguro de cómo, pero mi uso del controlador puede estar intentando recargar eso.Actualmente estoy en el proceso de crear una aplicación de una sola página. Esto es lo que tengo hasta ahora y creo que respondería a su pregunta. Tengo una plantilla base (base.html) que tiene un div con la
ng-view
directiva en él. Esta directiva le dice a angular dónde colocar el nuevo contenido. Tenga en cuenta que yo mismo soy nuevo en angularjs, así que de ninguna manera estoy diciendo que esta sea la mejor manera de hacerlo.base.html
fuente
when /home
when
. Quiero dos controladores para una sola plantilla. ¿O maby entendí mal lo que estabas tratando de decirme?menuController tiene acceso al menú div. Y widgetController tiene acceso a ambos.
fuente
Simplemente podemos declarar más de un controlador en el mismo módulo. He aquí un ejemplo:
fuente
Solo puse una simple declaración de la aplicación.
Luego construí un servicio y dos controladores
Para cada controlador tenía una línea en el JS
Y en el HTML declaré el alcance de la aplicación en un div circundante
y cada alcance del controlador por separado en su propio div circundante (dentro del div de la aplicación)
Esto funcionó bien
fuente
También podría haber incrustado todas las vistas de su plantilla en su archivo html principal. Por ejemplo:
De esta manera, si cada plantilla requiere un controlador diferente, aún puede usar el enrutador angular. Vea este plunk para un ejemplo funcional http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview
De esta manera, una vez que la aplicación se envía desde el servidor a su cliente, es completamente autónoma asumiendo que no necesita realizar ninguna solicitud de datos, etc.
fuente