AngularJS 二 指令介绍

初始化AngularJS框架

ng-app指令:

    在NG-程序指令是AngularJS应用程序的起点。它自动初始化AngularJS框架。AngularJS框架将在加载整个文档之后首先检查HTML文档中的ng-app指令,如果找到ng-app,它将自行引导并编译HTML模板。

ng-app指令应该放置在HTML文档的根目录,例如<html>或<body>标签,以便它可以控制整个DOM层次结构。但是,您可以将其放置在任何DOM元素中

ng-app模块名称:

ng-app指令也可以指定一个应用程序模块名称。这个应用程序模块分离你的应用程序的不同部分,如控制器,服务,过滤器等。

手动引导:

 我们已经了解到,ng-app指令会自动初始化一个AngularJS框架但是,我们也可以手动初始化AngularJS,而不使用ng-app指令。

 

在上面的例子中,我们调用angular.bootstrap()函数并指定根元素,它是文档对象这将初始化AngularJS并编译从根元素开始的所有元素,即本例中的整个文档。

AngularJS表达式:

AngularJS表达式就像使用大括号括起来的JavaScript表达式 - {{expression}}AngularJS评估指定的表达式并将结果数据绑定到HTML。

AngularJS表达式可以包含文字运算符JavaScript表达式等变量例如,一个表达式{{2/2}}将产生结果1并且将被绑定到HTML

AngularJS表达式就像JavaScript代码表达式,除了以下区别:

  1. AngularJS表达式不能包含条件,循环,异常或正则表达式,例如if-else,ternary,for循环,while循环等。
  2. AngularJS表达式不能声明函数
  3. AngularJS表达式不能包含逗号或空格
  4. AngularJS表达式不能包含return关键字

AngularJS表达式包含任何数据类型的文字。

    

 AngularJS表达式可以包含算术运算符,这些运算符将根据操作数的类型产生结果,类似于JavaScript:

AngularJS表达式可以包含通过ng-init指令声明的变量ng-init指令用于声明任何数据类型的AngularJS应用程序变量

 

AngularJS指令:

  指令是DOM元素上的标记,它告诉AngularJS将指定的行为附加到该DOM元素,甚至转换DOM元素及其子元素。总之,它扩展了HTML。

 AngularJS中的大多数指令都是以ng-ng代表Angular的地方开始的AngularJS包含各种内置指令。除此之外,您可以为您的应用程序创建自定义指令。

NG-APP:

  ng-app指令初始化AngularJS并使指定的元素成为应用程序的根元素。上面介绍了三种初始化的方式。

NG-Init:

   ng-init指令可以用来在AngularJS应用程序中初始化变量。

NG-Model:

ng-model指令用于AngularJS中的双向数据绑定。它将<input>,<select>或<textarea>元素绑定到 $ scope 对象上的指定属性所以,元素的值将是一个属性的值,反之亦然。 

注:在ng-init中初始化的变量不同于使用ng-model指令定义的属性。ng-init中初始化的变量不附加到$ scope对象,而ng-model属性附加到$ scope对象。($ scope下篇介绍)

NG-Bind:

ng-bind指令将通过$ scope或ng-model指令声明的模型属性或表达式的结果绑定到HTML元素。如果表达式的值发生变化,它也会更新一个元素。

 

NG-Repeat:

ng-repeat指令对指定数组集合中的每个项目重复一次HTML。  适用于下拉框很好用

                 

NG-IF:

 ng-if指令根据从指定表达式返回的布尔值创建或删除一个HTML元素如果一个表达式返回true,那么它将重新创建一个元素,否则从HTML文档中删除一个元素。

NG-ReadOnly:

ng-readonly指令根据从指定表达式返回的布尔值使HTML元素为只读如果一个表达式返回true,那么该元素将变为只读,否则不会。

NG-Disabled:

ng-disabled指令根据从指定表达式返回的布尔值禁用HTML元素如果表达式返回true,则元素将被禁用,否则不会。

指令语法:

AngularJS指令可以以多种方式应用于DOM元素。ng-使用语法不是强制性的

指令可与开始x-data-,例如 ng-model 指令可以写为 data-ng-modelx-ng-model

此外,-该指令可以替换:_或两者兼而有之。例如,ng-model可以写成ng_model或ng:model。它也可以是一个混合data-x-

以下示例演示了指令语法的所有规则。

 

访问AngularJS文档来学习所有的内置指令

原文地址:https://www.cnblogs.com/Sea1ee/p/8136456.html