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

代码位置：

 

 

 

十一、前端优化

图片：

切图-大图片替换