使用模块定义AngularJS组件
一、模块创建/查找 module
当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖
var myApp=angular.module("exampleApp",[]);
如果没有requires参数,则为查找该模块
var myApp=angular.module("exampleApp");
二、定义控制器 controller
myApp.controller("dayCtrl",function($scope){
// do something
})
控制器是用module.controller方法来定义的,该方法接收两个参数:控制器名称和一个工厂函数。
在创建控制器时提供的参数$scope组件是用于向视图提供数据的,而且只有通过$scope配置的数据才能用于表达式和数据绑定中。
三、定义指令 directive
调用module.directive方法,提供要创建的指令的名称以及一个用于创建指令的工厂函数即可。
myApp.directive("directiveName",function(){
// 工厂函数
return function(scope,element,attrs){
// 工人函数
}
})
不能够依赖于工厂函数或工人函数在某个特定时刻被调用。当你想注册一个构件时,你得调用module方法(此处是directive方法)。当建立构件时angularjs将调用工厂函数,然后当需要使用该构件时就会调用工人函数,这三个事件不一定按顺序立即调用(也就是说,在你的工厂函数被调用前其他module方法有可能被调用,在你的工人函数被调用前其他工厂函数也有可能被调用)。
工人函数的三个参数分别为:scope视图的作用域,用于检查在视图中可用的数据,element指令所应用到的元素,是一个jqLite对象,attrs该元素的属性,提供了指令所应用到的元素的属性的完整集合。
四、定义过滤器 filter
filter方法用于定义一个过滤器,其参数是新过滤器的名称以及一个在调用时将会创建过滤器的工厂函数。过滤器本身就是函数,接受数据值并进行格式化,这样就可以显示该值了。
myApp.filter("filterName",function(){
// 工厂函数
return function(data){
// 工人函数
}
})
1)使用过滤器
过滤器应用在视图里所包含的模板表达式中。数据绑定或者表达式后紧跟一个竖线(“|”字符)以及过滤器的名称
{{day|filterName}}
2) 引入过滤服务$filter
向指令的工厂函数里添加一个$filter参数,用于告诉angular当我的函数被调用时要接收的过滤器服务对象。$filter服务允许我访问所有已定义的过滤器,包括自定义的过滤器,通过名称获取过滤器。
var f=$filter("filterName");
五、定义服务 service factory provider
服务是提供在整个应用程序中所使用的任何功能的单例对象。单例的意思是说只有一个对象实例会被angular创建出来,并被程序需要服务的各个不同部分所共享。
1)service
myApp.service("serviceName",function(){
this.name="Mary";
this.age="18";
})
service方法具有两个参数:服务名和调用后用来创建服务对象的工厂函数。当angular调用工厂函数时,会分配一个可通过this关键字访问的新对象。
2)value
module.value用于创建返回固定值和对象的服务。
myApp.value("valueName",value);
AngularJS假设工厂函数的任意参数都声明了需要解析的依赖。如下
var now=new Date();
myApp.service("days",function(now){
this.today=now.getDay();
})
这段代码将报错,因为调用工厂函数时,Angular不会为now参数使用哪个局部变量,当引用now变量时它已经不再作用域中了。
因此你可以这样使用:
var now=new Date();
myApp.value("nowValue",now);
myApp.service("days",function(nowValue){
this.today=nowValue.getDay();
}) 或者 利用闭包 var now=new Date();
myApp.service("days",function(){
this.today=now.getDay();
})
3) constant
这个方法与value类似,但是创建的服务可以作为config方法所声明的依赖使用(值服务却做不到这一点)
六、config & run
module.config和module.run方法注册了那些在angularJS应用的生命周期的关键时刻所调用的函数。传给config方法的函数在当前模块被加载后调用,config方法通常通过注入来自其他服务的值(比如链接的详细信息或者用户凭证)的方式用于配置模块。传给run方法的函数在所有模块被加载后以及解析完他们的依赖后才会被调用。
myApp.config(function(){ })
.run(function(){ })
使用模块定义AngularJS组件的更多相关文章
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 通俗的讲,就是高层模块定义接口,低层模块负责实现。 Bob Martins对DIP的定义: 高层模块不应依赖于低层模块,两者应该依赖于抽象。 抽象不不应该依赖于实现,实现应该依赖于抽象。
通俗的讲,就是高层模块定义接口,低层模块负责实现. Bob Martins对DIP的定义: 高层模块不应依赖于低层模块,两者应该依赖于抽象. 抽象不不应该依赖于实现,实现应该依赖于抽象. 总结出使用D ...
- 基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理
在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询.详细资料查看.新增资料.编辑资料.导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于V ...
- CMD规范(通用模块定义规范)(翻译)
最近在使用sea.js.大家知道sea.js遵循CMD规范.该规范的英文说明很简洁,我试着翻译了一下,旨在交流. Common Module Definition 通用模块定义规范 This spec ...
- Sea.js学习3——Sea.js的CMD 模块定义规范
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...
- 详解模块定义(.def)文件
一个完整的Windows应用程序(C++程序)通常由五种类型的文件组成:源程序文件,头文件,资源描述文件,项目文件,模块定义文件.本文主要讲解模块定义文件. 模块定义 (.def)文件为链接器提供有关 ...
- 2016-03-15:关于VS中模块定义文件
1 def模块定义文件 在使用开源库libx265时,因x265项目的头文件x265中有如下的宏定义 #ifdef X265_API_IMPORTS #define X265_API __declsp ...
- CMD 模块定义规范
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...
随机推荐
- tinkcmf视频上传大小限制
/application/Common/Common/function.php 找到upload_max_filesize把后面的数值改成合适的大小(单位是KB)
- win10 请求操作需要提升解决方案
记录一下: win10 系统管理员 打开后缀为 .xxx 的文件时, 系统提示: 请求操作需要提升 网上搜索了一下,原因是权限不够,故系统提示. 给当前用户加入了 管理员权限,各种权限都无效. ...
- js判断类型为数字的方法实现总汇——原生js判断isNumber()
方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...
- docker容器时区问题
原文:docker容器时区问题 版权声明:本文为博主原创文章,随意转载. https://blog.csdn.net/Michel4Liu/article/details/80890868 本系列目录 ...
- 使用 store 来优化 React 组件
在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是提升状态到父组件.但是这样做会有一个问题,就是尽管只有两个组件需要这个状态,但是因为把状态提到了父 ...
- python 正则表达式常用操作符
- bzoj3899 弦论
好久没有更blog了啊... 对于一个给定长度为N的字符串,求它的第K小子串是什么. 这是一个SAM的模板题. 我好弱啊这个时候才开始学SAM,才会用指针. 要维护3个东西:每个状态right集合的大 ...
- 构造器 构造方法 constructor
构造器的作用: 1.创建对象. 设计类时,若不显示的声明类的构造器的话,程序会默认提供一个空参的构造器. 一旦显示的定义了构造器,就不再默认提供. 声明类的构造器:权限修饰符 与类同名(形参){} 类 ...
- 2019.9.10附加题while练习
题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之 ...
- postman测试接口各种类型传值
postman测试接口各种类型传值 标签: postman测试 json串 Map 2018年01月27日 02:32:00 145人阅读 评论(0) 收藏 举报 1.Map类型或实体类类型传值,即j ...