AngularJS前端框架怎么用？angularjs前端框架的使用介绍

本篇文章主要介绍了关于angularjs的前端框架的学习，有哪些地方需要了解的都在这篇文章里面了。现在就一起来看这篇文章吧

一、AngularJS的主要简介：

          AngularJS 把应用程序数据绑定到 HTML 元素

          AngularJS 可以克隆和重复 HTML 元素

          AngularJS 可以隐藏和显示 HTML 元素

          AngularJS 可以在 HTML 元素"背后"添加代码

          AngularJS 支持输入验证 

二、AngularJS 指令特点：

           ng-directives 扩展了 HTML

           ng-model 指令把元素值（比如输入域的值）绑定到应用程序，也就是为了传给后台【如：】

           ng-bind 指令把应用程序数据绑定到 HTML 视图，也就是将后台数据绑定到前台

           ng-init初始化页面中的变量

           AngularJS 模块（Module） 定义了 AngularJS 应用。

           AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

三、AngularJS表达式：

            AngularJS 表达式写在双大括号内：{{ expression }}。

        AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

            AngularJS 将在表达式书写的位置"输出”数据。

四、AngularJS 表达式 与 JavaScript 表达式的区别

            类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量

            与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中

            与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常

            与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

五、AngularJS定义一个模块：

 var app = angular.module('myApp', []);

六、AngularJS指令学习：

• 【ng-init：数据初始化】

 1、初始化单一变量

b5259d1971bb4d9b1424313c30371923d3771b0717303fa4cff39e39630091b7姓名： 691bb466c2b5f01707230dab2ca0a502a40bb0e8c769d46bcc97ea6ddd88211f8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果：姓名：Doe】

 2、初始化Json对象

                     e9dccf23fd106a7ce4f96148f4a98cec d3771b0717303fa4cff39e39630091b7姓为 {{ person.lastName }}8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果：姓为Doe】

3、初始化数组对象(数组下标从0开始)

54752d7619d168ea644bd69bff3db3a5 d3771b0717303fa4cff39e39630091b7第三个值为 {{ points[2] }}8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果:第三个值为19】

•  【ng-model：数据同步】
  

        1、AngularJS利用ng-model进行数据绑定，同时向后台传递数据，在前台中只要两个相关联的数据，一方变化，另一方会立即变化

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

• 【ng-repeat：数据循环】

          1、AngularJS利用ng-repeat进行数据循环，循环的html标记是ng-repeat指令所在的标记

                        5febe34c59450fb17b70c81c5ffd10f9 

                                  d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                  94cf9f71896cce458971adf2bc978fb1

                                          4fa76e168b8fe1de649ff42059b63884 {{ x }} 00264599778bfef15205fe2f698216e0

                                  6f304873f188339d0626400a7defcfa7 

                        721bb74aac4891df28f85ad785726569【执行结果：li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 AngularJS应用程序的"所有者"。     

2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

3、ng-app 指令定义了 AngularJS 应用程序的 根元素

4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

•  <p ng-app="" ng-init="firstName=&#39;John’">
                       <p>姓名为 <span ng-bind=“firstName”></span></p>
           </p

•  【ng-bind：数据绑定】  
  

         1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

                 b5259d1971bb4d9b1424313c30371923d3771b0717303fa4cff39e39630091b7姓名： 691bb466c2b5f01707230dab2ca0a502a40bb0e8c769d46bcc97ea6ddd88211f8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果：姓名：Doe】

        2、初始化Json对象

                e9dccf23fd106a7ce4f96148f4a98cecd3771b0717303fa4cff39e39630091b7姓为 80e1ee0be408c8823763607582b4eb7554bdf357c58b8a65c66d7c19c8e4d1148c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果：姓为Doe】

        3、初始化数组对象(数组下标从0开始)

               00cdbc2a502756e17fe7bdcddae50c9a"points=[1,15,19,2,40]">d3771b0717303fa4cff39e39630091b7第三个值为 db80c1eb0a1b0d76143f35c0db5d795d54bdf357c58b8a65c66d7c19c8e4d1148c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e【执行结果:第三个值为19】

• 【ng-show：数据展示】

          1、ng-show指令在ng-show属性的值为true的情况下就会展示ng-show指令所在的标记内容          

                     0e3346f9c92cf5af12698cd9e19c82ef

                                 Email:
                              0645f261ff0afe5953360baff1c6cf2a
                              404d5fc4548a4f1322ee1338a50f0593不是一个合法的邮箱地址612c6cd20242388bb47a097ad38b8a1d
                     bec17bc5bdfc0158f09dbdba0bc6781b

             【 执行结果：当myAddress这个输入框输入的值是一个合法邮箱地址的话，那么“不是一个合法的邮箱地址”就不会展示，否则，就会展示！】

               {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)

               {{myForm.myAddress.$dirty}} (如果值改变则为 true)

               {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)【这些一般作为ng-show的判断条件】

•  【ng-options：下拉选择】
  

            1、创建代码

                      38d247cc6f194a6ae0be25dfeee0961d2376363133487cf819722d3da00a9c19{{x}}cd3986402bcab1ee9896644f6a19108e8b6da71f934e6257b5e5c30657e34a36

                    【ng-repeat的样例】

                      9cb68880835a0ffda6b7721f3a955d5118bb6ffaf0152bbe49cd8a3620346341

                    【ng-options的样例】

                二者的区别：

                                    ng-repeat 有局限性，ng-repeat选择的是一个字符串，而ng-options选择的是一个对象

•  【ng-disabled ：标示按钮属性是不是可用】

            1、true表示按钮不可用，false表示按钮可用

•  【ng-hide：标示着标记是否隐藏】
  

            1、true表示ng-hide所在的标记是隐藏的，false表示ng-hide所在的标记是显示的，和ng-show是相反的

•  【ng-click：AngularJS的点击事件】 
  

             1、ng-click指令定义了AngularJS点击事件

七、自定义指令的定义和使用

•  【.directive ：添加自定义指令】
  

  1、指令定义 

  app.directive("runoobDirective", function() {

  var app = angular.module("myApp", []);

   return {

          restrit:”A”,【限制该指令只能作为属性使用】

          template : "4a249f0d628e2318394fd9b75b4636b1自定义指令!473f0a7621bec819994bb5020d29372a"

   };

  });

• 2、指令的调用

  标记调用：9eac62d570131f7f59655271d1daab97bb3e39acffb0cb1eb34ac5189184c84a50a5060e782e2ee33f47fee8fe790817

  属性调用：d1a9d4ed60c125dd81db4a88c1eb61c8a4cedf65acd4fb804268b2c887e81816

  类名调用：6208f2ab02d27209293830bcd3c0f1e294b3e26ee717c64999d7867364b1b4a3

  注释调用：125706e163be50a35d5ee73089dc70b9 【执行结果：自定义指令！注意这执行结果不是注释】 
  

   3、限制指令使用范围(默认下是作为EA)
  

 E：作为元素名使用

 A：作为属性使用

 C：作为类名使用

 M：作为注释使用

【注意】1、type=“number”   表示此输入框是数字格式的，可以向上向下点击增加数字或者减少数字，但是允许输入非数字字符 

本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

以上是AngularJS前端框架怎么用？angularjs前端框架的使用介绍的详细内容。更多信息请关注PHP中文网其他相关文章！