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>