When working with Angular JS, I've noticed that I only get the desired output if I remove either the ng-app directive for demo1 or the models. It seems like having two ng-app directives active at the same time causes issues. As a beginner in Angular JS, I am still trying to grasp the fundamentals and figure out why this limitation exists. By running each directive separately, I can get the desired output. For example, removing the demo ng-app, scripts, and controller allows me to see one part working fine while removing the demo1 ng-app, scripts, and controller shows the other part working. How can I make both directives work simultaneously?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<h1> Guru99 Global Event </h1>
<script src="lib/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-3.2.1.js"> </script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name: <input type="text" ng-model="tutorialName"> <br>
<br>
This tutorial is {{tutorialName}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope)
{
$scope.tutorialName = "Checking Angular JS" ;
}
);
</script>
<div ng-app="DemoApp1" ng-controller="DemoController1">
<! behaviour >
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp1', []);
app.controller('DemoController1',function($scope)
{
$scope.fullName=function(firstName, lastName)
{
return firstName + lastName;
}
});
</script>
</body>
</html>
The resulting output is as follows:
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}