angular要点总结

数据的呈现与数据绑定

重点掌握以下指令的使用:

  • 和ng-bind的区别
  • 使用ng-repeat循环显示数据:

ng-repeat可以说是最重要最常用的指令之一了,需要重点把握。

在循环过程中,AngularJs能为特定控件关联上相应的对象。想象一下,你有一个列表,列表中的每一行都有一个“删除”按钮,你如何把每个按钮与特定的数据项关联起来?如果不关联,你怎么知道点击某个按钮,应该删除数据源中的哪个对象?在这点上,AngularJs确实干得漂亮,实现起来不费吹灰之力。

另外,AngularJs还为循环提供了$index这样一个循环变量,这也是非常有用的。类似地,还有$first,$last,$middle……

  • 使用filter过滤数据

(1)如何使用内置的filter

(2)如何自定义filter

filter的使用与定义都很简单,但在开发中却很有用。

页面交互特性

  • 页面元素显示与隐藏

ng-show/ng-hide

  • 监测数据变化

可以使用

(1)HTML元素的ng-change指令

(2)使用$watch监控特定的数据,当其变化时调用特定的响应函数

  • 数据的查找

有两种数据查找的方式:

(1)如果在本地数据中进行查找,使用filter和ng-model足够,实现比较简单,也就几行代码的事

(2)如果需要到服务器上搜索数据,则需要使用$http等发出AJAX请求,然后服务器返回Json数据

这个就比较复杂了,涉及到Angular较多的东西,这是学习过程中的一大难关。

  • 响应事件

ng-click, ng-change

数据的CRUD操作

有两种方式使用AngularJs实现Web应用常见的CRUD操作

(1)单页面应用(SPA:Single Page Application):服务端就提供一个页面框架,在客户端使用AngularJs发出AJAX请求,从服务端提取数据,然后刷新页面,这种类型的Web应用,AngularJS起着一个核心的作用。

(2)传统模式:这种方式在服务端完成数据的提取、页面生成等工作,AngularJS主要负责客户端的用户交互功能。

就本网站而言,因为服务端使用ASP.NET MVC,这一框架能自动生成标准的CRUD代码,所以,本网站是使用第2种方式开发的,仅在需要在页面上实现比较复杂的用户交互时,才使用AngularJS。

时间: 2024-10-12 15:39:49

angular要点总结的相关文章

angular 指令 要点解析

指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict  =  'AEC'  分别指该指令标识位于attribute属性.element元素.class. 二.scope  = true/false/{name:'=/@/&'}    默认为false,如果设置为true 则说明指令内部独立作用域. scope: { lover: '=', name: '@', say: '&' } 1.{name:'@inputName'

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先需要操作表单的模块引入这两个模块: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 表单控件响应的几种状态 模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护和理解.. 模板驱动 模板驱动:主要是依赖[(ngModel

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

自定义Angular插件 - 网站用户引导

最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采用了类似Angular路由一样的配置,只需要简单的配置其每一步training信息. title:step的

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j

Angular系列----AngularJS入门教程00:引导程序(转载)

我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s

[AngularJS]ng-repeat指令要点

ng-repeat指令要点 1,基本格式,这里不作过多说明,需要的话查看文档 <div ng-repeat="item in someCollection [| someFilter:arg1:arg2 ...]"> <span>{{$index}}</span><span>{{item.someProperty}}</span><span>{{item.someFunction()}}</span>&

Angular 2 应用的 8个主要构造块

前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻

angular架构预览(模块,组件.数据绑定等)

概念来自Angular官网 Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言(例如 Dart 或者 TypeScript ),来构建客户端应用的框架. 写Angualr应用的步骤 a.用 Angular 扩展语法编写 HTML 模板              template b. 用组件类管理这些模板                                    component c.用服务添加应用逻辑