angular2学习记录-给后端程序员的经验分享
angular2学习记录-给后端程序员的经验分享标签(空格分隔): web
1.前言前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后的维护.那么就要学习agular2了. 这里就要说下个人观点了,安利一波:我认为每个程序员都应该有自己的一个项目,一个可以让你学习的东西能施展到上面的项目,可能该项目一开始很简单,但是随着你不断的学习,不断的把新知识运用进去,这个项目就会伴随着你的成长而丰富起来,给你带来的则是更多的实战经验. 2.angular2简介
3.遇到的问题3.1滚动监听要实现页面滚动后导航栏会变色的效果,如下图(图来自我的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();
});
}
}
原因不明,猜想是 3.2http参数传递按照下面代码传参数应该是没有问题的,但是我遇到了url被编码问题,例如输入 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跨域问题浏览器要求同源下才可请求,否则就产生跨域问题.
解决方案是用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的路由匹配规则是从根路由也就是 根路由: export const appRoutes: Routes = [
{
path:'',component: IndexComponent,pathMatch:'full'
},{
path:'aust',loadChildren:'./content/content.module#ContentAndAsideModule'
},{
path:'index',},{
path:'**',];
子路由: export const childRouter : Routes = [
{
path: '',component:ContentAndAsideComponent,children:[
{path:'',redirectTo:'/index',pathMatch:'full'},{path:'start',component:StartComponent},]
}
];
举例: 3.5组件通信父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化,做额外处理. 3.6单例?agular2的service是providers提供的,该组件如果引用了这个service,那么会先在自己的providers中寻找service,找不到则再向上找父组件,直到module.那么意味着每一个providers提供的是一个实例,旗下的组件都是享用这一个实例,那么怎么实现全局单例呢?很简单在根module中提供服务且其他组件不要自己providers该服务. 3.7组件生命周期组件生命周期看下面这张图.图中没有 angular2项目: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Couldn't register ***.**** with the bootstrap serve
- angularjs – 我可以在身体标签上放置ui-view吗?
- WebService:JAX-WS实现WebService
- 将变量列表传递给bash脚本
- bash – 手动指定输入时,如何对xargs使用-0选项?
- 图文并茂——使用xfire编写webservice,并通过C#调用
- angular的filter过滤器
- scala – 构造Option对象的正确方法:Option(value)vs Some
- Bash:使用’true`
- 返回promise的单元测试服务Angularjs Jasmine