AngularJS的表达式、指令的学习（2）

                     最近没有那么忙，就来系统学习一下AngularJS吧，昨天简单的认识了一下，今天就从表达式入手吧，嘿嘿。

              一、AngularJS 表达式

            AngularJS表达式写在双大括号内：{{expression}}，把数据绑定到HTML，其实和与ng-bind是一样的实现，在表达式书写的位置"输出"数据，既可以直接写表达式，而在页面呈现时间就是直接输出的表达式的结果。AngularJS 表达式很像JavaScript表达式：它们可以包含文字、运算符和变量。

             （1）、AngularJS与javascript的对比

              <1>、AngularJS数字与javascript的对比

             

              在浏览器中呈现的结果如下：

            

                      <2>、AngularJS字符串javascript的对比

             

              在浏览器中呈现的结果如下：

             

              <3>、AngularJS对象与javascript的对比

             

              在浏览器中呈现的结果如下：

             

              <4>、AngularJS数组与javascript的对比

              

               在浏览器中呈现的结果如下：

               

              （2）、使用ng-init实现以上实例的相同

               <1>、AngularJS数字使用ng-init来把表达式的值绑定在html中

              

               在浏览器中呈现的结果如下：

              

                       <2>、AngularJS字符串使用ng-init来把表达式的值绑定在html中

                      

                       在浏览器中呈现的结果如下：

                      

                       <3>、AngularJS对象使用ng-init来把表达式的值绑定在html中

             

              在浏览器中呈现的结果如下：

             

              <4>、AngularJS数组使用ng-init来把表达式的值绑定在html中

             

              在浏览器中呈现的结果如下：

             

              综上所述，我们可以看到类似于JavaScript 表达式，AngularJS表达式可以包含字母，操作符以及变量，与JavaScript 表达式不同，AngularJS表达式可以写在HTML中，但是AngularJS不支持条件判断，循环及异常。更不同的是AngularJS表达式支持过滤器。

              二、AngularJS指令

            AngularJS 通过被称为“指令”的新属性来扩展 HTML，前面就介绍过AngularJS指令是扩展的HTML属性，带有前缀ng-；ng-app指令初始化一个AngularJS应用程序；ng- init指令初始化应用程序数据；而ng-model指令把元素值（比如输入域的值）绑定到应用程序。

                     （1）、ng-model指令把元素值（比如输入域的值）绑定到应用程序。

             

              在浏览器中呈现的结果如下：

             

              ng-app指令告诉 AngularJS，<div> 元素是AngularJS应用程序的"所有者".

             （2）、数据绑定

              上 面实例中的{{firstName}}表达式是一个AngularJS数据绑定表达式，AngularJS中的数据绑定，同步了AngularJS表达式 与AngularJS数据，{{firstName}}是通过ng-model="firstName"进行同步，如下实例中，两个文本域是通过两个 ng-model指令同步的：

              

               在浏览器中呈现的结果如下：

              

               （3）、重复Html元素

              

               在浏览器中呈现的结果如下：

              

               或者ng-repeat指令用在一个对象数组上：

              

               在浏览器中呈现的结果如下：

              

               由上面的几个小实例我们就总结一下吧简单：

               ng-app指令定义了AngularJS应用程序的根元素，在网页加载完毕时会自动引导（自动初始化）应用程序。

               ng-init指令为AngularJS应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

               ng-model指令绑定HTML元素到应用程序数据。ng-model指令也可以为应用程序数据提供类型验证（number、email、 required），或者为应用程序数据提供状态（invalid、dirty、touched、error），也可以为HTML元素提供CSS类以及绑 定HTML元素到HTML表单。

               ng-repeat指令对于集合中（数组中）的每个项会克隆一次HTML元素。

               今天就写到这里啦，嘿嘿，明天继续的啦。我只是从基础学起的哦，嘿嘿，加油加油！

转载于:https://www.cnblogs.com/dyxd/p/4942786.html