Jak uruchomić kilka aplikacji AngularJS na tej samej stronie

facebooktwittergoogle_plusredditpinterestlinkedinmail

Atrubut ng-app pozwala uruchomić automatycznie tylko jedną aplikację. Pozostałe atrybuty ng-app, znajdujące się w kodzie HTML są ignorowane podczas interpretacji kodu.

W takim razie jak zmusić AngularJS do odpalenia kilku aplikacji na tej samej stronie?

Można to zrobić na kilka sposobów.

Uruchamianie pozostałych aplikacji manualnie

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
        <div ng-app="firstApp">
            <div ng-controller="firstController">
                {{ name }}
            </div>
        </div>
       <div id="secondApp">
           <div ng-controller="secondController">
               {{name}}
           </div>
       </div>
    </body>
</html>

Do pliku index.html dodaliśmy dwa kontenery, jeden z atrybutem ng-app o wartości firstApp, a drugi z identyfikatorem secondApp. Każdy z tych kontenerów reprezentuje osobną aplikację.

app.js:

angular.module('firstApp', []);
angular.module('firstApp').controller('firstController', [
    '$scope',
    function ($scope) {
        $scope.name = "John";
    }
]);

angular.module('secondApp', []);
angular.module('secondApp').controller('secondController', [
    '$scope',
    function ($scope) {
        $scope.name = "Joe";
    }
]);

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('secondApp'), ['secondApp']);
});

Informujemy AngularJS o tym, że gdy obiekt document będzie gotowy ma odpalić ręcznie drugą aplikację ze wskazaniem kontenera, którym ma zarządzać (pierwszy parametr metody angular.bootstrap).

Dodanie aplikacji do zależności

Inną metodą jest dodanie podaplikacji do zależności wspólnego modułu, który będzie ładował nasze aplikacje za nas.

<body ng-app="rootApp">
    <div ng-controller="firstController">
        {{ name }}
    </div>
    <div ng-controller="secondController">
        {{name}}
    </div>
</body>

W index.html dodaliśmy do tagu body atrybut ng-app, który definiuje i automatycznie uruchomi naszą aplikację rodzica.

angular.module('rootApp', [
    'firstApp',
    'secondApp'
 ]);

Na początku pliku app.js dodaliśmy nową aplikację o nazwie rootApp, która będzie ładować nasze podaplikacje.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

÷ 2 = 2

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>