angular5工作要点总结
网站地址:http://www.sdiid.com.cn/
代码:https://github.com/xif3681/job2-1-angular5-SDIID
一、angular开发版本
angular-cli: V1.7.3
angular: V5.2.0
typescript: V2.5.3
webpack: V3.11.0
node: V8.X
二、项目目录结构
三、css预处理:sass
配置sass
1、利用npm工具安装sass依赖和loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
2、修改.angular-cli.json文件
"styles": [
"styles.scss"
],
"defaults":{
"styleExt": "scss",
"component": {}
}
3、将项目中已经存在的.css文件改成.scss
四、K7样式表的引用
五、jquery/bootstrap的引用
六、依赖jquery的插件引用
1.在index.html页面上引用插件
2.在需要用该插件的组件中(.ts文件中)做如下声明:declarevar $:any;
目的是不让编译时报错
3.接下来在ngOnInit方法中就能正常用上面的三款插件了。
七、第三方插件介绍
1."assets/siid/plugins/1-jquery/js/jquery.shuffle.min.js",
JQuery的随机文本是一个轻量级的jQuery插件能够打乱您的任何文本内容
--领导关怀--图片瀑布流
2."assets/siid/plugins/revolution/js/jquery.themepunch.tools.min.js",
3."assets/siid/plugins/revolution/js/jquery.themepunch.revolution.min.js",
滑动幻灯片插件--首页--幻灯片
4."assets/siid/plugins/owl-carousel/js/owl.carousel.min.js",
Jquery轻量级幻灯插件--首页--图片轮播
5."assets/siid/plugins/imagesloaded/imagesloaded.pkgd.js",
解决Shuffle插件的问题:Theseimages may be overlapping.
6."assets/siid/plugins/parallax.min.js",
轻量级的的视差引擎—-关于我们--图片滚动动画
八、接口集成
代理配置:
九、Ie兼容性
1. 路由策略改用hash,支持ie9
2. IE10-flex布局
文档:https://github.com/jonathantneal/flexibility
引用插件:flexibility.js
使用:
3. IE9
文档:https://coliff.github.io/bootstrap-ie8/
引用插件:
清除浮动
背景图要设置最小高度;
4. IE9遗留问题:
首页和关于我们页面的动画支持。
十、Loading
封装http,自动监听项目中所有的http请求,当网络延迟超过0.6s就会触发,
可以在customHttp.ts里面改时间。
代码位置:
十一、前端优化
图片:
切图-大图片替换