最近换了个公司,乱七八糟的事儿比较多,更新耽误了些…
之前还看过一段时间的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单独建了张表,把权限也留出口来,以后如果有需要直接加上就好了。