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>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