带你走近AngularJS - 基本功能介绍
带你走近AngularJS系列：
------------------------------------------------------------------------------------------------
AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块加载等。本文专注于AngularJS 指令的使用，在我们进入主题之前，我们将快速浏览AngularJS的基本用法。
AngularJS 不仅仅是一个类库，而是提供了一个完整的框架。它避免了您和多个类库交互，需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计，引领着下一代Web应用开发。也许我们5年或10年后不会使用AngularJS，但是它的设计精髓将会一直被沿用。
了解AngularJS的开发人员，你肯定会为AngularJS自定义指令（它的功能相当于.NET 平台下的自定义控件）功能感到兴奋。自定义指令允许你扩展HTML标签和特性。指令可以复用并且可以跨项目使用。
自定义指令已经得到了广泛的应用，其中值得一提的是-Wijmo控件集。它包含了近50款基于AngularJS 控件。Wijmo是用于创建桌面和移动Web应用程序的HTML5前端控件集。从交互式图表到强大的表格控件，Wijmo几乎包含了我们所需要的一切。可以从官网了解Wijmo的更多信息。所以，Wijmo是学习AngularJS很好的参考示例：AngularJS Directive Gallery
创建自定义指令是非常容易的。指令可以测试、维护并且在多个项目中复用。
使用AngularJS, 需要在HTML页面引用脚本文件，给HTML或Body标签添加ng-app 特性。下面是一个使用AngularJS的简单实例：
<html>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
</head>
<body ng-app ng-init="msg = '葡萄城控件团队博客'">
<input ng-model="msg" />
<p>{{msg}}</p>
</body>
</html>
当AngularJS 加载后，它会在文档中搜索ng-app 特性。这个标签通常被设置给项目的主要模块。一旦发现，Angular 就会对文档进行操作。
在这个例子中，ng-init 特性初始化了一个msg 变量“葡萄城控件团队博客”， ng-model 特性把它和input 控件进行了双向绑定（注意：大括号是绑定的标记）。AngularJS 会解析这个标记，随着input值改变实时更新msg 文本值。可以从链接查看效果:点击进入
AngularJS 模块
模块可以说是AngularJS 的根本。它包含配置、控制、过滤、工厂模式、指令及其它模块。
如果你熟悉.NET平台，但初步学习Angular。下面的表格是一个简要的对比，帮助你理解Angular中的角色扮演情况：
|
AngularJS |
.NET |
摘要 |
|
module |
Assembly |
应用开发模块 |
|
controller |
ViewModel |
控制器，启到不同层面间的组织作用 |
|
scope |
DataContext |
为视图提供绑定数据 |
|
filter |
ValueConverter |
数据传输到视图之前修改数据 |
|
directive |
Component |
可复用的UI元素，也可以理解为前端插件 |
|
factory, service |
Utility classes |
为其他模块元素提供服务 |
例如，下面的代码使用控制器、过滤器和指令创建了一个模块：
// the main (app) module
var myApp = angular.module("myApp", []); // add a controller
myApp.controller("myCtrl", function($scope) {
$scope.msg = "grapecity team blog";
}); // add a filter
myApp.filter("myUpperFilter", function() {
return function(input) {
return input.toUpperCase();
}
}); // add a directive
myApp.directive("myDctv", function() {
return function(scope, element, attrs) {
element.bind("mouseenter", function() {
element.css("background", "yellow");
});
element.bind("mouseleave", function() {
element.css("background", "none");
});
}
});
上面示例中module 方法的第一个参数为模块的名称，第二个参数为它的依赖模块列表。我们创建了一个独立的模块，不依赖于其它模块。所以第二个参数为空数组（注意：即使它为空，我们也必须填写这个参数。否则，该方法回去检索之前的同名模块）。这部分我们将在后续的文章中详细阐述。
controller 构造函数获取$scope 对象，用于存储所有controller 暴露的接口和方法。scope 由Angular 传递到视图和指令层。在这个例子中， controller 添加了msg 属性给scope对象。一个应用模块可以包含多个controller，每个controller各司其职，控制一个或多个视图。
filter 构造函数返回一个方法用于更改input文本的显示方式。Angular 提供很多内置的filter，同时，你也可以添加自定义filter，操作方式Angular内置filter相同。在这个例子中，实现了小写到大写的转换。Filter不仅可以格式化文本值，还可以更改数组。AngularJS 内置的格式化Filter有number、date、currency、uppercase和lowercase。数组 filter有filter、orderBy和 limitTo。Filter需要设置参数，语法格式也是固定的： someValue |filterName:filterParameter1:filterParameter2....
directive 构造函数返回了一个方法，该方法用于传递一个元素，并依据scope中的参数对其进行修改。示例中我们绑定了mouseenter 和mouseleave 事件用于切换文本高亮显示。这是一个功能简单的指令，在后续的章节将展示如何创建一些复杂指令。
下面是使用模块构建的页面：
<body ng-app="myApp" ng-controller="myCtrl">
<input ng-model="msg" />
<p my-dctv >
{{msg | myUpperFilter }}
</p>
</body>
可以从链接查看效果:点击进入
注意应用中module、controller和filter 作为特性值应用。它们代表JavaScript 对象，因此名称是区分大小写的。指令的名称同样也是属性值，它作为HTML标签被解析，所以也是区分大小写的。但AngularJS 会自动转换这些特性为小写，例如“myDctv" 指令变成"my-dctv" (就像内置的指令ngApp, ngController, 和ngModel会转换成 "ng-app", "ng-controller", 和"ng-model"。
项目组织结构
使用AngularJS 可以创建大型Web项目。你可以把项目拆分为多个模块，把一个模块拆分为多个模块文件。同时，可以按照你的使用习惯组织这些文件。
列举一个典型的项目结构：
Root
default.html
styles
app.css
partials
home.html
product.html
store.html
scripts
app.js
controllers
productCtrl.js
storeCtrl.js
directives
gridDctv.js
chartDctv.js
filters
formatFilter.js
services
dataSvc.js
vendor
angular.js
angular.min.js
假设如果你仅希望项目中使用一个模块，你可以如此定义：
// app.js
angular.module("appModule", []);
如果希望在模块中添加元素，你可以通过名称调用模块向其中添加。例如： formatFilter.js 文件包含以下元素：
// formatFilter.js
// 通过名称获取模块
var app = angular.module("appModule"); // 向模块中添加filter
app.filter("formatFilter", function() {
return function(input, format) {
return Globalize.format(input, format);
}
}})
如果你的应用包含多个模块，注意在添加模块时添加其它模块的引用。例如，一个应用包含三个模块app、controls、和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 会自动添加需要的引用：
<html ng-app="app">
...
</html>
进行以上声明后，你就可以在所有的页面中使用其它三个模块声明的元素了。
这篇文章中我们了解了AngularJS的基本使用方法及结构。在下一个章节中，我们将阐述基本的指令概念，同时，会创建一些实例来帮助你加深指令作用的理解。
相关阅读：
Wijmo已率先支持Angular4 & TypeScript 2.2
带你走近AngularJS - 基本功能介绍的更多相关文章
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS - 基本功能介绍
转载自:http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html (写得很好的Angular入门,可以试试) Angula ...
- 接近带给你AngularJS - 经验说明示例
接近带给你AngularJS列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- CentOS以及Oracle数据库发展历史及各版本新功能介绍, 便于构造环境时有个对应关系
CentOS版本历史 版本 CentOS版本号有两个部分,一个主要版本和一个次要版本,主要和次要版本号分别对应于RHEL的主要版本与更新包,CentOS采取从RHEL的源代码包来构建.例如CentOS ...
- QTP的基本功能介绍
• QTP的基本功能介绍 HP QuickTest Professional 支持功能測试和回归測试自己主动化,用于每一个主要软件应用程序和环境.此解决方式使用keyword驱动的測试概念,简化了測试 ...
随机推荐
- sqlmap 帮助信息
Usage: sqlmap.py [options] 选项: -h, --help 显示基本的帮助信息并退出 -hh 显示高级的帮助信息并退出 --version 显示程序版本号并退出 -v VERB ...
- [已解决]：调用 LoadLibraryEx 失败，在 ISAPI 筛选器 "c:\Windows\Microsoft.NET\Framework\v4.0.30319\\aspnet_filter.
现象:我的是 win7, iis7, 64bit, 打开网站错误如下: 错误摘要 HTTP 错误 500.0 - Internal Server Error 调用 LoadLibraryEx 失败,在 ...
- linux 负载均衡
[博文推荐]关于负载均衡技术使用的一些误区 如今,负载均衡已经不是一个新鲜的词,也不是什么新技术,主要用于解决单机负载能力的局限性,但问题是你的应用真的到了单 机的负载上限了吗,未必,很多不知道如何推 ...
- ODAC (odp.net) 从开发到部署
2013-09-30 16:08 4097人阅读 评论(0) 收藏 举报 分类: Oracle(10) 版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 确定你开发机和服务器的操作系统是 ...
- SOAPUI使用教程-REST请求工作
双击一个REST请求在导航打开的REST请求编辑器窗口: 就像相应的SOAP请求编辑器,这个窗口有以下几部分组成: 工具栏在顶部有标准动作的和端口的下拉菜单轻松修改服务端口 请求编辑器左侧有相应编辑视 ...
- 微信——获取用户基本信息及openid 、access_token、code
获取用户信息,需要获取 access_token.openid 然后调用接口https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCES ...
- 【系统篇】从int 3探索Windows应用程序调试原理
探索调试器下断点的原理 在Windows上做开发的程序猿们都知道,x86架构处理器有一条特殊的指令——int 3,也就是机器码0xCC,用于调试所用,当程序执行到int 3的时候会中断到调试器,如果程 ...
- javax.mail 发送邮件异常
一.运行过程抛出异常 1.Exception in thread "main" java.lang.NoClassDefFoundError: com/sun/mail/util/ ...
- java分享第十八天-02( java结合testng，利用XML做数据源的数据驱动)
testng的功能很强大,利用@DataProvider可以做数据驱动,数据源文件可以是EXCEL,XML,YAML,甚至可以是TXT文本.在这以XML为例:备注:@DataProvider的返回值类 ...
- 日常关键字：定时关机、该任务映像已损坏或已篡改.(0x80041321)、ChaZD生词同步扇贝
我在床上用chinanet网络慢得简直令人发指,12B/S.是的你没有看错,这是我最常看到的网速.但是我最近发现电脑联网开出一个WiFi,在床上用手机上网时,网速会一点提升,可达到1KB/S(⊙﹏⊙) ...