Second app is not working in angular js

Question

Hi I am new to angular and I am trying to create 2 apps in a single HTML file but I am not getting the output for the second app and I am getting the proper output for the first app. Can anyone tell me where am I doing it wrong? The code is as below

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
            <title>The example for angular</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
            <style>
                input.ng-invalid {
                    background-color: lightcyan;
                }
    
            </style>
        </head>
        <body>
            <div ng-app="myApp">
                <div ng-controller="hello">
                    <p>{{firstname}}</p>
                </div>
                <div ng-init="Akshay=[
                            {firstname:'Sandeep',place:'mangalore'},
                    {firstname:'sirish', place:'haridwar'},
                    {firstname:'krish', place:'mathura'}]">
                    <div ng-repeat="name in Akshay">
                        {{name.firstname + ' ' + name.place}}
                    </div>
                </div>
                <div class="ang"></div>
                <form name="myForm">
                    <input type="email" name="emaild" ng-model="text">
                    <span ng-show="myForm.emaild.$error.email">Please enter the proper email</span>
                </form>
                <input type="text" ng-model="mytext" required>
            </div>
    
            <div ng-app="Appname" ng-controller="personCtrl">
                <input type="text" ng-model="firstName">
                <input type="text" ng-model="lastName">
                <p>His firstname was{{firstName}}</p>
                <p>His second name was {{lastName}} </p>
                <h1> His name was {{fullname()}} </h1>
    
            </div>
            <script>
                var app = angular.module("myApp", []);
                app.controller("hello", function ($scope) {
                    $scope.firstname = "Akshay";
                });
                app.directive("ang", function () {
                    return {
                        restrict: "C",
                        template: "This is a great time to be alive"
                    };
                });
    
                var appsec = angular.module('Appname', []);
                appsec.controller("second", function ($scope) {
                    $scope.firstName = "Bhagath";
                    $scope.lastName = "Singh";
                    $scope.fullname = function () {
                        return $scope.firstName + " " + $scope.lastName;
                    };
                });
    
    
            </script>
        </body>
    </html>

score 3 · Accepted Answer · answered Mar 17 '17 at 13:48

you can't bootstrap two module in single html file. According to Doc

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. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other

score 2 · Answer 2 · answered Mar 17 '17 at 14:24

you can use manual bootstrap method to bootstrap both the modules simultaneously

Modify the two boostrap lines to happen when the document is ready:

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

When modifying your plnkr in this way, both apps started working properly.

Live Demo : https://jsfiddle.net/samirshah1187/w7gv56t5/

score 0 · Answer 3 · answered Feb 21 '18 at 08:19

As @Samir said, we can use manual bootstrap method to bootstrap both the modules simultaneously we need to define id like this <div ng-app="myApp" id="myId"> <div ng-app="Appname" ng-controller="personCtrl" id="personId">,

and then add these lines at the end inside script

angular.bootstrap(document.getElementById('myId'), ['myApp']); angular.bootstrap(document.getElementById('personId'), ['Appname']);

we need to bootstrap the modules to have multiple ng-app within the same page.

Second app is not working in angular js

3 Answers3