为什么我不能在给定的HTML页面中使用两个ng-app指令-AngularJS？

Question

I get the output only if I remove one of the directives ie ng-app - demo1 and the models. 仅当我删除指令之一即ng-app-demo1和模型时，我才获得输出。 Why I can't have two ng-app working at the same time. 为什么我不能同时工作两个ng-app。 I am new to Angular JS and building up my fundamentals. 我是Angular JS的新手，并建立了自己的基础知识。 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. 因此，在此示例中，如果我删除了演示ng-app，脚本和控制器，则会得到所需的输出。 If I remove the demo1 ng-app scripts and controller, I get the first part working fine. 如果删除demo1 ng-app脚本和控制器，则第一部分工作正常。 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")}}

Answer 1

From the Docs: 从文档中：

There are a few things to keep in mind when using ngApp : 使用ngApp时要牢记以下ngApp ：

only one AngularJS application can be auto-bootstrapped per HTML document. 每个HTML文档只能自动引导一个AngularJS应用程序。 The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. 在文档中找到的第一个ngApp将用于定义根元素以作为应用程序自动引导。 To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. 要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们。

— AngularJS ng-app Directive API Reference — AngularJS ng-app指令API参考

为什么我不能在给定的HTML页面中使用两个ng-app指令-AngularJS？

问题描述

1 个解决方案

解决方案1
5 已采纳 2017-08-29 03:33:36

为什么我不能在给定的HTML页面中使用两个ng-app指令-AngularJS？

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-08-29 03:33:36

解决方案1
5 已采纳 2017-08-29 03:33:36