angular2学习记录-给后端程序员的经验分享
1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后的维护.那么就要学习agular2了.
这里就要说下个人观点了,安利一波:我认为每个程序员都应该有自己的一个项目,一个可以让你学习的东西能施展到上面的项目,可能该项目一开始很简单,但是随着你不断的学习,不断的把新知识运用进去,这个项目就会伴随着你的成长而丰富起来,给你带来的则是更多的实战经验.
2.angular2简介 angular2是类似全家桶组合的框架,所需要的东西几乎都包办了,所以开发起来很迅速. 使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用. google和Microsoft支持 WebStorm对angular2的强大支持. ECMAScript 6入门 es6.ruanyifeng.com/ TypeScript入门 www.imooc.com/learn/763 TypeScript中文网 www.tslang.cn/docs/tutori… 慕课网1小时快速上手视频 www.imooc.com/learn/789 官方文档 www.angular.cn/docs/ts/lat…
3.遇到的问题 3.1滚动监听 要实现页面滚动后导航栏会变色的效果,如下图(图来自我的csdn博客,没找到其他好图床) 图来自我的csdn博客
之前使用Jq是
$(window).scroll(function () { indexApp.scrollBar = parseInt(document.body.scrollTop||document.documentElement.scrollTop); }); 不打算依赖Jq,搜了点资料发现了下面两种写法.
//下面这种写法在TS下不会有效果. isAddBackColor(){ if (this.getIsIndex()){ var self = this; //该处使用匿名函数,而不是箭头函数. window.addEventListener('scroll',function () { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop; self.isBackColor = marginTop > 20 && self.getIsIndex(); }); } }
/**
- 判断是否需要加背景色(有效果的)
- 使用isBackColor控制结果 */ isAddBackColor(){ if (this.getIsIndex()){ //监听事件使用箭头函数,这样ng2才会管理该变量 window.addEventListener('scroll',() => { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop; this.isBackColor = marginTop > 20 && this.getIsIndex(); }); } }
原因不明,猜想是var self = this;赋值操作后相当于一个全新的变量,self并不受angular管理,导致刷新的变量是self中的isBackColor.
3.2http参数传递 按照下面代码传参数应该是没有问题的,但是我遇到了url被编码问题,例如输入1111@qq.com会被转换为1111%40qq.com,导致服务端解析失败,找了很多原因才发现是URLSearchParams这个对象用错了,angular2提供了这个对象,es6里面也有一个该对象,换成ng2中对象即可,import {URLSearchParams} from "@angular/http";
let urlParams = new URLSearchParams();
urlParams.set('search',search);
urlParams.set('order',order);
urlParams.set('pageNum',pageNum.toString());
urlParams.set('pageSize',pageSize.toString());
return this.http.get(Config.url_problem_stage + stage,{params:urlParams}).toPromise().then(response => response.json()).catch(LogService.handleError)
复制代码
3.3跨域问题 浏览器要求同源下才可请求,否则就产生跨域问题.
URL 说明 是否允许通信 www.a.com/a.js www.a.com/b.js 同一域名下 允许 www.a.com/lab/a.js www.a.com/script/b.js 同一域名下不同文件夹 允许 www.a.com:8000/a.js www.a.com/b.js 同一域名,不同端口 不允许 www.a.com/a.js www.a.com/b.js 同一域名,不同协议 不允许 www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许 www.a.com/a.js script.a.com/b.js 主域相同,子域不同 不允许 www.a.com/a.js a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问) www.cnblogs.com/a.js www.a.com/b.js 不同域名 不允许 解决方案是用nginx反向代理到不同端口,模拟同一域名下不同文件夹情况.nginx监听本地888端口,这个也是项目入口,对于带api标识的请求转到后端服务器,对于其他请求则到前端服务器.
server {listen 8888;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location /api {proxy_pass http://127.0.0.1:8080;}location / {proxy_pass http://127.0.0.1:4200;}
}
复制代码
3.4路由问题 angular2的路由匹配规则是从根路由也就是forRoot()的这个开始.在该处匹配寻找规则.
根路由:
export const appRoutes: Routes = [ { path:'', component: IndexComponent, pathMatch:'full' }, { path:'aust', loadChildren:'./content/content.module#ContentAndAsideModule' }, { path:'index', component: IndexComponent, }, { path:'**', loadChildren:'./content/content.module#ContentAndAsideModule' }, ];
子路由:
export const childRouter : Routes = [ { path: '', component:ContentAndAsideComponent, children:[ {path:'',redirectTo:'/index',pathMatch:'full'}, {path:'start',component:StartComponent}, ] } ];
举例: 访问/,则先在根路由寻找,找到其跳转到IndexComponent,完成任务 访问/aust.则先在根路由找,发现需要到子路由里面寻找,到子路由后,在children中发现被重定向到/index,那么回到根路由,找到IndexComponent完成任务. 访问/aust/start,则先在根路由找,发现需要到子路由,到子路由匹配到StartComponent,完成任务.
3.5组件通信 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化,做额外处理. 子->父:使用output装饰器加EventEmitter向上弹出事件到父组件,父组件监听后处理. 任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取.
3.6单例? agular2的service是providers提供的,该组件如果引用了这个service,那么会先在自己的providers中寻找service,找不到则再向上找父组件,直到module.那么意味着每一个providers提供的是一个实例,旗下的组件都是享用这一个实例,那么怎么实现全局单例呢?很简单在根module中提供服务且其他组件不要自己providers该服务.
3.7组件生命周期 组件生命周期看下面这张图.图中没有onChanges(changes: SimpleChanges)方法的调用,该方法检测到组件的输入属性发生变化时调用,也就是存在**@inpu**t装饰的属性,该属性每次变化时会调该方法.
angular2学习记录-给后端程序员的经验分享相关推荐
- 漫谈程序员(五)20年资深程序员编程经验分享
20年资深程序员编程经验分享 原文作者乔纳森·丹尼可(Jonathan Danylko)是一位自由职业的web架构师和程序员,编程经验已超过20年,涉足领域有电子商务.生物技术.房地产.医疗.保险和公 ...
- sql 只取一条记录_后端程序员必备:书写高质量SQL的30条建议
前言 本文将结合实例demo,阐述30条有关于优化SQL的建议,多数是实际开发中总结出来的,希望对大家有帮助. 1.查询SQL尽量不要使用select *,而是select具体字段. 反例子: sel ...
- 基础知识的学习,来自十年程序员的经验分享
本文转载自微信公众号<大飞码字> 前面分享过一篇算法学习的文章 : 不懂算法,还想进大厂?做梦吧. 虽然有点标题党,但内容还是不错的. 后来就想能不能对计算机学习方法和学习心得写个系列的文 ...
- python 线程池_老程序员的经验分享:Python 从业十年是种什么体验?
出于某些原因,想记录一下我过去数年使用 Python 的经验和一些感悟.毕竟算是一门把我带入互联网行业的语言,而我近期已经几乎不再写 Py 代码, 做一个记录,也许会对他人起到些微的帮助,也算是纪念与 ...
- 程序员如何成长?如何进阶?——一个老程序员的经验分享1
做程序员十六年了,带过很多新人,闲着没事就把之前给新人们做培训的资料整理出来,分享一下,希望能给想做程序员的新人们给以建议和帮助. 1.心理准备. 程序员的世界是一个外面看着光鲜亮丽,但是实际里面十分 ...
- 20年资深程序员编程经验分享
原文地址:http://www.devstore.cn/essay/essayInfo/1845.html 原文作者乔纳森·丹尼可(Jonathan Danylko)是一位自由职业的web架构师和程序 ...
- 程序员如何成长?如何进阶?——一个老程序员的经验分享2
准备好了,我们需要开始起步了,所有的理想都是美好的,对于新人来说,这种美好都是原始动力,它不该被抹杀其作用,我很不同意一些人在开始就打击新人的这种出于理想主义的冲动,所以,我在这里要告诉那些新人如何利 ...
- 程序员如何成长?如何进阶?——一个老程序员的经验分享3
前面讲的东西显然还是太过理论化了,下面来讲讲具体怎么做才能让一个没有基础的人能够踏进软件开发这个行业来. 有了前面的对这个世界的初步了解,我估计你接下来会考虑难度问题. 从门外看,软件是有一定难度的, ...
- IT旅途——程序员面试经验分享
摘要:本文从IT人员的角度,一起分享面试道路上的坎坷.文章汇集几个知名公司的面试题,从出题的角度到分析问题的方法到解决问题较为全面的讲解面试题目,以供读者参考. 面试是职场的永恒话题,如何在职场面试中 ...
最新文章
- 第一门编程语言的选择无关紧要?
- JavaScript学习(八)
- 利用反射及ActionFilterAttribute实现MVC权限管理
- python导入csv文件-Python从CSV文件导入数据和生成简单图表
- 反射与泛型 java_Java的反射 和 泛型的一个问题
- Java 给编译器看的注释--Annotation
- Window 10 单机配置MYSQL主从同步
- 181102每日一句
- git学习笔记-(11-git存储)
- css.ppt,CSS ppt.ppt
- 火电厂( 4×300MW )电气主系统方案与设备配置初步设计
- 前端H5面试题Js:JavaScript字符串的常用方法有哪些?
- 解决webView不支持网页input type=“file“上传功能。接个文章搜索,自己写的代码,确保可以使用。
- Excel的DATEDIF函数及其用法实例——求日期之间的间隔
- 界面原型设计工具 Balsamiq Mockups
- Android给文件改后缀名
- NT151应用案例:西门子PLC S7-1200与派克ACR9000的通信(Part 4)
- Android ColorUtil 颜色格式转化
- Apple Xcode 13.2 (13C90) 下载
- airtest连接一个夜神多开器,提示“ADB指令执行失败”
热门文章
- 我的2015羊年总结
- BIEE连接数据库的方法
- 用Delphi写扬声器音乐
- UE4 代理 BindRaw和BindUObject
- 记录idea maven项目打包部署web项目mapper扫描失败
- 关于Eclipse中复制粘贴一个项目后的操作
- JS_鼠标移入移出渐变效果(类似css3中的transition或animation和@keyframes)
- MarkdownPad官方网站
- Chrome调试angularJS出现Uncaught SyntaxError: Unexpected identifier
- LeetCode:Add Two Numbers