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、初始化单一变量

<p ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： <span ng-bind="firstName + ' ' + lastName">span>p>p>【执行结果：姓名：Doe】

 2、初始化Json对象

                     <p ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}p>p>【执行结果：姓为Doe】

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

<p ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}p>p>【执行结果:第三个值为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指令所在的标记

                        <p ng-app="" ng-init="names=['Jani','Hege','Kai']”> 

                                  <p>使用 ng-repeat 来循环数组p> 

                                  <ul>

                                          <li ng-repeat="x in names"> {{ x }} li>

                                  ul> 

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

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，

元素是 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开发手册中学习）

                 <p ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： <span ng-bind="firstName + ' ' + lastName">span>p>p>【执行结果：姓名：Doe】

        2、初始化Json对象

                <p ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 <span ng-bind="person.lastName">p>p>【执行结果：姓为Doe】

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

               <p ng-app="" ng-initspan class="hl-quotes">"points=[1,15,19,2,40]"><p>第三个值为 <span ng-bind="points[2]”>p>p>【执行结果:第三个值为19】

• 【ng-show：数据展示】

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

                     <form ng-app="" name="myForm">

                                 Email:
                              <input type="email" name="myAddress" ng-model="text">
                              <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
                     </form>

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

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

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

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

•  【ng-options：下拉选择】
  

            1、创建代码

                      <select><option ng-repeat="x in names">{{x}}</option></select>

                    【ng-repeat的样例】

                      

                    【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 : "

  自定义指令!

  "

   };

  });

• 2、指令的调用

  标记调用：<runoob-directive></runoob-directive>

  属性调用：<p runoob-directive></p>

  类名调用：

  注释调用：

  

  热AI工具

  

  Undresser.AI Undress

  人工智能驱动的应用程序，用于创建逼真的裸体照片

  

  AI Clothes Remover

  用于从照片中去除衣服的在线人工智能工具。

  

  Undress AI Tool

  免费脱衣服图片

  

  Clothoff.io

  AI脱衣机

  

  Video Face Swap

  使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

  显示更多
  

  热门文章

  刺客信条阴影：贝壳谜语解决方案

  3 周前 By DDD

  Windows 11 KB5054979中的新功能以及如何解决更新问题

  2 周前 By DDD

  刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制

  1 个月前 By DDD

  在哪里可以找到原子中的起重机控制钥匙卡

  3 周前 By DDD

  <🎜>：死铁路 - 如何完成所有挑战

  3 周前 By DDD

  显示更多
  

  热工具

  

  记事本++7.3.1

  好用且免费的代码编辑器

  

  SublimeText3汉化版

  中文版，非常好用

  

  禅工作室 13.0.1

  功能强大的PHP集成开发环境

  

  Dreamweaver CS6

  视觉化网页开发工具

  

  SublimeText3 Mac版

  神级代码编辑软件(SublimeText3)

  显示更多
  

  热门话题

  gmail邮箱登陆入口在哪里

  7643

  15

  CakePHP 教程

  1392

  52

  steam的账户名称是什么格式

  91

  11

  win11激活密钥永久

  72

  19

  NYT连接提示和答案

  33

  151

  显示更多