angularjs学习总结

Angularjs总结

序

过滤掉angularjs的定义,历史,简介,操作手册等百度都有的废话，个人学习angularjs之后我想说，angularjs让我快速的熟悉前端的编程，原生的js想实现一个table有多累写过js 和html或者jsp的都知道，不多说都是泪，如今的angularjs实现：

图1-1

不仅实现展现数据而且每列的操作都有了，好了不多夸angularjs了总结要紧。

页面总结

要想使用当然首先引入angularjs包：

图2-1

这个会编程的人都会，其次就是第一个angularjs指令声明angularjs的命名空间的ng-app；在AngularJS 教程定义的很费解，其实就是声明angularjs的命名空间，在哪些地方angularjs 对其有效。

前端页面少不了增删改查，由于是总结我就选择一个页面来讲其实现所用到的angular 一系列指令及如何使用：如图

网页图2-1

查询-->1.下拉框angularjs通过新的属性和表达式扩展了HTML; select就是其一，ng-model实现数据绑定到应用程序，下拉列表有多种是想方式如图图2-2，图2-3都能实现下拉框的数据显示及数据绑定到应用程序，ng-repeat指令用于循环输出指定次数的HTML 元素，而ng-options指令使用数组来填充下拉列表具有异曲同工之妙。ng-keyup 指令用于告诉AngularJS 在指定HTML 元素上按键松开时需要的操作。

2.输入框ng-keyup指令不会覆盖元素的原生onkeyup 事件, 事件触发时，ng-keyup表达式与原生的onkeyup 事件将都会执行。

3.按钮ng-click指令告诉了AngularJS HTML 元素被点击后需要执行的操作跟click一样会出发事件。ng-disabled指令设置表单输入字段的disabled 禁用或启用属性；

好了到此一个简单的查询就完成了。

图2-2

图2-3

查询的结果就是显示了如图1-1；其中datatable是我们这个项目框架内置的前端元素，为了区分jQuery 的所以标明为ng；

ng-bind指令告诉AngularJS 使用给定的变量或表达式的值来替换HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的HTML 元素也会修改，这个再写js其他事件时候要注意其绑定的list每一列值不要更改；data-target和data-toggle是bootstrap的东西就是弹出模态框添加或者修改使用。

再次就是新增页如图网页图2-2

网页图2-2

代码实现好多产品属性，在此就显示固投金额的属性元素的代码：如图图2-4 placeholder 属性是HTML5 中的新属性，ng-change 指令用于告诉AngularJS 在HTML 元素值改变时需要执行的操作。ng-change指令一般需要搭配 ng-model 指令使用，毕竟会要逻辑处理才触发事件。AngularJS ng-change指令不会覆盖原生的onchange 事件, 如果触发该事件，ng-change表达式与原生的onchange 事件都会执行，该事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作并且事件只针对输入框值的真实修改，而不是通过JavaScript 来修改；ng-pattern使用正则表达式验证输入是否符合要求，这个个人感觉十分有用，并且使用频率很高。

图2-4

特别说明：日期控件

js总结

angular.forEach在js的编写中使用频率也很高，不过要注意的是当在对一个list筛选时候不可随意使用splice，其使用时候angular直接删除指针对应的值并且list的长度减一，以下的数据直接上移使其原来的数据位置改变，应将要删除的下标放到tem内之后统一删除如图图3-1

图3-1