angularjs——module

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>

  

 

猛戳代码测试地址

posted @ 2015-07-25 22:26  junjieok  阅读(451)  评论(0编辑  收藏  举报