combining multiple applications on a single page using AngularJS

Question

combining multiple applications on a single page using AngularJS

I am currently developing an application using AngularJS.

Within my application, I have implemented two controllers to manage two distinct views.

Below is the JavaScript code:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

Here is the HTML code:

<div ng-app="myApp1">
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div ng-app="myApp2">
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

However, I am facing an issue where only the first controller is being executed.

I would greatly appreciate any advice or suggestions on how to resolve this problem.

javascript angularjs

Answer 1

Answer №1

To initialize each application, you should follow these steps:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp1Div'),['myApp1']);


var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp2Div'),['myApp2']);

Also, make sure to include the following HTML code:

<div id="myApp1Div" >
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div id="myApp2Div" >
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

UPDATE JSFiddle

Answer 2

To initialize each application, you should follow these steps:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp1Div'),['myApp1']);


var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp2Div'),['myApp2']);

Also, make sure to include the following HTML code:

<div id="myApp1Div" >
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div id="myApp2Div" >
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

UPDATE JSFiddle

Answer 3

Answer №2

Here is an example of how to use it:

var myApp1 = angular.module('myApp1', []);

myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});

myApp1.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML code:

<div ng-app="myApp1">
    <div ng-controller="myController1">
        <input type="text" ng-model="x" /> {{x}}
    </div>
    <div ng-controller="myController2">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>

Answer 4

Here is an example of how to use it:

var myApp1 = angular.module('myApp1', []);

myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});

myApp1.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML code:

<div ng-app="myApp1">
    <div ng-controller="myController1">
        <input type="text" ng-model="x" /> {{x}}
    </div>
    <div ng-controller="myController2">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>

combining multiple applications on a single page using AngularJS

Answer №1

Answer №2

Similar questions

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

Tips for choosing a block using Puppeteer

No options displayed in AngularJS select2 dropdown

Switching colors after uncovering text using JavaScript

jQuery: add to either element

Attach an event listener to the HTML content

The function self.ctx.$scope.$apply is missing or undefined

A guide on changing JSON into a JavaScript array

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Remove all HTML tags except for those containing a specific class

WebSocket functionality in Node.js utilizing the ws module from npm

Struggling to understand the process of retrieving information from an Axios promise

Please explain the significance of `input = input || '' ''` when creating personalized filters in AngularJS

The Selenium driver's execute_script() function is not functioning as expected

AngularJS encountered an error following a successful GET request

Navigate through each element with a specific class name in a block of HTML code using

Counting JSON Models in SAP UI5

Auto-fit HTML Webpage Resizer Simplified

Integrate Chrome extension using code

Utilizing component state or props within Redux mapDispatchToProps operations