最近换了个公司，乱七八糟的事儿比较多，更新耽误了些…
之前还看过一段时间的Vuejs，想着新公司如果做项目的话，用Vuejs去做。然而新公司的技术架构pc端更倾向于Angularjs，而且有专门的前端架构，架子什么的都搭的差不多了，所以来到新公司的第一个项目就用Angularjs做的。
通过这个项目，我对eslint、gitignore、proxy也算有了接触。毕竟以前做项目的时候也没关注过这些。这个项目是用gulp跟webpack配合使用的。也是直接用的旧有的架子，没做什么改动。
现在就说一下用Angularjs做的这个项目吧。
目录结构
- app: 源代码
- views: 一个页面一个文件夹
- *.ctrl Controller
- *.html Controller对应的页面
- *.scss Controller对应页面的样式表
- services: 服务，一个页面可能有多个服务，与页面一一对应
- filters: 过滤器
- app.js: 项目入口文件
- index.html: index
- dest: 编译后代码存放的位置，源码中不存在
- .eslintrc.json: 语法检查
- .gitignore: git忽略目录
- .babelrc: babel编译配置
- … 其他配置
入口文件 app.js
这个项目使用了angular-resource、angular-material等框架，因为Angularjs是依赖注入的，所以所有依赖的框架、插件甚至服务过滤器等等都需要import进来，并且注入到angular程序中。
Dependencies 项目依赖
import angular from 'angular';
import 'angular-material';
import 'angular-resource';
...
View 项目页面，包括其中的Controller及template等
import { Template, Controller } from './views/page1/page1.ctrl';
...
Service 服务
import IndexMenuResource from './services/index-menu.resource'
主程序，所有注入的内容都会在这里体现。
angular.module('app', [
'ngResource', 'ngRoute', 'ngMaterial' ...
])
.controller('controller', Controller)
.service('IndexMenuResource', IndexMenuResource)
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
template: Template,
controller: Controller,
controllerAs: 'ctrl'
}) ...
}]);
在这里，我每一个只写了一个，需要说明一点，使用controllerAs，在其他页面的对应的controller中，就可以不用$scope，转而使用this就可以了。然后需要在controller对应的template中，每一个变量前面都加上controllerAs的内容，也就是上文中的ctrl。
这个地方也可以将路由模块抽离出来，但是，看着这个文件也不大，就放在这里吧，维护起来也还算好维护。
登录模块
登录模块是最后加的，原型图中也没有这个，但是感觉作为一个后台管理系统，如果没有这个模块，岂不是所有人知道网址就能随意修改内容了么…于是跟后端同事商量了一下，就把这个做上了。因为时间比较紧，项目经理就直接说，暂不需要权限管理，注册之类的，直接把这个东西在后台写死就好。但是后端同学还是为user单独建了张表，把权限也留出口来，以后如果有需要直接加上就好了。