menu
more_vert
angularjs1-3,工具方法,bootstrap,多个module,引入jquery

作者:dayu

--> <div id=‘div1‘ ng-controller="firstController" {{name}} </div> <div id=‘div2‘ ng-controller="secondController"> {{name}} </div> </div> //bootstrap不是css的bootstrap,一般一个页面只有一个module,bootstrap用于页面初始化多个module, <script type="text/javascript"> var app1 = angular.module("myApp1", []); var app2 = angular.module("myApp2", []);//报错,module只会初始化一次, app1.controller(firstController,function($scope){ $scope.name=张三; }); app2.controller(secondController,function($scope){ $scope.name=李四; }); var div1=document.getElementById(div1); var div2=document.getElementById(div2); document.onclick=function(){//动态加载多个module angular.bootstrap(div1,[myApp1]); angular.bootstrap(div2,[myApp2]); } </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="module02.js"></script>
<!-- module02.js:
var app2 = angular.module("myApp2", []);
app2.controller(‘secondController‘,function($scope){
    $scope.name=‘李四‘;
});
app2.controller(‘threeController‘,function($scope){
    $scope.name=‘王五‘;
});-->
</head>
<body ng-app="myApp">
<div>
    <div ng-controller="firstController">
        {{name}}
    </div>
    <div ng-controller="secondController">
        {{name}}
    </div>
    <div ng-controller="threeController">
        {{name}}
    </div>
</div>
<script type="text/javascript">
    var app1 = angular.module("myApp", [myApp2])//模块的依赖,[‘myApp2‘,‘myApp3‘]可以引入多个,这是插件化引入。
    app1.controller(firstController,function($scope){
        $scope.name=张三;
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    //jqueru要放在上面
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="module02.js"></script>
<!-- module02.js:
var app2 = angular.module("myApp2", []);
app2.controller(‘secondController‘,function($scope){
    $scope.name=‘李四‘;
});
app2.controller(‘threeController‘,function($scope){
    $scope.name=‘王五‘;
});-->
</head>
<body ng-app="myApp">
<div>
    <div ng-controller="firstController">
        <div id="obj1">
        </div>
        {{name}}
    </div>
    <div   ng-controller="secondController">
        {{name}}
    </div>
    <div   ng-controller="threeController">
        {{name}}
    </div>
</div>
<script type="text/javascript">
    var app1 = angular.module("myApp", [myApp2]);
    app1.controller(firstController,function($scope){
        $scope.name=张三;
       // $("#obj1").html(‘<span>尿道嗦嘎电视柜 v邓先生广东省高</span>‘);
           var obj1=document.getElementById(obj1);
            angular.element(obj1).html(这是angularjs中的jqlite);
    });
</script>
</body>
</html>

angularjs1-3,工具方法,bootstrap,多个module,引入jquery

原文地址:http://www.cnblogs.com/yaowen/p/7225147.html