AngularJS中一个HTML文档启动多个应用

最新推荐文章于 2023-05-31 08:50:13 发布

DayBreak2020

最新推荐文章于 2023-05-31 08:50:13 发布

阅读量711

点赞数

分类专栏： AngularJS 文章标签： angularjs 指令 ng-app 应用启动

本文链接：https://blog.csdn.net/stickallthetime/article/details/44780435

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、ng-app指令自动启动应用
一个html文档一般只使用ng-app指令定义一个angular应用，例如在AngularJS简单的helloworld示例中ng-app定义在<html> 节点上，整个文档当成一个angular应用。这种情况下，我们只要在js文件中定义好对应的控制器，应用就能自动的启动，数据模型和模板就能绑定形成视图。那么，当在一个html文档中定义多个ng-app时，是否多个应用都能够正常的启动，并进行数据模型和模板的绑定形成视图了，首先看一下下面的例子：
(1)mutilngapp.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"></meta>
    <script src="angular.js"></script>
    <script src="mutilngapp.js"></script>
</head>
<body>
    <div id="app1" ng-app="app1">
        <div ng-controller="controller">
            <div>{{name}}</div>
        </div>
    </div>
    <div id="app2" ng-app="app2">
        <div ng-controller="controller">
            <div>{{name}}</div>
        </div>
    </div>
</body>
</html>

(2)mutilngapp.js

var app1 = angular.module("app1", []);
app1.controller("controller", ["$scope", function ($scope) {
    $scope.name = "app1";
}]);

var app2 = angular.module("app2", []);
app2.controller("controller", ["$scope", function ($scope) {
    $scope.name = "app2";
}]);

(3)运行结果
这里写图片描述
(4)结果分析
通过运行结果可以看到，只有第一个应用能够正常启动，并进行数据模型和模板的绑定形成视图。也就是说，在一个html文档里使用ng-app指令定义多个应用是，angular只会自动启动第一个使用ng-app定义的应用，后面的应用都不能启动。

二、手动启动多个应用
当需要在一个html文档里同时启动多个应用时，angularJS提供了angular.bootstrap(element, [modules]); 这个函数来启动应用。
看下面的例子：
(1)mutilngapp.html
注意这个html文档与上面的区别，去掉了ng-app指令

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"></meta>
    <script src="angular.js"></script>
    <script src="mutilngapp.js"></script>
</head>
<body>
    <div id="app1">
        <div ng-controller="controller">
            <div>{{name}}</div>
        </div>
    </div>
    <div id="app2">
        <div ng-controller="controller">
            <div>{{name}}</div>
        </div>
    </div>
</body>
</html>

（2）mutilngapp.js

angular.element(document).ready(function() {
        var app1 = angular.module("app1", []);
        app1.controller("controller", ["$scope", function ($scope) {
            $scope.name = "app1";
        }]);
        var app1DOM = document.getElementById("app1");

        var app2 = angular.module("app2", []);
        app2.controller("controller", ["$scope", function ($scope) {
            $scope.name = "app2";
        }]);
        var app2DOM = document.getElementById("app2");

        angular.bootstrap(app1DOM, ['app1']);
        angular.bootstrap(app2DOM, ['app2']);
});