目前在用 Angular 做一个后台项目 感觉实现的不是很好 重复代码很多 求大佬指点封装思路~

Question

后台大致是如上这个样子 可以说形式很单一了 但让我写的也是不忍直视……
形式大多数就是上图的列表视图 点项目可以进详情 最下边有个添加的按钮 添加 / 详情用的是一个视图

上图是列表页的控制器和视图 我等于每个列表一个 html 、controller
但很显然控制器里的很多逻辑其实都是重复的 虽然有一部分我封装成了公共方法 比如 cacheFactory 的 leave 但感觉还是不够彻底 我再想如何进一步的封装 比如说定义一个组件 传参去生成这一整套 [列表 - 详情] 流程

求大佬指点最佳实践~

Answer 1

组件化可解决

Answer 2

这也是我之前做angular开发遇到的一个问题，一直没有找到好方法去把重复的代码封装。你这种情况可以使用angular的一个叫component的方式，把组件拆分一下。

Answer 3

你用的是ng1吧，
表单可以写个directive根据json定义的schema自动动态生成form表单，这是一个优化的点。
list的话，也可以封装成directive，传入collection和fields，来动态显示，这也是个优化点。

Answer 4

这么简单的场景，你作一个 resource 的组件，不就可以把你的什么 列表，增，删，改，详情 这些东西都封装好了么。

Answer 5

grid有成熟组件,或者你可以简单封装一个grid组件用来实现列表功能, 这样你每个view的代码基本都可以干掉了.每个独立页面的控制器只需要配置一下column的配置项和按钮即可.

Answer 6

你可以去学习一下 vue.js 组件化思想 然后拿了用到 angular.js 上，其实主要就是分离把每个功能尽量的分开来写，比如 一个选择框 你可以封装成一个组件 传入 这个选择框的后面要显示的内容 这样在调用的时候，只需传入一个参数就行了，也可以有多个 比如 你想让后面可以显示图片或者其它的，只要你能封装好就行，然后通过通过某种机制返回值就行了， vue.js 好像是通过 触发函数返回的，具体怎么样 你可以看下 vue.js

Answer 7

建议可复用的逻辑封装成指令
可以看我写的系列：http://www.cnblogs.com/mafeif...

Answer 8

组件化，你值得拥有

Answer 9

把重复的html代码写成一个directive指令,重复的js写个一个service

Answer 10

这种问题不用问 多学习 学精

Answer 11

不用框架写管理后台 非常勇敢

Answer 12

可复用的写在一个服务里面就好了