klg-el ——尝试设计一个前端项目

[zysam]

\ 很多是拿 aio 这个框架改的 **

angular 虽是较大的框架，但是对于一个项目来说，还得基于 angular 建立符合团队的框架。参考有：

• johnpapa 的 ng-demos

特别是使用 angular 来开发管理后台。

一个app里：

router

除了 router.ui 里，定义 url，绑定 controller、views；还有

1. 拦截，判定哪个 url 需要鉴权，重定向到哪里；
2. 错误处理；
3. 可集中，可按业务分散；
4. 改变标题；
5. 生成导航条目；

所以，一个 router.help.provide 诞生。

logger

除了 angular 封装的 $log， 一个 logger 还可以：

1.在 console 打印，亦可在后台直接弹窗提示，可配合 toast 达到最佳；

2. 全局异常捕捉；

   const

配置常量的地方，并引进第三方非 angular 组件的 utils ，如 moment.js

lazyload

按需加载，有时候，我们希望 app 不要一次性加载所有文件，有些业务文件，点击时才加载。这时候用到 oc.lazyload 这个module。加载时，因为使用了 webpack 打包，必需遵守 webpack 是加载方案， 使用 require.ensue() 来声明文件。

[zysam]

暂时安个名字：aio 称当前实验框架。

klg-el 原型已出，在内部做过分享，虽然效果一般，但还得继续，因为，自己得解决自己开发前端问题。

[zysam]

项目文件对应的运行过程，草图如上。

[zysam]

• 更新标题可以通过监听路由事件来控制，如 ‘$stateChangeSuccess','$stateChangeStart'等事件。
• 检查鉴权状态，可以通过 resolve 来控制。

[zysam]

坑

• 使用 component 时，直接使用

import template form './xxx.jade'

其中 template 是一个 fn，在 component 里会报错。如果是 directive 则没事。真是一个奇怪的 bug!!!

可能大家用 angular 的 component 少，没有大量反馈。 stackoverflow 搜到的只有一个。解决方案是： 运行这个 fn，这样就返回一个字符串模版。

template: template()

[zysam]

使用 component 代替 directive

component 可以算是 directive 的简化，的确不需要那么复杂的东西。其实 component 也不算简单了 :(

理解 component 的生命周期，才能帮助你快速封装第三方的组件；

$onInit

$onChanges

今天实践，刚好用到 $onChanges，用它来实现数据双向绑定，场景是：数据变化 -〉通知父组件数据更新。

$postLink