Bootstrap+AngularJs实战笔记

网站首页构思

随着互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点；这也成为了我一直想要自主编写一套完整的网站首页的动力，有了目标就要需找一个参照物作为标杆，此处介绍一个专门做网站首页的网址-url-这是凡科建站免费创建的个人网址。
接下来就是寻找素材，可以肯定的是现在互联网站用的最多就是Bootstrap页面布局效果，因此通过苦苦寻觅找到一款Energy的H5网站模板；当然下载下来的项目目录都是一些静态页面，如何让页面内容动态加载这就需要使用最近特别火爆的的AngularJS前端技术，能够很好地解决我们当前的问题。
再下来就是导入AngularJS的需要的js包，并参照现有的MVC开发模式，让项目目录清晰可见，这里首推开发工具Hbuilder，非常好用。当然如果对命令行编辑在行的话，不妨使用Sublime进行开发，更加快速。

屏幕快照 2016-12-06 10.40.42.png

AngularJS开发框架主要包括：
js---
-controllers
-directives
-filters
-global
-services
routes.js
main.js
app.js
main.js是主程序入口，里面定义了require.js,RequireJS是一个非常小巧的JavaScript模块载入框架，主要用于管理js文件，避免在网页中的js也变得越来越复杂和臃肿 url。
routes.js是主程序的路由入口，利用了AngularJS中的路由导航思想，对页面的跳转，链接进行统一管理，让人一目了然，方便管理。
services是主程序的公共服务组件，可以自定义服务组件以及逻辑业务处理的公共函数。
controllers是美其名曰控制层，主要是对页面中的主要业务处理，包括Http请求，域模块赋值等操作。
filters是过滤器是对程序页面中的特殊处理，例如时间格式，大小写转换，币种格式等。

首页面元素修改

原始页面的元素以及效果很多，需要进行适当的修正，并将里面的部分元素数据修改为动态加载的。当然如果有条件可以再做一个内容管理平台（CMS）对网站首页内容进行管理。
效果图如下所示：

index.html.png