AngularJs: Chạy 2 ứng dụng Angularjs độc lập trên cùng 1 trang

Angularjs chỉ tự động chạy một ứng dụng AngularJs cho mỗi trang Html document. Để chạy được nhiều ứng dụng AngularJs, bạn phải tự bootstrap bằng tay.
Hàm angular.bootstrap: được sử dụng để tự khởi động ứng dụng Angularjs
Cú pháp:

angular.bootstrap(element, [modules]);

element: DOM element- phần tử gốc của ứng dụng
modules: mảng chứa tên các module được load cùng ứng dụng

Ví dụ: 

        <div id="app1" ng-controller="HomeCtrl" class="row" style="margin-top: 3em;">                            
            <h1>Application 1</h1>
            <div>{{hello}}</div>
        </div>
        <div id="app2" ng-my-app="App2" ng-controller="HomeCtrl" class="row" style="margin-top: 3em;">                              
            <h1>Application 2</h1>
            <div>1 + 2 = {{ 1 + 2}}</div>
        </div>

Manual bootstrap:

        (function(){
            'uses strict';
            var app = angular.module('App1', []);
            app.controller("HomeCtrl", ["$scope", function($scope){
                $scope.hello = "Hello World";
            }]);
            angular.element(document).ready(function(){
                angular.bootstrap(document.getElementById('app1'), ['App1']);
            });
        })();
        (function(){
            'uses strict';
            var appName = 'App2';
            var app = angular.module(appName, []);
            app.controller("HomeCtrl", ["$scope", function($scope){                
            }]);
            angular.element(document).ready(function(){
                //angular.bootstrap(document.getElementById('app2'), ['App2']);
                angular.bootstrap($('[ng-my-app="App2"]'), [appName]);
            });
        })();

Lưu ý:

• Các ứng dụng AngularJs không được lồng nhau.
• Chỉ một ứng dụng Angularjs được phép truy cập routing.

Demo: Plunker
Chúc các bạn thành công.

Nhatkyhoctap's blog