angularjs 模塊與控制器 (多個模塊module?? 多個控制器controller??)


angularjs 中只能有一個模塊module(ng-app=""),一個模塊可以有多個控制器(ng-controller="")

自己試驗的時候,js跟頁面可以寫在一塊,但是大型項目開發中,最好做到html與js分離,便於以后維護。

 

 

 

下圖所示:ng-app只能有一個,一個ng-app 中可以有多個controller ;定義多個ng-app時無意義。

運行效果圖如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs模塊 控制器</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
    <script>
        myapp1 = angular.module('myapp1', []);
        myapp1.controller('mycon1', function ($scope) {
            $scope.num1 = 0;
            $scope.click1 = function() {
                $scope.num1 += 1;
            };
        });
        myapp1.controller('mycon2', function($scope) {
            $scope.num2 = 0;
            $scope.click2 = function() {
                $scope.num2 += 1;
            };
        });



        myapp3 = angular.module('myapp3', []);
        myapp3.controller('mycon3', function ($scope) {
            $scope.num3 = 0;
            $scope.click3 = function () {
                $scope.num3 += 1;
            };
        });
    </script>
</head>
<body>
    <div ng-app="myapp1">
        <div ng-controller="mycon1">
            <input type="button" value="+1" ng-click="click1()"/>
            <p>{{num1}}</p>
        </div>
        
        
        <div ng-controller="mycon2">
            <input type="button" value="+1" ng-click="click2()"/>
            <p>{{num2}}</p>
        </div>
        

    </div>
    
    
    <div ng-app="myapp3">
        <div ng-controller="mycon3">
            <input type="button" value="+1" ng-click="click3()"/>
            <p>{{num3}}</p>
        </div>
    </div>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM