Working with two modules in AngularJS

Question

I have two modules with different operations and I tried to work with them as shown below.

<div id="viewBodyDiv" ng-app="xhr">
    <div ng-controller="xhrCtrl">
        <button ng-click="callAction()">Click</button>
        {{sample}}
    </div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
    <div ng-controller="xhr2Ctrl">
        <button ng-click="alertMessage()">Click</button>
    </div>
</div>

The JS is shown below.

angular.module('xhr', []).controller('xhrCtrl', function ($http, $scope, $window) {
    $scope.sample = "sadf";
    $scope.callAction = function () {
        $http({
            method: 'GET',
            url: 'Angular/GetData',
            params: {
                api_key: 'abc'
            }
        }).then(function (obj) { //I get a text result that I display near the button
            $scope.sample = obj.data;  
        });
    };
});
angular.module('xhr2', []).controller('xhr2Ctrl', ['$window','$scope', 
function ($window,$scope) {
    $scope.alertMessage = function () {
        $window.alert("xhr2Ctrl clicked");
    };
}]);

When I click on the viewBodyDiv I am getting the desired output but when I click on viewBodyDiv2 the alert message is not getting displayed.

I am new to AngularJS and please let me know what I am doing wrong or what it the procedure to work with two different Modules in Angular.

Thank you.

link · Accepted Answer · 2014-07-02 04:56:09Z

1

add this code to the bottom of your JavaScript

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

Hope this helps.

answered Jul 2, 2014 at 4:56

link

2,5101 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sambhav Sharma · Accepted Answer · 2014-07-02 04:50:16Z

As per the AngularJS documentation:

https://docs.angularjs.org/api/ng/directive/ngApp

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.

However, if you still want to do it this way, you have to use angular.boostrap() manually to achieve this. Here is a good tutorial on this:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

So you need to bootstrap the module to have multiple angular apps on the same page.

You can also inject one of the modules into another.

var xhrModule = angular.module("xhr", ["xhr2"]);

Following is a sample code for bootstrapping the module.

<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div id="viewBodyDiv" ng-app="xhr">
    <div ng-controller="xhrCtrl">
        <button ng-click="callAction()">Click</button>
        {{sample}}
    </div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
    <div ng-controller="xhr2Ctrl">
        <button ng-click="alertMessage()">Click</button>
    </div>
</div>
<script>
        var xhrModule = angular.module("xhr", []);

        xhrModule.controller('xhrCtrl', function ($http, $scope, $window) {
        $scope.sample = "sadf";
        $scope.callAction = function () {
            $http({
                method: 'GET',
                url: 'Angular/GetData',
                params: {
                    api_key: 'abc'
                }
                }).then(function (obj) { //I get a text result that I display near the button
                    $scope.sample = obj.data;  
               });
            };
        });

        var xhr2Module = angular.module("xhr2", [])
        xhr2Module.controller('xhr2Ctrl', ['$window','$scope', 
        function ($window,$scope) {
            $scope.alertMessage = function () {
                $window.alert("xhr2Ctrl clicked");
            };
        }]);
        angular.bootstrap(document.getElementById("viewBodyDiv2"),['xhr2']);
</script>

I tried to add the last line but it's not working! I cant see an alert message onClick

Collectives™ on Stack Overflow

Working with two modules in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related