AngularJS基础
目录
前言
之前学了vue.js的基础 https://blog.****.net/yzj17025693/article/details/89741208
这里使用AngularJS 1.x 版本,因为后面的版本大变样了,而目前国内1.x用的多
angularJS进阶 https://blog.****.net/yzj17025693/article/details/90205210
AngularJS的mvc结构
注意
使用了angularJS标签的,里面的内容可以直接写变量,能自动识别
双括号
引入angular,并且在你想要使用的标签顶层写上 ng-app
这样才会显示双括号里的值,不然会直接显示{{100+100}}
双括号只能数学表达式和变量显值
ng-app指令
ng-model双向绑定指令
这时候,我们在input里输入什么,那么在双括号里就是显示什么
双向绑定的遗留问题
如果在表单使用了双向绑定,那么一般来说表单里的数据提交后并不会清除
所以需要手动清除
ng-init 初始化指令
在页面初始化的时候就把数值赋值给变量
或者这里写一个方法,页面加载后就调用这个方法
控制器
后面的中括号,表示可以引入其它模块
controller第1个参数是控制器的名称,第二个参数是函数,可以写参数也可以不写
$scope就是控制层和视图层之间交换数据的桥梁
$scope.add相当于加了一个add属性,然后给属性赋值对象,这种形式是全局的,可以在视图层调用
如果是add=function(){} 那么就只能在函数内部使用,相当于private,不能在外部使用
因为x是视图绑定的变量,相当于scope的一个属性,需要使用$scope.x
parseint是转换到整数
引入模块和控制器,并且绑定x和y2个变量名
直接{{x+y}} 即可得出结果,但是一般我们会写一个函数,因为大多数情况不会是只有一个表达式
直接使用add也就会调用add函数,因为函数里会自动获取到x和y,不用传参过去
事件指令
把上面的return换成用一个z属性接收
按钮点击的时候触发add事件
循环数组(显示到页面)
循环对象数组
内置服务$http(获取后台数据)
get就是ajax请求
页面初始化的时候就调用这个方法
也可以在控制器里调用
那么只要调用了这个控制器,就会运行这个方法,但是如果使用ng-init,那么只有访问本页面的时候才能调用
post请求
pagination分页插件
此分页插件采用angular编写
https://blog.****.net/yzj17025693/article/details/90082572
AngularJS的数组
实现批量删除
勾选多个复选框并把勾选的存入数组
$event相当于"源" ,类似于this,相当于input这个表单本身
indexOf就是这个数值在集合中的位置
splice第1个参数是第几个位置,参数2是移除多少个
AngularJS的服务层分离
AngularJS的服务,比如$htpp这个就是内置的服务,把和后台交互的主要地方给抽取出来
传统的写法,全部都写在控制器里
被蓝色框住的是服务层的代码,而蓝色框以下的,其实是控制层的代码
因为控制层是影响视图的
分离的写法
需要和后端交互数据的,才分离
在控制器的外部写
然后就可以直接brandService引用
不过需要在控制器里也填上
还可以用一个object对象来接受服务的返回,这样能随意切换服务
代码分离
把获取app对象的定义到一个js里
需要分页插件的也定义一个js
引入所有服务的js
然后和服务层一个建立一个控制层的
然后在主要页面引入js即可
下拉列表ng-option
itemCat1List在上面赋值了
item.id就是相当于option的value,item.name就是相当于显示的内容,id和name都必须是json返回过来的字段
当ng-model和ng-option一起使用的时候,会把as关键字前面的item.id的值给ng-model,而as关键字后面的name 的值会显示到下拉列表
多级下拉列表(监控数值$watch)
比如省市联动,选择省,对应的市就会查询出来
newValue是新选择的值,这个值由我们指定并监控
这时候只需要在第2个选择框填上相同的指令即可
ng-true-value状态指令
但复选框被选中,默认值是1,被取消,就是0
ng-if判断指令
可以判断状态让某些标签不显示
ng-checked指令
把这个指令放到复选框的标签上,那么只有箭头所指的方法返回ture才被选中
AngularJS控制器的继承
继承就是为了防止重复代码,所以把重复且关联性不大的抽取出来
比如在控制层的前端分页插件配置
这部分内容可以写在baseController.js里,然后用其它的controller继承这个
然后在对应的控制器里写上对应的代码
其实这是一种伪继承,是通过传递scope来实现
所以后面要写上scope,让我们base的scope和当前的scope互通
那base里socpe定义的所有东西,在当前的scope也有了,所以就相当于继承了
$controller也是一个服务,也需要在function里写上
当使用了分离代码并且使用了继承的时候,我们的base.js也需要引入进来
AngularJS 向后台添加数据
静态页面请求
AngularJS有一个静态页面请求的功能,比如我们后台写了方法,根据id查询数据,只有一个静态的页面
search后面是一个数组,用于多个参数
且$location记得在app.controller里的function添加
请求的时候,问号前面要加#号
$sce(服务策略服务)
当我们使用搜索框架返回高亮数据(带有标签的数据)到前台后,显示的是纯html代码,而不是对应的高亮
注意, | 是竖线,不是斜线,|后面是过滤器的名称