angularjs完整demo例子

 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删除了那么我上次买了下次还要买就不能追溯到了,那么它有一个条形码的字段,这个字段可作为唯一的字段来追溯.还有修改的时候要设置分类信息只读,如果改变分类那就创建一个新的,不用修改了
  
  开发中商品的添加和修改如果涉及的内容比较多最好分开,不要使用同一个界面

原文地址:https://www.cnblogs.com/dakunqq/p/11456899.html

时间: 2024-11-08 21:28:53

angularjs完整demo例子的相关文章

AngularJS入门2-一个完整的例子

1 <!-- angular JS 完整的例子 --> 2 <DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="utf-8"/> 6 <title>一个完整例子实验</title> 7 <script src="jquery-1.10.2.min.js"></script> 8 <script src=&q

【FacebookSDK学习笔记】Facebook官方Demo例子简单分析

1· FriendPickerSample -选择好友,但是这个demo的好友列表是空白的,要在Scrumptious 这个demo例子中的Pick Friends才可以看到完整的效果. 2· PlacePickerSample - 可以选择登陆的地点 选择地点后分享成果: 3.SwitchUserSample -可以变更账户的例子,即多账户切换. 4.AdUnitsSample and NativeAdSample-在你的app中嵌入广告.官方的demo直接运行是不能加载广告的,因为"Plac

REST风格框架实战:从MVC到前后端分离(附完整Demo)

既然MVC模式这么好,难道它就没有不足的地方吗?我认为MVC至少有以下三点不足:每次请求必须经过“控制器->模型->视图”这个流程,用户才能看到最终的展现的界面,这个过程似乎有些复杂:实际上视图是依赖于模型的,换句话说,如果没有模型,视图也无法呈现出最终的效果:渲染视图的过程是在服务端来完成的,最终呈现给浏览器的是带有模型的视图页面,性能无法得到很好的优化. 为了使数据展现过程更加直接,并且提供更好的用户体验,我们有必要对MVC模式进行改进.不妨这样来尝试:首先从浏览器发送AJAX请求,然后服

前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战(附完整Demo)!

摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并实现前后端分离,该项目体现了一个具有REST风格项目的基本特征,即具有统一响应结构. 前后台数据流转机制(HTTP消息与Java对象的互相转化机制).统一的异常处理机制.参数验证机制.Cors跨域请求机制以及鉴权机制.此外,该项目的完整源码可移步到我的Github参考:RestSpringMVCDemo.喜欢

NVelocity学习笔记一——linq2sql+NVelocity完整demo

(一)前言      刚刚进入新公司,看公司的项目,发现开发流程几乎和以前的完全不同,再看看页面布局竟然没有发现html.神马情况????一番探究发现使用了NVelocity模板引擎开发的.于是乎花了半天的时间比划着公司的项目做了一个小demo,也算是熟悉一下这种开发方式吧,同时也给将要学习这方面东西的朋友留个小教程. (二)实战      说明:因为公司项目数据库操作使用的是linq2sql,所以我也就拿这个操作数据库了(汗,其实我也没用过linq2SQL,都是EF,其实都差不多). 第一步:

Android中Service的一个Demo例子

Android中Service的一个Demo例子  Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding.  本文,主要贴代码,不对Service做过多讲解.  代码是从网上找的一个例子,Copy下来发现代码不完全正确,稍微修改了下.  AndroidManifest.xml <application android:icon="@drawable/ic_launcher" android:label="@stri

玩转Android Camera开发(一):Surfaceview预览Camera,基础拍照功能完整demo

杂家前文是在2012年的除夕之夜仓促完成,后来很多人指出了一些问题,琐事缠身一直没有进行升级.后来随着我自己的使用,越来越发现不出个升级版的demo是不行了.有时候就连我自己用这个demo测一些性能.功能点,用着都不顺手.当初代码是在linux下写的,弄到windows里下全是乱码.还要自己改几分钟才能改好.另外,很多人说不能正常预览,原因是我在布局里把Surfaceview的尺寸写死了.再有就是initCamera()的时候设参数失败,直接黑屏退出,原因也是我把预览尺寸和照片尺寸写死了.再有就

玩转Android Camera开发(五):基于Google自带算法实时检测人脸并绘制人脸框(网络首发,附完整demo)

本文主要介绍使用Google自带的FaceDetectionListener进行人脸检测,并将检测到的人脸用矩形框绘制出来.本文代码基于PlayCameraV1.0.0,在Camera的open和preview流程上进行了改动.原先是放在单独线程里,这次我又把它放到Surfaceview的生命周期里进行打开和开预览. 首先要反省下,去年就推出了静态图片的人脸检测demo,当时许诺一周内推出Camera预览实时检测并绘制的demo,结果拖到现在才整.哎,屌丝一天又一天,蹉跎啊.在demo制作过程中

Android SqlDelight和SqlBrite无缝结合使用的Demo例子

Android SqlDelight详解和Demo例子: 点我 Android SqlBrite使用介绍和官方demo详解: 点我 Android AutoValue使用和扩展库: 点我 在说到SqlBrite的时候有介绍到它的官方的例子,官方的栗子是没有用到SqlDelight的.这里我在这个例子的基础上添加SqlDelight,实现SqlBrite和SqlDelight的无缝连接. 这里我偷个懒,fork了SqlBrite的源码,然后添加了Sqldelight的栗子的module,然后把Sq