本项目是以angular-cli为基础,适用于移动web的项目。
- 1.rem 布局:在根组件调用rem.service,动态计算html的font-size
- 2.下拉刷新:refresh组件,在父组件插入loader组件,利用output传输数据
- 3.轮播回弹:carousel组件,自定义轮播间隔,高和宽以及传入的数据
- 4.封装http请求:所有的请求都从这里走,以便加公共参数或者做加密操作
- 5.路由中请求(resolver):在进入页面前获取数据
- 6.请求代理配置:项目根目录下proxy.conf.json中配置
- 7.图片懒加载,使用ng-lazyload-image
- 8.storage:本地存储
- 9.使用gulp运行dist内代码,在api.service中设置
app
--animation 转场动画,来自大漠穷秋老师的nicefish
--component 公共组件,使用前要在模块引入component.mudule
--carousel 回弹轮播
--footer 底部
--header 头部里面的内容采用内嵌模式,样式需要在父组件写
--refresh 下拉加载
--directive 不多说了,angularjs中已有的概念
--guard 路由守卫(service),最新的angular-cli已将此独立出来,可以单独生成
--home 项目的home模块
--product 项目的product模块
--service 公共服务,在根模块引入service.module即可
注意: TS内该引入的引入,不在示例中提及
package.json配置:
"start": "ng serve --proxy-config proxy.conf.json --host 192.168.1.29 --port 80"
host 为本机IP,port为端口
npm start 后,手机在同局域网下可访问该IP
在根组件调用一次就行。
this.rem.setDpr();
window.onresize = () => {
this.rem.setDpr();
};
- html
<app-refresh [url]="'/api/index/index'" [method]="'get'" [body]="body" (onReceive)="receiveTheData($event)">
<!--url: 请求地址-->
<!--method:请求方法-->
<!--body:请求参数-->
<!--(onReceive)="receiveTheData($event)":父组件绑定的事件-->
<!--class="loader-content"为组件内嵌tag,不可删除-->
<div class="loader-content">
<!--在这里放入需加载数据的html结构-->
<div *ngFor="let item of list;let idx = index"></div>
</div>
</app-refresh>
- TS
export class FindComponent implements OnInit {
list;
body = {
appId: 11,
page: 1
};
receiveTheData(action) {
// 从loader组件返回action
this.list = action.hotProducts; //返回赋值
}
constructor(
) { };
ngOnInit() {
}
}
- html
<app-carousel [data]="topCarousel" [interval]="3000" [height]="7.31" [width]="10" *ngIf="topCarousel">
</app-carousel>
<!--data:元素为对象的数组,内部实现需根据接口更改-->
<!--interval:轮播间隔时间,单位为毫秒-->
<!--height:高度,单位rem-->
<!--width:宽度,单位rem-->
- 路由配置
{
path: 'product',
component: ProductIndexComponent,
data: {
api: '/api/product/list', // 接口地址
body: { // 接口参数
type: 1,
page: 1,
pageCount: 10
}
},
resolve: {
content: ResolverService // 对应的服务
}
},
- TS
export class ProductIndexComponent implements OnInit {
title;
detail;
constructor(
private route: ActivatedRoute,
) { }
ngOnInit() {
this.route.data
.subscribe(res => {
this.detail = res['content'];
this.title = res['title'];
});
}
}
*TS
export class ProductIndexComponent implements OnInit {
constructor(
private api: ApiService
) { }
ngOnInit() {
// Promise
this.api
.ajax({
method: 'get',
url: 'api/index/appinfo',
body: {
// 参数
}
})
.toPromise()
.then(res => {
// do something
});
// 可观察者对象
this.api
.ajax({
method: 'get',
url: 'api/index/appinfo',
body: {
// 参数
}
})
.subscribe(res => {
// do something
});
}
}
- TS
export class ProductIndexComponent implements OnInit {
constructor(
private storage: StorageService
) { }
ngOnInit() {
// 存放
this.storage.put({
type: 'localStorage', // 也可以是sessionStorage
key: 'appinfo',
data: [
// ...
]
});
// 获取
this.storage.get('appinfo');
// 移除
this.storage.remove('appinfo,id');
// 清空
this.storage.remove(); // 清空localStorage和sessionStorage
}
}