很有用的AngularJS 介绍( 二 )


构造函数返回一个方法用于更改input文本的显示方式 。提供很多内置的,同时,你也可以添加自定义,操作方式内置相同 。在这个例子中,实现了小写到大写的转换 。不仅可以格式化文本值,还可以更改数组 。内置的格式化有、date、、和 。数组 有、和。需要设置参数,语法格式也是固定的:|::....
构造函数返回了一个方法,该方法用于传递一个元素,并依据scope中的参数对其进行修改 。示例中我们绑定了 和 事件用于切换文本高亮显示 。这是一个功能简单的指令,在后续的章节将展示如何创建一些复杂指令 。
下面是使用模块构建的页面:
{{msg | myUpperFilter }}

可以从链接查看效果:点击进入
注意应用中、和 作为特性值应用 。它们代表 对象,因此名称是区分大小写的 。指令的名称同样也是属性值,它作为HTML标签被解析,所以也是区分大小写的 。但 会自动转换这些特性为小写,例如“" 指令变成"my-dctv" (就像内置的指令ngApp, , 和会转换成 "ng-app", "ng-", 和"ng-model" 。
项目组织结构
使用 可以创建大型Web项目 。你可以把项目拆分为多个模块,把一个模块拆分为多个模块文件 。同时,可以按照你的使用习惯组织这些文件 。
列举一个典型的项目结构:
Root
.html
app.css

很有用的AngularJS 介绍

文章插图
home.html
.html
store.html
app.js
.js
.js
.js
.js
.js
.js
.js
.min.js
假设如果你仅希望项目中使用一个模块,你可以如此定义:
// app.jsangular.module("appModule", []);
如果希望在模块中添加元素,你可以通过名称调用模块向其中添加 。例如:.js文件包含以下元素:
// formatFilter.js// 通过名称获取模块var app = angular.module("appModule");// 向模块中添加filterapp.filter("formatFilter", function() {return function(input, format) {return Globalize.format(input, format);}}})
如果你的应用包含多个模块,注意在添加模块时添加其它模块的引用 。例如,一个应用包含三个模块app、、和data :
// app.js (名称为app的模块依赖于controls和data模块)angular.module("app", [ "controls", "data"])// controls.js (controls 模块依赖于data 模块)angular.module("controls", [ "data" ])// data.js (data 模块没有依赖项,数组为空)angular.module("data", [])
应用的主页面中需要声明ng-app 指令,会自动添加需要的引用:
...
进行以上声明后,你就可以在所有的页面中使用其它三个模块声明的元素了 。
【很有用的AngularJS 介绍】这篇文章中我们了解了的基本使用方法及结构 。在下一个章节中,我们将阐述基本的指令概念,同时,会创建一些实例来帮助你加深指令作用的理解 。