2013-05-02 31 views
30

New to Angular. Mi sento come se mi mancasse qualcosa di ovvio: non dovrei essere in grado di eseguire facilmente le app di AngularJs (moduli) nella stessa pagina html? Qualcosa di simile a questo:Come eseguire due app Angular js separate nella stessa pagina

<section ng-app="HelloWorldApp" ng-controller="HelloWorldController"> 
    Hello {{name}}! 
    </section> 
    <br /> 
    <section ng-app="MyNameIsApp" ng-controller="MyNameIsController"> 
    My Name is {{FirstName}} {{LastName}}! 
    </section> 

Javascript:

var HelloWorldApp = angular.module('HelloWorldApp', []); 
HelloWorldApp.controller('HelloWorldController', function($scope) { 
    $scope.name = 'World'; 
}); 

var MyNameIsApp = angular.module('MyNameIsApp', []); 
MyNameIsApp.controller('MyNameIsController', function($scope) { 
    $scope.FirstName = 'John'; 
    $scope.LastName = 'Smith'; 
}); 

Questo viene eseguito solo il primo modulo, mentre il secondo non sembra di fare nulla. Voglio fare questo in modo che possa creare direttive riutilizzabili e incapsulate per più pagine che non devono nominare i loro moduli la stessa cosa.

diretta Esempio: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ


Abbiamo finito per costruire small hierarchy of modules, comunque la mia domanda iniziale può fare, con solo un po 'di lavoro (vedi sotto).

+0

Si prega di dare un'occhiata a questa risposta http://stackoverflow.com/questions/15641730/angular-js-directives-in-different-modules/15642327#15642327 e anche prendere in considerazione un altro http://stackoverflow.com/ a/15644492/637740. Usualy secondo si adatta meglio –

risposta

45

È possibile, ma richiede una piccola codifica manuale. È necessario eseguire il bootstrap delle app angolari da soli. Non preoccupatevi, non è così complicato

  • Non aggiungere ng-app attributi nel codice HTML
  • assicurarsi la possibilità di recuperare gli elementi DOM tenendo l'applicazione
  • Quando DOM viene caricato il necessario per iniziare la applicazioni sul proprio: angular.bootstrap(domElement, ['AppName']);

Forcella di voi plunker che funziona: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

+0

Funziona alla grande, grazie! AngularJS ha anche una documentazione per questo, FYI: https://docs.angularjs.org/guide/bootstrap – rilwis

+1

Grazie, grazie, grazie !!! – GrahamJRoy

+0

@GrahamJRoy nessun problema ;-) – TheHippo

8

Secondo l'angolare docs per ngApp:

Utilizzare questa direttiva per auto-bootstrap un'applicazione. È possibile utilizzare solo una direttiva per documento HTML. La direttiva indica la radice dell'applicazione e viene in genere posizionata nella radice della pagina .

Sembra che sia di progettazione.

4

è possibile specificare qualsiasi app annidati in il modulo def di quello principale.

angular.module("myapp", ['statusapp', 'tickerapp']).controller(.... 

e in un file separato, hai le altre app definite. Stiamo utilizzando un motore di template che ne nasconde un po ', ma finirai con l'HTML che contiene ng-app nidificate e javascript per ognuno che definisce il modulo/controller. Il codice sopra è il trucco per ottenere più di un bootstrap.

Problemi correlati