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>

　　

猛戳代码测试地址

angularjs——module的更多相关文章

  1. AngularJS -- Module (模块)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组 ...

  2. Angularjs Module类的介绍及模块化依赖

    后面的学习我们会遵循一个控制器管理一个视图,一个路由对应一个视图的单一原则,所以再不会将controller控制器代码直接写到 index.html 中. 我们会应用到angular.js中强大的模块 ...

  3. AngularJS-01.AngularJS,Module,Controller,scope

    1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.(  MVC ---- Model(模型).View(视图).Controller(控制器) ) ...

  4. angularJS module里的'服务'

    首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> & ...

  5. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  6. Integrating AngularJS with RequireJS

    Integrating AngularJS with RequireJS When I first started developing with AngularJS keeping my contr ...

  7. 4.了解AngularJS模块和依赖注入

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...

  8. Make AngularJS $http service behave like jQuery.ajax()(转)

    There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...

  9. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

随机推荐

  1. Python自动化运维之6、函数装饰器

    装饰器: 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator),装饰器的功能非常强大.装饰器一般接受一个函数对象作为参数, ...

  2. 项目设计&重构&性能优化

    漫谈项目设计&重构&性能优化 重构的好处:重构能够改进软件设计,随着项目需求的变更,项目体积的变大早已与最初的设计大相径庭,代码结构变得凌乱.复杂,如果不进行重构,则很难添加新的功能. ...

  3. 51单片机C语言学习笔记7：关于.c文件和.h文件

    1)h文件作用 1 方便开发:包含一些文件需要的共同的常量,结构,类型定义,函数,变量申明: 2 提供接口:对一个软件包来说可以提供一个给外界的接口(例如: stdio.h). 2)h文件里应该有什么 ...

  4. 如何判断一个C++对象是否在堆栈上（通过VirtualQuery这个API来获取堆栈的起始地址，然后就可以得到答案了），附许多精彩评论

      昨天有人在QQ群里问到如何判断一个C++对象是否在堆栈上, 我在网上搜索了下, 搜到这个么一个CSDN的帖子http://topic.csdn.net/t/20060124/10/4532966. ...

  5. mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

    在连接字符串中  添加设置节点 ConnectionLifeTime(计量单位为 秒).超过设定的连接会话 会被杀死! Connection Lifetime, ConnectionLifeTime ...

  6. rsyslog kill 测试重发例子

    [root@dr-mysql01 zjzc_log]# >zj-frontend01-error.2016-09-26 [root@dr-mysql01 zjzc_log]# [root@dr- ...

  7. 【转】如何在 Android 程序中禁止屏幕旋转和重启Activity

    原文网址:http://www.cnblogs.com/bluestorm/p/3665890.html 禁止屏幕随手机旋转变化 有时候我们希望让一个程序的界面始终保持在一个方向,不随手机方向旋转而变 ...

  8. 【转】【Android UI设计与开发】之详解ActionBar的使用，androidactionbar

    原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...

  9. 手机上使用asmack开发xmpp客户端

    openfire服务端,smack:     下载地址:http://www.igniterealtime.org/downloads/index.jsp     源代码:http://www.ign ...

  10. redis 异常排查

    异常排查 redis-server redis.windows.conf D:\redis-2.8.17>redis-server.exe redis.windows.conf[4692] 27 ...