I get the output only if I remove one of the directives i.e. ng-app - demo1 and the models. Why I can't have two ng-app working at the same time. I am new to Angular JS and building up my fundamentals. I get the desired output if I run one directive at a time. So, in this example if I remove the demo ng-app, scripts and controller, I get the desired output. If I remove the demo1 ng-app scripts and controller, I get the first part working fine. How can I get both the directives working at the same time?
<!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 output is
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
