angularjs完整demo例子

Posted 2022-09-30 dakunqq

　AngularJS的主要特点是 mvc 数据双向绑定 分模块 依赖注入
　　
　　mvc m: $Scope 变量 V:视图 c:controller=function() 控制器 方法
　　
　　Angularjs的用法 1.在一个有起始标签的元素开始标签内使用 ng-app来指定angularjs的作用范围 2.angularJS的表达式是双大括号 里面可以显示变量,数学运算,执行方法 3.ng-model=“变量名” 在输入框内可以绑定一个变量,此变量前端输入的值和js代码中的值是双向绑定的,一个变了都变了,并且使用此变量的地方都发生改变 4.ng-init=“变量名=‘变量值’” 一般加在body的起始标签内 初始化变量 也可以初始化方法 相当于onload方法
　　
　　通常一个项目有一个angularJS模块,一个页面又一个angularJS的控制器 ng-app=“模块名” ng-app后面也可以指定模块名,如果定义控制器必须先定义模块对象,模块对象必须有名字 如果不定义控制器简单实用angularJS则直接ng-app指定作用范围也可
　　
　　定义模块及定义控制器需要在js代码块中完成 在body属性里只能指定模块的名字和控制器的名字以及简单的使用
　　
　　var app=angular.module(‘模块名’,[‘引入的模块名’]) 不引入则数组内为空
　　
　　app.controller(‘控制器的名字’,function($scope) 里面可以定义变量和方法 )
　　
　　ng-click=‘sum()’ angularJS的方法只能用angular的事件去调用,用原生的onclick是无法调用的
　　
　　ng-repeat=‘person in list’ person.name 这样就可以遍历angulajs的变量 list了 前提是内容不能重复,否则无法显示
　　
　　$http.get(‘地址’).success(function(response) $scope.list=response; ).error(function()) 请求成功执行.success 请求失败 执行.error
　　
　　controller是一个请求对应一个方法,对应的是页面的一个功能(可能会调用多个service的方法) service是一个方法对应的是一个功能点(里面可能会调用多次dao) dao是一个方法对应一次数据库的操作
　　
　　angularjs里面提供了一个代表事件的对象 $event .target可以获得当前对象
　　
　　我们可以自定义服务,一个项目就是一个模块,一个模块中可以有多个服务,$http这个服务封装了ajax,我们也可以把我们自己的写的一些代码封装到服务里(现在就是brandService),这样别的页面在调用的时候不用在重复的去写访问的地址等这些细节,直接调用服务的方法,实现功能即可,提高了代码的复用性
　　
　　自定义的服务就是个名字,系统的服务前面一般加$
　　
　　服务是用来注入controller的 模块是用来注入模块的
　　
　　被继承controller的代码也需要引入,但是仅仅引入是不行的,因为一个页面值允许有一个controller,除非是继承 $controller实现的是伪继承,其实就是共享scope
　　
　　前端的代码写完了之后,记得抽取出来
　　
　　前端引入的js如果发生改变,记得清空一下缓存,因为不清空的话,页面默认加载缓存中就js文件,效果是实现不了的
　　
　　script不要使用自闭合的标签引入js文件,好多浏览器不识别
　　
　　$index angularjs为循环中的变量封装的索引
　　
　　angularjs中有一个select2插件下拉列表,它是一个多选的 1.使用select2的话首先得在input中 增加select2 multiple config属性 2.引入select2的两个css文件 3.引入select2的js文件 4.引入angular-select2的js文件 5.定义select2 conf属性的内容
　　
　　模板管理的时候,你新建的时候需要下拉列表,你修改的时候也需要下拉列表,所以在点击模板管理的时候,就应该查询出下拉列表的内容,也避免了以后点击新建/修改时多次查询数据库
　　
　　使用select2的时候,回显的数据是个Json对象才可以被解析,单纯的字符串是无法解析的,所以需要将字符串转为Json对象 Json.parse() 前端又一个方法
　　
　　html中 οnclick=‘document:loginForm.submit()’ 可以执行某id的form表单的方法
　　
　　security:csrf 此标签应该写在http标签内
　　
　　有一定含义的主键就是自然主键 如用户登录名 唯一 非空(缺点:会暴露信息) 非空 唯一 无含义的主键 就是代理主键
　　
　　springsecurity默认是不允许使用内嵌框架的,可以在http元素标签内设置 默认的策略是deny 拒绝 我们可以选择 sameOrigin 同源 也可以选择 allow-from外部引入
　　
　　在配置springsecurity的时候,还是尽量不要配置auto-config 否则首页可能会报错,配置target-url 和always
　　
　　web.xml中文件的扫描是有顺序的,bean的创建也是有顺序的,监听器先执行,servlet后执行,所以监听文件中需要的bean如果在servlet中加载,那么开始是找不到的,会报错,所以先加载的文件中的类要自己加载
　　
　　UserDetailsService的实现类的获取,可以通过注解的方式,也可以通过xml配置的方式 包括dubbo的reference注解也可以用xml配置的方式
　　
　　省市区三级联动及品牌三级分类表一般都是自关联表,id parentid name
　　
　　ng-if可以进行if判断,动态显示当前元素
　　
　　SPU和SKU SPU standard product unit 标准产品单位 SKU stock keeping unit 库存量单位
　　
　　商品添加完毕后要查询出id需要在mapper.xml配置文件中进行配置,这是mybatis的功能,所以必须在有mybatis的环境下才能生效,所以controller中是查不出id的,因为它没依赖dao,而service层却可以,它直接依赖dao
　　
　　kindeditor富文本编辑器 它会在js中定义一个editor 通过editor.html()就可以获取到富文本编辑器中的内容,都是html的标签 editor.html(<html内容>)就是设置富文本编辑器内容的意思 editor.html(’’) 里面写一个空字符串就是清空富文本编辑器的意思
　　
　　fastDFS是一个分布式的文件服务器 DFS distributed file system 分布式文件系统 fastDFS中有三个重要的角色 client客户端(我们的运营商的服务器往fastDFS里面存图片,所以它就是fastDFS的客户端) tracker server调度群 storage server存储群 客户端上传文件后,fastDFS服务器端会将文件id返回给客户端,由客户端保存,此文件id用于以后访问该文件的索引信息 文件索引信息包括: 组名,虚拟磁盘路径,数据两级目录,文件名
　　
　　fastDFS的使用步骤 1.首先引入mavenjar包 2.配置 客户端的配置文件 3.进行连接 首先初始化ClientGlobal 其次创建trackerserver客户端 连接获取trackersever的服务器端 然后创建storageServer的客户端 获取storageserver的服务器端(它是tracker指定的不是我们创建的) 4.上传文件,获取文件id storageClient
　　
　　因为图片上传是一个通用的功能,所以不要放在其他模块,单独创建它的web层Controller和 js内的 service 以便扩展
　　
　　文件上传的三要素 1.form表单 method=post 2.enctype=“multipart/form-data” 3.
　　
　　Html5中给我们提供了一个FormData的对象 它就是一个表单对象
　　
　　uploadService中的代码 app.service(‘uploadService’,function($http) this.upload=function () //首先创建一个表单对象 var formData = new FormData(); //给此表单对象添加表单项file,第一个file是表单项的名字,第二个file是页面中表单项的id, // 将id为file的表单项添加至新建的表单对象中,因为id为file的表单项可能有多个,我们只需要第一个 formData.append(“file”,file.files[0]);//文件上传三要素,必须有一个name属性为file的type为File的表单项 return $http( url:"…/upload.do", method:“POST”,//文件上传三要素,form表单方法是post data:formData, headers:“content-Type”:undefined,//文件上传三要素,contentType写undefined会自动改成multipart transformRequest:http://zzdxjyzd.com/angular.identity//将form对象转成二进制的流进行传输 )
　　
　　)
　　
　　ng-options="entity.id as entity.name for entity in list " 就可以为select标签自动生成option(下拉项)
　　
　　商品的最后一级分类才会关联商品的模板,因为这才是具体的,才能有具体的品牌和规格
　　
　　能在后端完成的数据封装尽量在后端完成,因为前端报错不明显,容易错误,前端最好是方法调用后就返回想要的数据,主要负责展示
　　
　　ng-true-value=1 本来多选框选中结果为TRUE,现在结果就是1了,在定义对象的时候,注意关于isDefault的取值写成字符串的"0" 和"1" 写数字的是不识别的
　　
　　sku列表在添加的过程中,要有面向对象的思想,不要总是在一个方法里就想完成整个代码,要分步骤完成. 第一个方法里将传进来的items进行遍历,每次遍历都调用添加行的方法(方法返回我们的要的集合,用我们的集合来接收) 添加行的方法里则是先遍历传进来的原有的集合,将原有集合的每一行进行深克隆变成新的行,用新的行添加第一个规格的值并放入新集合中,这样就相当于把旧集合根据规格的值的个数复制了n份
　　
　　自关联的数据表在删除的时候,注意要把下级分类的数据都删除了,不管删除的内容是不是一级分类,当做一级分类来删除. DELETE FROM tb_item_cat WHERE id IN (1205,1208) OR parent_id IN (1205,1208) OR parent_id IN (SELECT id FROM (SELECT id FROM tb_item_cat WHERE parent_id IN (1205,1208) )tmp) 子查询不能又查询又删除,需要在查询完毕后删除的情况可以把查询的子查询语句封装到一个临时表中,这样就可以删除了
　　
　　$location这个服务被注入后就可以查询url的内容了 $location.search()可以获取到当前url后面的参数对象,如果无参则是一个 空的对象 因为页面的是路由过去的,所以要使用路由的方式去写链接url 注意： ?前要加# ，则是angularJS的地址路由的书写形式
　　
　　ng-checked =“true” 则复选框被选中,如果ng-check=“方法” 如果里面是一个方法,那么页面一加载方法就会执行
　　
　　因为我们在设计的时候sku发生改变就是删除掉,所以当修改的时候,如果改变增加或删除选项那么原来的数据都会被清空,这需要我们跟客户提前沟通好.另外sku删除了那么我上次买了下次还要买就不能追溯到了,那么它有一个条形码的字段,这个字段可作为唯一的字段来追溯.还有修改的时候要设置分类信息只读,如果改变分类那就创建一个新的,不用修改了
　　
　　开发中商品的添加和修改如果涉及的内容比较多最好分开,不要使用同一个界面