angularJS启动多个ng-app

最新推荐文章于 2019-08-20 17:23:01 发布

maco_liao

最新推荐文章于 2019-08-20 17:23:01 发布

阅读量748

点赞数

分类专栏： Angular 文章标签： angularjs ng-app

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ng-app是angulajs模板引擎当中的一个十分重要的标签，从“app"这个字眼就不难看出其含义，在我理解为一个模块或者页面中的一个应用模型，在一个使用angularjs框架的页面中，很可能使用多个模块，原因是不同模块的业务逻辑不同，代码在理论上就不应该耦合在一起这样不利于维护。下面的几行代码展示了一种angularjs启动多个模块的demo.

PS：主页标红代码

<!DOCTYPE html>
<html >
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body >
    <div id="Lilei"  ng-controller="Textcontroller">
        <p>{{content.message}}</p>
    </div>
    <div id="Hanmeimei" ng-controller="Textcontroller">
        <p>{{content.message}}</p>
    </div>
</body>
</html>

<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script>
    var myapp1mod = angular.module('Lilei',[]);
    myapp1mod.controller('Textcontroller',function($scope){
        var content= {};
        content.message = "Hello Lilei";
        $scope.content= content;
    });

    var myapp2mod = angular.module('Hanmeimei',[]);
    myapp2mod.controller('Textcontroller',function($scope){
        var content= {};
        content.message = "Hello Hanmeimei";
        $scope.content= content;
    });

    angular.bootstrap(angular.element("#Lilei"),["Lilei"]);
    angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);

</script>

angular.bootstrap(angular.element("#Lilei"),["Lilei"]);
angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);

maco_liao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS启动多个ng-app

ng-app是angulajs模板引擎当中的一个十分重要的标签，从“app"这个字眼就不难看出其含义，在我理解为一个模块或者页面中的一个应用模型，在一个使用angularjs框架的页面中，很可能使用多个模块，原因是不同模块的业务逻辑不同，代码在理论上就不应该耦合在一起这样不利于维护。下面的几行代码展示了一种angularjs启动多个模块的demo.PS：主页标红代码 >
复制链接

扫一扫

专栏目录