很有用的AngularJS 介绍 _angularjs指令

带你走近系列：
带你走近 - 基本功能介绍带你走近 - 体验指令实例带你走近 - 创建自定义指令
------------------------------------------------------------------------------------------------
是推出的一款Web应用开发框架。它提供了一系列兼容性良好并且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块加载等。本文专注于指令的使用，在我们进入主题之前，我们将快速浏览的基本用法。
不仅仅是一个类库，而是提供了一个完整的框架。它避免了您和多个类库交互，需要熟悉多套接口的繁琐工作。它由的开发人员设计，引领着下一代Web应用开发。也许我们5年或10年后不会使用，但是它的设计精髓将会一直被沿用。
了解的开发人员，你肯定会为自定义指令（它的功能相当于.NET 平台下的自定义控件）功能感到兴奋。自定义指令允许你扩展HTML标签和特性。指令可以复用并且可以跨项目使用。
自定义指令已经得到了广泛的应用，其中值得一提的是-Wijmo控件集。它包含了近50款基于控件。Wijmo是用于创建桌面和移动Web应用程序的HTML5前端控件集。从交互式图表到强大的表格控件，Wijmo几乎包含了我们所需要的一切。可以从官网了解Wijmo的更多信息。所以，Wijmo是学习很好的参考示例：
创建自定义指令是非常容易的。指令可以测试、维护并且在多个项目中复用。
使用, 需要在HTML页面引用脚本文件，给HTML或Body标签添加ng-app 特性。下面是一个使用的简单实例：
{{msg}}

当加载后，它会在文档中搜索ng-app 特性。这个标签通常被设置给项目的主要模块。一旦发现，就会对文档进行操作。
在这个例子中，ng-init 特性初始化了一个msg 变量“葡萄城控件团队博客”，ng-model 特性把它和input 控件进行了双向绑定（注意：大括号是绑定的标记）。会解析这个标记，随着input值改变实时更新msg 文本值。可以从链接查看效果:点击进入
模块
模块可以说是的根本。它包含配置、控制、过滤、工厂模式、指令及其它模块。
如果你熟悉.NET平台，但初步学习。下面的表格是一个简要的对比，帮助你理解中的角色扮演情况：
.NET
摘要
应用开发模块
控制器，启到不同层面间的组织作用
scope
为视图提供绑定数据

文章插图
数据传输到视图之前修改数据
可复用的UI元素，也可以理解为前端插件
,
为其他模块元素提供服务
例如，下面的代码使用控制器、过滤器和指令创建了一个模块：
// the main (app) modulevar myApp = angular.module("myApp", []);// add a controllermyApp.controller("myCtrl", function($scope) {$scope.msg = "grapecity team blog";});// add a filtermyApp.filter("myUpperFilter", function() {return function(input) {return input.toUpperCase();}});// add a directivemyApp.directive("myDctv", function() {return function(scope, element, attrs) {element.bind("mouseenter", function() {element.css("background", "yellow");});element.bind("mouseleave", function() {element.css("background", "none");});}});
上面示例中方法的第一个参数为模块的名称，第二个参数为它的依赖模块列表。我们创建了一个独立的模块，不依赖于其它模块。所以第二个参数为空数组（注意：即使它为空，我们也必须填写这个参数。否则，该方法回去检索之前的同名模块）。这部分我们将在后续的文章中详细阐述。
构造函数获取$scope 对象，用于存储所有暴露的接口和方法。scope 由传递到视图和指令层。在这个例子中，添加了msg 属性给scope对象。一个应用模块可以包含多个，每个各司其职，控制一个或多个视图。