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>
angularjs——module的更多相关文章
- AngularJS -- Module (模块)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组 ...
- Angularjs Module类的介绍及模块化依赖
后面的学习我们会遵循一个控制器管理一个视图,一个路由对应一个视图的单一原则,所以再不会将controller控制器代码直接写到 index.html 中. 我们会应用到angular.js中强大的模块 ...
- AngularJS-01.AngularJS,Module,Controller,scope
1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.( MVC ---- Model(模型).View(视图).Controller(控制器) ) ...
- angularJS module里的'服务'
首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> & ...
- AngularJS 30分钟快速入门【译】
引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...
- Integrating AngularJS with RequireJS
Integrating AngularJS with RequireJS When I first started developing with AngularJS keeping my contr ...
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
- Make AngularJS $http service behave like jQuery.ajax()(转)
There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
随机推荐
- Core开发-后台任务利器Hangfire使用
Core开发-后台任务利器Hangfire使用 ASP.NET Core开发系列之后台任务利器Hangfire 使用. Hangfire 是一款强大的.NET开源后台任务利器,无需Windows服务/ ...
- 有了screen,妈妈再也不用担心我的学习啦
创建一个srceen screen -S test1 从screen离开 crtl+a d (左手按住crtl和a 然后右手按d) 查看当前有多少screen screen -ls 回到screen ...
- ubuntu14.04 reaver不能正常使用
原帖地址: ubuntu14.04 reaver不能正常使用 http://forum.anywlan.com/thread-282404-1-1.html (出处: http://www.anywl ...
- 转:VC中UpdateData()函数的使用
VC中UpdateData()函数的使用 UpdateData(FALSE)与UpdateData(TRUE)是相反的过程 UpdateData(FALSE)是把程序中改变的值更新到控件中去 ...
- 使用ntfs的磁盘映射功能
当年95极受欢迎,是作为一个还算真正的32位系统.之前的3.1都是16位为基础的,很多api支持有限.相应的对于硬件性能的发掘还是值得肯定的 98对于95的取代是成功的,我想重要原因是图形尤其是游戏的 ...
- 美国易安信公司 EMC
EMC 提供了帮助您利用这一资产的工具.凭着我们的系统.软件.服务和解决方案,我们能够与您一道为您的公司打造一个综合性的信息基础架构.我们帮助客户设计.构建和管理智能.灵活而且安全的信息基础架构.这些 ...
- Highcharts教程2
参数配置(属性+事件) chart.events.addSeries:添加数列到图表中. chart.events.click:整个图表的绘图区上所发生的点击事件. chart.events.load ...
- [ES6] Promise
How to use: export default function getReplies(topicId){ return new Promise(function( resolve, rejec ...
- Android学习之多点触摸并不神秘
最近研究了一下多点触摸,写了个利用多点触摸来控制图片大小和单点触摸控制图片移动的程序,和大家分享分享. Android中监听触摸事件是onTouchEvent方法,它的参数为MotionEvent,下 ...
- Nuget找不到服务器
Nuget的新地址 http://nuget-prod-v2gallery.trafficmanager.net/api/v2/