首页 / ANGULAR / AngularJS前端框架怎么用？angularjs前端框架的使用介绍

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS前端框架怎么用？angularjs前端框架的使用介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6302字，纯文字阅读大概需要10分钟。

内容图文

本篇文章主要介绍了关于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，<p> 元素是 AngularJS应用程序的"所有者"。

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

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

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

  •  <p ng-app="" ng-init="firstName='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"></span></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]”></span></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的样例】

<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>

【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 : "<h1>自定义指令!</h1>"
    };
    });

  • 2、指令的调用

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

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

    类名调用：<p class="runoob-directive"></p>

    注释调用：<!-- directive: runoob-directive —> 【执行结果：自定义指令！注意这执行结果不是注释】

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

E：作为元素名使用

A：作为属性使用

C：作为类名使用

M：作为注释使用

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

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

以上就是AngularJS前端框架怎么用？angularjs前端框架的使用介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的AngularJS前端框架怎么用？angularjs前端框架的使用介绍全部内容，希望文章能够帮你解决AngularJS前端框架怎么用？angularjs前端框架的使用介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284888.html

来源：【匿名】