Looking to have two separate modules on a single page in AngularJS, each with its own unique view

Question

Looking to have two separate modules on a single page in AngularJS, each with its own unique view

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Azhar";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Khan";
          });
        </script>
    </head>
    <body>
        <div id="AgeCalc">
            <h1>Age Calculator and Currency Converter App</h1>
            <div ng-app="MyModuleA" ng-controller="MyControllerA">
                {{name}}
            </div>
        </div>

        <div id="Currency Converter">
            <h1>Currncy Converter</h1>
            <div ng-app="MyModuleB" ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

javascript angularjs

Answer 1

Answer №1

       
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
    <div id="App1" ng-app="myApp1" ng-controller="MyControllerA">
        <h1>My Name</h1>
        <div >
            <span>{{name}}</span>
            
        </div>
    </div>

    <div id="App2" ng-app="myApp2" ng-controller="MyControllerB">
        <h1>My Surname</h1>
        <div >
            <p>{{name}}</p>
        </div>
    </div>
    <script>
            angular.module("myApp1", [])
            .controller("MyControllerA",
                function($scope) {
                    $scope.name="sagar";
                   
                }
            );
            angular.module("myApp2", [])
            .controller("MyControllerB",
                function($scope) {
                    $scope.name = "chopada";
                }
            );
            angular.bootstrap(document.getElementById("App2"),['myApp2']);
    </script>
</body>
</html>

Feel free to reach out if you need any further assistance.

Answer 2

       
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
    <div id="App1" ng-app="myApp1" ng-controller="MyControllerA">
        <h1>My Name</h1>
        <div >
            <span>{{name}}</span>
            
        </div>
    </div>

    <div id="App2" ng-app="myApp2" ng-controller="MyControllerB">
        <h1>My Surname</h1>
        <div >
            <p>{{name}}</p>
        </div>
    </div>
    <script>
            angular.module("myApp1", [])
            .controller("MyControllerA",
                function($scope) {
                    $scope.name="sagar";
                   
                }
            );
            angular.module("myApp2", [])
            .controller("MyControllerB",
                function($scope) {
                    $scope.name = "chopada";
                }
            );
            angular.bootstrap(document.getElementById("App2"),['myApp2']);
    </script>
</body>
</html>

Feel free to reach out if you need any further assistance.

Answer 3

Answer №2

To initialize the Angular applications manually, follow these steps. For more information, refer to this link: https://plnkr.co/edit/iW8GzBgexjylXiq1IWtp?p=preview

    <div id="AgeCalc">
        <h1>Age Calculator</h1>
        <div ng-app="MyModuleA" ng-controller="MyControllerA">
            {{name}}
        </div>
    </div>

    <div id="Currency Converter">
        <h1>Currncy Converter</h1>
        <div ng-app="MyModuleB" ng-controller="MyControllerB">
            {{name}}
        </div>
    </div>

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

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) { $scope.name = "Khan";});
 angular.element(document).ready(function() {
      angular.bootstrap(document, ['MyModuleA','MyModuleB']);
    });

Answer 4

To initialize the Angular applications manually, follow these steps. For more information, refer to this link: https://plnkr.co/edit/iW8GzBgexjylXiq1IWtp?p=preview

    <div id="AgeCalc">
        <h1>Age Calculator</h1>
        <div ng-app="MyModuleA" ng-controller="MyControllerA">
            {{name}}
        </div>
    </div>

    <div id="Currency Converter">
        <h1>Currncy Converter</h1>
        <div ng-app="MyModuleB" ng-controller="MyControllerB">
            {{name}}
        </div>
    </div>

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

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) { $scope.name = "Khan";});
 angular.element(document).ready(function() {
      angular.bootstrap(document, ['MyModuleA','MyModuleB']);
    });

Looking to have two separate modules on a single page in AngularJS, each with its own unique view

Answer №1

Answer №2

Similar questions

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

Building a straightforward RESTful API for user authentication with Node.js, MongoDB, and Express.js

Using sql.js to import CSV files into SQLite databases

Fill an HTML div with JSON data obtained from a server

Ways to verify if all files have been loaded using Firebase.util pagination

Download the latest Backand Angular SDK from npm

Guide on dynamically importing a module in Next.js from the current file

What is the best way to close all modal dialogs in AngularJS?

What is the best method for choosing a document from a Firebase based on its creation time?

Incorporating a personalized image to create custom icons on the Material UI bottom navigation bar

Trouble with triggering HTML5 FileReader() functions

Restrict the number of rows displayed in the ui-grid to the maximum

AngularJS: How Components Communicate by Interpolating Child Content

Sorting a Javascript table performs effectively, however, the results may vary when iterating through all the indexes

Which is the better option for setting a title: using .prop or .attr?

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

How can the dependencies object be extracted from the package.json file in an Angular project?

Switching perspective in express with Pug

Utilizing ExpressJS to refresh database query after new record insertion