目录结构如下:
目录结构
注意：用运了gulp前端构建工具，将src原始路径下的代码，重新构建到build文件夹下面。
（一）项目的目录结构和技术架构。
拿到项目后首先要搭起目录结构和技术架构,我用了angular+gulp+bootstrap构建项目，angular框架用于前后端分离和系统模块化，gulp用于压缩，生成版本号和ES6的编译等。项目的目录结构也是先以功能划分模快，然后根据angular的特点，每个功能下面由控制器、服务、过滤器、页面、CSS........来划分。
目录结构
（二）内部技术
外部框架技术选好后，要在此基础上选择angular 内部技术因为是单页面应用，所以页面之间的跳转全靠路由来运作，angular的路由有两种原生的ng-route和封装的ui-router,ng-route不能一个页面出现两个ng-view（也就是说页面中的两个部分不能同时随路由改变而变化），所以选择使用ui-router。同时为了避免单页面应用的入口页面因为加载全系统的js/css而页面显示缓慢，所以采用了ocLazyLoad.js懒加载技术，给入口页“分洪”。
（三）具体操作
1.angular项目首先需要有一个入口页，然后还得有一个中间页面，再接着才是真正的模块页面。我这里首页为index.hrml,页面内容我截取了一小部分
首页
中间页面为home.html,页面内容为：
中间页
那么为什么需要一个中间页面呢？为什么不能把中间页面的内容直接放在首页上？这个我觉得多一个中间页面，路由层次感，再更深入的理解，我还是个菜鸟，现在也不怎么清楚。
2.每个用angular框架构建的项目就相当于一个angular实例化的对象，ng-app作用是告诉子元素以下的指令是归angularJs的，angularJs会识别的。所以一个ng-app就代表一个angular的实例化对象，因此一个angular项目也只能有一个ng-app.说到实例化对象，在创建实例化对象的时候一定得把angular的分装插件包含进去，例如，本项目中使用到的ui-router和ocLazyLoad.js。而又因为懒加载的原因所以得重写一下angular原有的controller、service、filter、direct。AngularJS原生并不支持动态加载Controller的方法，但是却提供注册Controller的方法。通过上述代码便可实现动态加载Controller。把angular.module("xxx")的实例的factory、controller、directive、value、filter 等等方法都“变换”掉，让我们的代码执行这些方法的时候，直接把我们的函数放在运行期的对应的缓存的对象里面，这样一来异步加载的代码就会在执行的时候真正被注册到Angular运行时可以读取的地方（Angular运行时具体缓存各个构造函数的地方自己扒源码吧，懒得贴出来了），这样在路由激活的时候，就可以找到对应的controller，然后执行。
angular实例化
3.页面的路由功能
$urlRouterProvider负责监听$location.当$location变化的时候，$urlRouterProvider开始在一个规则的列表中一个个的查找，直到找到匹配的值。
$stateProvider 处理路由状态的服务，路由的状态反映了该项在应用程序中的位置，描述了在当前状态下UI是应该怎么样的，并且该做什么。
路由
4.项目的权限控制
左侧菜单是由后台传参动态生成的，用了angular的树的生成方式
侧边栏导航
权限要控制到按钮级别，在用户登录时，根据用户ID得到用户角色ID，根据角色ID获得用户拥有的的权限（RBAC基于角色的权限访问控制（Role-Based Access Control）），权限分为两个部分，一个是左侧菜单栏的权限（就是页面在前端的显示路径），一个是能向后台发起请求并得到正确回应的权限（即接口地址），然后前者直接循环显示在页面菜单栏，后者则通过事先写的好所有接口的权限控制服务（如下图），通过将此服务注入到每个控制器，来判断登录用户是否拥有此权限，从而控制发起请求的按钮显示与隐藏。
基于角色的权限访问控制
事先写好的系统所有权限服务
4.接口单独抽离出来
一般都会根据不同的环境配置不同的接口（接口的不同一般体现在接口前面的域名上），所以前端为了配合后台得把接口抽离出来，接口前面的域名用变量代替，然后从后台给定的接口中读取环境相对应的域名。例如：
接口
读取环境对应域名
5.服务service
提取出来的公共service
公共service
然后每个模块的服务器里都如此定义
模块里的服务
项目里gulp的用法这里就不谈了，下篇文章继续聊！
网友评论