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里面改时间。

代码位置:

 


十一、前端优化

图片:

切图-大图片替换


猜你喜欢

转载自blog.csdn.net/xif3681/article/details/80858251