第二个应用程序在 angular js 中不工作

Question

嗨，我是 angular 的新手，我想在一个 HTML 文件中创建 2 个应用程序，但我没有得到第二个应用程序的输出，但我得到了正确的输出对于第一个应用程序。谁能告诉我我哪里做错了？代码如下

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

Answer 1

您不能 bootstrap 单个 html 文件中的两个模块。根据 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

Answer 2

您可以使用手动 bootstrap 方法同时 bootstrap 两个模块

修改文档准备就绪时发生的两个 boostrap 行：

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

以这种方式修改您的 plnkr 时，两个应用程序都开始正常工作。

现场演示：https://jsfiddle.net/samirshah1187/w7gv56t5/

Answer 3

正如@Samir 所说，我们可以使用手动 bootstrap 方法同时 bootstrap 两个模块我们需要像这样定义 id <div ng-app="myApp" id="myId"> <div ng-app="Appname" ng-controller="personCtrl" id="personId">,

然后在脚本的末尾添加这些行

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

我们需要 bootstrap 模块在同一页面中有多个 ng-app。

第二个应用程序在 angular js 中不工作

Second app is not working in angular js

javascript

angularjs

ng-controller

ng-app