1、创建module
//第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",["$scope",function($scope){ $scope.UserName="admin"; $scope.LoginTime=new Date().toString(); }]);
2、创建module且此模块要依赖其它module
// 创建module且此模块要依赖其它模块 // 第二个参数是依赖的模块名称,如果不依赖任何模块要传空数组[]。 // 注意:如果第二个参数不传,则是获取当前名称的模块 var my=angular.module('myApp',["headApp"]); my.controller("Content",["$scope",function($scope){ $scope.Text="this is a test page"; }]);
3、不同module有相同的controller时的调用方式
//如果当前模块和依赖具有相同的controller,则会调用当前模块的controller。 //当前模块没有此controller时,才会调用依赖模块中的controller //可以对下面的controller代码进行注释(或去掉注释),看页面的效果 // my.controller("User",["$scope",function($scope){ // $scope.UserName="admin123"; // $scope.LoginTime="2015-7-25"; // }]);
demo代码如下:
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>模块化</title> <script type="text/javascript" src="angular.js"></script> </head> <body> <div ng-controller="User"> <p>用户名:{{UserName}}</p> <p>登录时间:{{LoginTime}}</p> </div> <div ng-controller="Content"> <p>{{Text}}</p> </div> </body> </html> <script type="text/javascript"> //创建module //第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",["$scope",function($scope){ $scope.UserName="admin"; $scope.LoginTime=new Date().toString(); }]); // 创建module且此模块要依赖其它模块 // 第二个参数是依赖的模块名称,如果不依赖任何模块要传空数组[]。 // 注意:如果第二个参数不传,则是获取当前名称的模块 var my=angular.module('myApp',["headApp"]); my.controller("Content",["$scope",function($scope){ $scope.Text="this is a test page"; }]); //不同module有相同的controller时的调用方式 //如果当前模块和依赖具有相同的controller,则会调用当前模块的controller。 //当前模块没有此controller时,才会调用依赖模块中的controller //可以对下面的controller代码进行注释(或去掉注释),看页面的效果 // my.controller("User",["$scope",function($scope){ // $scope.UserName="admin123"; // $scope.LoginTime="2015-7-25"; // }]); </script>