什么是AngularJS指令?
什么是AngularJS指令?
我花了很多时间阅读AngularJS的文档和几个教程,对文档的难以理解感到很惊讶。
我有一个简单、可以回答的问题,对于其他想学习AngularJS的人也可能有用:
AngularJS指令是什么?
应该有一个简单、精确定义指令的地方,但是AngularJS官网提供了这些令人意外无用的定义:
在首页:
指令是AngularJS中独特且强大的功能。指令让您发明新的HTML语法,特定于您的应用。
在开发者文档中:
指令是教会HTML新技巧的一种方式。在DOM编译过程中,指令与HTML匹配并执行。这使得指令可以注册行为或转换DOM。
还有关于指令的一系列讲座,讽刺的是,这些讲座似乎假设听众已经了解指令是什么。
是否有人能够提供一个明确的定义,以便清楚参考,解释:
- 它是什么(以jQuery的明确定义为例)
- 它旨在解决什么实际问题和情况
- 它体现了什么设计模式,或者说它如何符合AngularJS所声称的MVC/MVW的使命。
AngularJS指令是用于创建对象和行为的结构,AngularJS解析这些指令以将其转换为工作的HTML / JavaScript代码。指令可以用于构建更复杂的组件,使用正确的语义。指令允许HTML标签具有更动态的行为,使其可以在面向对象编程中进行操作。
指令存在的主要原因是将行为和数据嵌入到语义结构化的组件中。这种方法与HTML和任意DOM节点的属性相关,而不是编写面向对象的JavaScript代码。
指令类似于动态模板,它封装了一个组件,通过属性和行为来描述组件,并能够实例化并在DOM中表达自己。
总结一下,AngularJS指令的出现是为了在语义结构化的组件中嵌入行为和数据,以使HTML标签具有更动态的行为,从而可以在面向对象编程中进行操作。解决方法是通过解析指令并将其转换为工作的HTML / JavaScript代码来实现这一目标。
什么是AngularJS指令?
AngularJS指令是用来扩展HTML的函数。每一个指令都有一个名称,例如ng-repeat、tabs、make-up-your-own,并且每个指令确定它可以在哪里使用,包括元素、属性、类、注释。指令通常只有一个链接函数,但复杂的指令可能有编译函数、前链接函数和后链接函数。
指令的最大优点是可以扩展HTML。你可以通过指令构建一个特定领域的应用程序,例如在线购物网站的指令可以有"shopping-cart"、"coupon"、"specials"等,而不是使用"div"和"span"。指令也可以将HTML组件化,将多个HTML组合成一个可重用的组件。
指令是操作DOM和捕获DOM事件的地方。指令的编译函数和链接函数都接收"element"作为参数,可以定义一个HTML模板来替换指令,绑定事件到元素或其子元素,添加/删除类,改变文本值,监听属性的变化等。
指令的存在可以将HTML DOM扩展成一个自定义的DSL,使得HTML语言可以以声明的方式进行扩展。
指令可以绑定到HTML标签上,也可以在注释中使用,但后者在使用上相对不常见。
总结起来,指令是用来扩展HTML的函数,可以绑定到HTML标签上,通过自定义的语法树使HTML DOM更加灵活,并允许开发者构建自定义的DSL。指令的存在能够解决HTML标签的刚性问题,使得HTML语言可以以声明的方式进行扩展。