AngularJS 最常用的功能汇总

2024-09-29 19:12:04

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

第一迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定输出的顺序：

<li ng-repeat="person in persons | orderBy:'name'">

第二动态绑定之ng-model标签

任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，而且是动态绑定。

<input type="text" ng-model='password'>

对于绑定的变量，你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉fiter，你可以很容易的按你的需要格式输出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三绑定点击事件之ng-click事件

使用ng-click你可以很容易的为一个标签绑定点击事件。

<button ng-click="pressMe()"/>

当然前提是你要在$scope域中定义的自己的pressMe方法。

和传统的onclick方法不同，你甚至可以为ng-click方法传递一个对象，就像这样：

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

当然还有ng-dblclick标签

第四分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签

分支语句让你在界面上都可以写逻辑判断。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

第五校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签

表单中的输入框，你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空

你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern，ng-maxlength，maxlength

你通过$scope.userNum获得的输入内容是去掉前后空白的，因为ng-trim的存在。

第六下拉框之ng-options标签

ng-options是为下拉框专门打造的标签。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

下拉框中显示的是person.name，当你选中其中一个的时候，你可以通过yourSelected得到你选中的person.id.

第七控制css之ng-style标签

ng-style帮你轻松控制你的css属性

<span ng-style="myColor">your color</span>

你可以通过给myColor赋值的形式来改变你想要的效果，就像这样：

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

第八异步请求之$http对象。

AngularJS 提供了一个类似jquery的$.ajax的对象，用于异步请求。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

如果你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。

以上给大家分享了八种AngularJS 最常用的功能，希望对大家有所帮助！

基于AngularJS实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改
简介AngularJS的视图功能应用

AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置. 使用定义一个div与ng-view在主模块中. <div ng-app="mainApp"> ... <div ng-view><
Angularjs制作简单的路由功能demo

从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri
Angularjs material 实现搜索框功能

angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件. Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面.但在实际使用的过程中并不总是能满足我们的需求.开发一个组件就成了我们必须学习的内容. 下面是一个组件的实现: //前面省略若干代码 directive('mdSearchInput',[f
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
AngularJS实现全选反选功能

AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器效果: <!DOCTYPE html> <html lang="en&quo
AngularJS 让人爱不释手的八种功能

八种AngularJS让人爱不释手的功能分享给大家,供大家参考,具体内容如下第一迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repea
基于AngularJS+HTML+Groovy实现登录功能

AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用, 使用声明性编程的用户界面和命令式编程的逻辑, 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上. AngularJS是一款客户端MVC的javascript框架,而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构),如果你有Struts或SpringMVC
AngularJS表单编辑提交功能实例

研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点. 好奇呀,试试吧.....搞了好久,尼玛...靠..靠..靠..尼玛 ..靠..靠....好吧,谁让我手欠呢. 搜索到了很多关于AngularJS Form的案例如: http://www.angularjs.cn/A08j https://github.com/tiw/angularjs-tutorial https://github.com/tiw/angularjs-tutorial/bl
AngularJS 最常用的功能汇总

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发.如同其他的抽象技术一样,这也会损失一部分灵活性.换句话说,并不是所有的应用都适合用AngularJS来做.AngularJS主要考虑的是构建CRUD应用.幸运的是,至少90%的WEB应用都是CRUD应用.但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建. 如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建.像这种情
工作中常用js功能汇总

一.javascript 中防止重复点击.防止点击过快防止重复点击可以添加一个开关,让这个开关默认为 true,第一次点击将其变为 false,点击事件的执行需要判断这个开关是否为 true,为 true 执行,false 不执行.例子如下: var isclick= true; function click(){ if(isclick){ isclick = false; //下面添加需要执行的事件 ... } 如果只是防止点击过快,还可以设置定时器,在一定时间后,自动将开关变为 true,
Android EditText常用属性功能汇总

本文总结分析了Android EditText常用属性.分享给大家供大家参考,具体如下: android:hint="请输入数字!"//设置显示在空间上的提示信息 android:numeric="integer"//设置只能输入整数,如果是小数则是:decimal android:singleLine="true"//设置单行输入,一旦设置为true,则文字不会自动换行. android:password="true"//设
8个PHP程序员常用的功能汇总

做过PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PHP功能,个个都非常实用,希望各位PHP开发者能够掌握. 1.传递任意数量的函数参数我们在.NET或者JAVA编程中,一般函数参数个数都是固定的,但是PHP允许你使用任意个数的参数.下面这个示例向你展示了PHP函数的默认参数: 复制代码代码如下: // 两个默认参数的函数 function foo($arg1 = ", $arg2 = ") { e
AngularJS 最常用的八种功能(基础知识)

AngularJS 使用基础知识第一迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers
JQuery常用选择器功能与用法实例分析

本文实例讲述了JQuery常用选择器功能与用法.分享给大家供大家参考,具体如下: JQuery基础回顾今天对JQuery内容进行了回顾,下面进行一些总结: JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到Javascript,用$()获取元素,传给JS的var变量.反之JS的getElement方法获取var变量后,可以通过$(var)转化成JQuery对象. JQuery的选择器, id选择$("#id"),class选择$(".cla
Java常用开源库汇总

Java的经久不衰,很大程度上得益于Java的生态好.在日常开发中,我们也会经常使用到各种开源库和工具类,为了避免重复造轮子,本文将贴出工作及学习中会用到的部分开源库和工具类.Java的生态实在太大,这里只能列举一部分.如果你对此感兴趣,不妨去读读他们的源码. HTML解析器jsoup 1.1 介绍 jsoup(GitHub地址.中文文档)是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方
JavaScript常用工具函数汇总（浏览器环境）

前端业务中比较常用的JavaScript工具函数,浏览器环境常用,可直接拷贝在项目里使用.这里统一整理,方便查阅,本文章会持续更新. 一.file转为base64 /** * file转为base64 * @param {*} file file对象 * @param {*} callback */ export const fileToDataURL = (file, callback) => { let freader = new FileReader(); freader.readAsDa
Python类的常用高级函数汇总

目录 1.基础介绍 2.定义一个函数 3.__init__ 4.__getattr__ 5.__setattr__ 6.__call__ 7.__str__ 1.基础介绍函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这被叫做用户自定义函数. 2.定义一个函数你可以定义一个由自己想要功能的函数,以下是简单的规则: 函数代码块以 def 关键词开
python神经网络Keras常用学习率衰减汇总

目录前言为什么要调控学习率下降方式汇总 2.指数型下降 3.余弦退火衰减 4.余弦退火衰减更新版前言增加了论文中的余弦退火下降方式.如图所示: 学习率是深度学习中非常重要的一环,好好学习吧! 为什么要调控学习率在深度学习中,学习率的调整非常重要. 学习率大有如下优点: 1.加快学习速率. 2.帮助跳出局部最优值. 但存在如下缺点: 1.导致模型训练不收敛. 2.单单使用大学习率容易导致模型不精确. 学习率小有如下优点: 1.帮助模型收敛,有助于模型细化. 2.提高模型精度. 但存在如

AngularJS 最常用的功能汇总

相关推荐

随机推荐