AngularJs一个页面多个ng-app的问题

最新推荐文章于 2019-09-25 09:15:00 发布

smile_spart

最新推荐文章于 2019-09-25 09:15:00 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： AngularJs入门

本文链接：https://blog.youkuaiyun.com/smile_spart/article/details/78604180

AngularJs入门专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Angular项目中实现多个ng-app模块的手动加载，并通过示例代码展示具体实现过程，帮助开发者理解Angular模块化的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Angular中，一个页面只有第一个ng-app起作用，若想启动多个ng-app的话，可以手动加载，只需要再加一行代码即可。

如下：

<body>
    <!-- 可以手动装载除了第一个以外的多个ng-app -->
    <div id="app1div" ng-app="myApp1" ng-controller="personCtrl">
        <p>personCtrl</p>
        First name:<input type="text" ng-model="firstName"/>
        Last name:<input type="text" ng-model="lastName"/>
        Full name:{{ fullName() }}
    </div><br><br>

    <div id="app2div" ng-app="myApp2" ng-controller="personCtrl">
        <p>personCtrl</p>
        First name:<input type="text" ng-model="firstName"/>
        Last name:<input type="text" ng-model="lastName"/>
        Full name:{{ fullName() }}
    </div>

    <script type="text/javascript">
        var app1 = angular.module('myApp1',[]);
        var app2 = angular.module('myApp2',[]);

        app1.controller('personCtrl',function($scope){
            $scope.firstName = 'Aaron';
            $scope.lastName = 'Smith';
            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }
        });

        app2.controller('personCtrl',function($scope){
            $scope.firstName = 'Andy';
            $scope.lastName = 'Wi';
            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }
        });
        angular.bootstrap(document.getElementById("app2div"),['myApp2']);
    </script>
</body>