angularjs+springMvc学习笔记

2018-09-15 admin

回调

说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数 例如,在下面这段代码中,上面定义了两个函数success和error,下面的promise.then(success,error)方法请求成功执行success,失败执行error clipboard.png

异步

异步的原理我看了网上的一些博客和例子,大都以定时任务setTimeout, setInterval为例子说明,但具体的原理我还是不太明白,我只知道js异步的执行顺序和c/c++的不同 例如,我把上面的success方法中的$scope.teachers = response.data写到外面,即:

clipboard.png

按照c/c++的顺序,当上面promise.then()语句执行完之后,才执行下面的赋值语句,可js的异步处理会直接执行下面的赋值语句,如果在控制台输出teachers,会显示undefined

跨域CROS

在前后台对接时会发生跨域问题 clipboard.png 在spring官方文档有详细的解决方案,如下图 clipboard.png

按照需求进行改写就行了

clipboard.png

建立数据表(后台)

在thinkphp中,我们通过navicatMysql数据库工具建立数据表,而在spring中,则是通过新建类来建立数据表,对应关系如下 clipboard.png

teacher类对应表名,私有属性对应表的各个字段

clipboard.png

然后建立接口来访问和操作数据

这里遇到一个小问题,在定义Teacher类时,设置主键自增

clipboard.png

官方推荐使用AUTO,但是由于我们的数据库存在一些问题,只能使用IDENTITY来暂时解决

通过ui-router定制路由(前台)

ui-router的出现使得路由定制非常简单易用,在安装完ui-router后,改写app.js clipboard.png

接着,在V层添加ui-view标签就可以实现页面的跳转了

功能性开发(前台)

1.定义路由对应的控制器(ui-router) 2.初始化控制器->yoman命令->yo angular.controller user 生成位置app/scripts/controller/user.js 3.数据绑定至V层(双向绑定) 4.功能开发

功能性开发(后台)

后台 1.增加路由注解 (1)指明方法(get,post,delete,put,patch) (2)指明地址(例如127.0.0.1:8080/Teacher) 2.有cros设置的,增加cros设置

关于第一步,按照下面的写法改写就行 clipboard.png

@Autowired 自动装置接口实例化的对象 @GetMapping使用的方法

总结

1.第一次接触angularjs与springMVC前后台分离开发的模式,感受到了它比thinkphp强大的原因,非常方便团队分工开发 2.使用注解的方式写程序,就好像给程序注释一样,非常方便,而且易读 3.yoman的自动刷新机制解放了每次写前台F5刷新,在写原型时相当方便,有了angularJs的双向绑定,就再也不会出现thinkphp里十几行长的$this->assign() 4.idea编译器强大的功能省下很多用在程序规范的精力,alt+insert生成模板相当方便,出了错打断点debug可以很快可以发现问题 5.总之,相比于thinkphp,angularJs+springMVC的开发更加规范,很容易做到代码风格的统一和程序的易读,可以将更多的精力投放到功能的设计和实现上来

原文链接:https://segmentfault.com/a/1190000016409546

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40340.html

文章标题:angularjs+springMvc学习笔记

相关文章
使用AngularJS和PHP的Laravel实现单页评论的方法
目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具。Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称。组合这两大框架似乎是合乎逻辑的下一步。 在我们的使用环境下,我们将使...
2017-03-25
详解AngularJS中的作用域
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器,模型数据通过$scope对象访问。 <script> var mainApp = angular.module("m...
2017-03-24
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键...
2017-03-03
AngularJS的内置过滤器详解
今天我们来了解一下AngularJS的内置过滤器 先来看看这些内置过滤器使用方法: 一个过滤器,不带参数的情况 {{expression | filter}} 一个过滤器,带参数的情况 {{expression | filter:argum...
2017-03-23
在AngularJS应用中实现一些动画效果的代码
在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先,我们需要加载ngAnimate模块到我们应用的root模块当中。 angular.module('cour...
2017-03-24
详细分析使用AngularJS编程中提交表单的方式
在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交。使用...
2017-03-25
简述AngularJS相关的一些编程思想
在过去的几个月里,我一直遨游于Angular的世界。如今回想起来,很难想象在没有类似于Angular.js, Backbone.js以及其伙伴Underscore.js这些数据绑定框架下我每天如何去编写一个大型前端应用。我不敢相信我已经用它...
2017-03-24
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator('email&#x...
2018-05-25
angularjs使用directive实现分页组件的示例
闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: <ul class="page clearf...
2017-03-20
回到顶部