Angular 1项目构建心得（一）

短命女 2022-05-20 03:40 229阅读 0赞

目录结构如下:

![Image 1][]

目录结构

注意：用运了gulp前端构建工具，将src原始路径下的代码，重新构建到build文件夹下面。

**（一）项目的目录结构和技术架构。**

拿到项目后首先要搭起目录结构和技术架构,我用了angular+gulp+bootstrap构建项目，angular框架用于前后端分离和系统模块化，gulp用于压缩，生成版本号和ES6的编译等。项目的目录结构也是先以功能划分模快，然后根据angular的特点，每个功能下面由控制器、服务、过滤器、页面、CSS........来划分。

![Image 1][]

目录结构

**（二）内部技术**

外部框架技术选好后，要在此基础上选择angular 内部技术因为是单页面应用，所以页面之间的跳转全靠路由来运作，angular的路由有两种原生的ng-route和封装的ui-router,ng-route不能一个页面出现两个ng-view（也就是说页面中的两个部分不能同时随路由改变而变化），所以选择使用ui-router。同时为了避免单页面应用的入口页面因为加载全系统的js/css而页面显示缓慢，所以采用了ocLazyLoad.js懒加载技术，给入口页“分洪”。

**（三）具体操作**

1.angular项目首先需要有一个入口页，然后还得有一个中间页面，再接着才是真正的模块页面。我这里首页为index.hrml,页面内容我截取了一小部分

![Image 1][]

首页

中间页面为home.html,页面内容为：

![Image 1][]

中间页

那么为什么需要一个中间页面呢？为什么不能把中间页面的内容直接放在首页上？这个我觉得多一个中间页面，路由层次感，再更深入的理解，我还是个菜鸟，现在也不怎么清楚。

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，然后执行。

![Image 1][]

angular实例化

3.页面的路由功能

$urlRouterProvider负责监听$location.当$location变化的时候，$urlRouterProvider开始在一个规则的列表中一个个的查找，直到找到匹配的值。

$stateProvider 处理路由状态的服务，路由的状态反映了该项在应用程序中的位置，描述了在当前状态下UI是应该怎么样的，并且该做什么。

![Image 1][]

路由

4.项目的权限控制

左侧菜单是由后台传参动态生成的，用了angular的树的生成方式

![Image 1][]

侧边栏导航

权限要控制到按钮级别，在用户登录时，根据用户ID得到用户角色ID，根据角色ID获得用户拥有的的权限（RBAC基于角色的权限访问控制（Role-Based Access Control）），权限分为两个部分，一个是左侧菜单栏的权限（就是页面在前端的显示路径），一个是能向后台发起请求并得到正确回应的权限（即接口地址），然后前者直接循环显示在页面菜单栏，后者则通过事先写的好所有接口的权限控制服务（如下图），通过将此服务注入到每个控制器，来判断登录用户是否拥有此权限，从而控制发起请求的按钮显示与隐藏。

基于角色的权限访问控制

![Image 1][]

事先写好的系统所有权限服务

4.接口单独抽离出来

一般都会根据不同的环境配置不同的接口（接口的不同一般体现在接口前面的域名上），所以前端为了配合后台得把接口抽离出来，接口前面的域名用变量代替，然后从后台给定的接口中读取环境相对应的域名。例如：

![Image 1][]

接口

![Image 1][]

读取环境对应域名

5.服务service

提取出来的公共service

![Image 1][]