2013-08-29 20 views
31

Ist es möglich, mehrere Module in einem Angular Script zu erstellen? Ich habe die Dokumentation durchgelesen und gelernt, dass es sich um eine Art Hauptmethodenkonzept handelt.Mehrere Module in Angularjs

Ich brauche Beispiele, um dies zu demonstrieren.

Antwort

1

was meinst du multiple modul? Sie Modul in ein anderes Modul

angular.module(name[ anotherModule]); 
11

Natürlich injizieren Sie können. Verwenden Sie einfach angular.module('moduleName', [/* dependencies */]) so oft wie die # Ihrer Module, die Sie erstellen möchten.

Um einen Verweis auf ein zuvor definiertes Modul erhalten Sie nur: var myModule = angular.module('moduleName'); und dann myModule.controller(...), myModule.config(), myModule.constant() usw.

Ein Projekt Layout vorgeschlagen (siehe Angular Seed) ein Modul für Ihre Anwendung hat, dann eine andere für Ihre Controller, ein anderer für Ihre Dienste, ein anderer für Ihre Filter und noch einer für Ihre Anweisungen. Natürlich ist dies a mere suggestion. Andere empfehlen alternative layouts.

11

Ich denke, dass er Modul mit ngApp verwirrt hat, dass es nur eine Anwendung (ng-app) auf einer Seite gibt und dass die Ansicht der Anwendung (ngView oder < ng-view >) nur einmal existieren kann. Wie bereits in vorherigen Antworten erwähnt, können Sie beliebig viele Module erstellen und diese als Abhängigkeiten in Ihr "Haupt" -Anwendungsmodul einfügen. Normalerweise mache ich das, um meine Anweisungen, Filter, Controller und dergleichen in ihren eigenen Modulen zu trennen.

Edit:

ngApp - http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngApp

37

Ja, Sie können mehrere Module in AngularJS definieren, wie unten angegeben.

var myApp = angular.module('myApp', []) 
var myApp2 = angular.module('myApp2', []) 

Vergessen Sie jedoch nicht, die Abhängigkeit bei jeder Moduldeklaration wie folgt zu definieren. Angenommen, myApp2 ist abhängig von myApp. Daher wäre die Erklärung etwas ähnliches,

var myApp = angular.module('myApp', []) 
var myApp2 = angular.module('myApp2', ['myApp']) 

Die Modularisierung in AngularJS uns den Code Klarheit und leicht zu verstehen, zu halten hilft, wie wir mehrere Module kombiniert werden können, um die Anwendung zu generieren. Wir müssen jedoch berücksichtigen, dass wir die Komponenten basierend auf ihrer Funktionalität nicht nach ihren Typen modularisieren sollten.

+0

können wir definieren ng-view seperat für beide Module ... Ist es möglich ... Vielen Dank im Voraus –

+0

Es wird nur eine 'ng-view' für eine einzelne Seite unterstützt. Wenn Sie jedoch mehrere Ansichten/Vorlagen auf einer Seite definieren und verwenden möchten, sollten Sie besser 'angular ui.router' verwenden. Hier ist die offizielle Dokumentation dazu - https://github.com/angular-ui/ui-router. – Aviro

19

Nur eine AngularJS-Anwendung kann per HTML-Dokument automatisch gestartet werden. Die erste ngApp, die im Dokument gefunden wird, wird verwendet, um das Root-Element zu definieren, das automatisch als Anwendung bootet. Um mehrere Anwendungen in einem HTML-Dokument auszuführen, müssen Sie sie manuell mit angular.bootstrap starten. AngularJS-Anwendungen können nicht ineinander verschachtelt werden.- http://docs.angularjs.org/api/ng.directive:ngApp Siehe auch

https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ http://docs.angularjs.org/api/angular.bootstrap

Sie auch nur eine ng-App verwenden können, aber 2 Module wie auf diese Weise kombinieren:

var moduleA = angular.module("MyModuleA", []); 
moduleA.controller("MyControllerA", function($scope) { 
    $scope.name = "Bob A"; 
}); 

var moduleB = angular.module("MyModuleB", []); 
moduleB.controller("MyControllerB", function($scope) { 
    $scope.name = "Steve B"; 
}); 

angular.module("CombineModule", ["MyModuleA", "MyModuleB"]); 

und dann ng-app="CombineModule"