应用在openwrt固件上的angular项目

2018-01-11 leung 更多博文 » 博客 » GitHub »

angular openwrt ubus

原文链接 https://yanqing6628780.github.io/2018/01/11/angular-ubus-openwrt/
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


项目地址:https://github.com/yanqing6628780/angular2_ubus_openwrt

该项目是在公司的pandorabox固件的ubus接口下,使用angular进行开发尝试。 所以,要运行该项目:

  • 你需要一个路由器
  • 该路由器需要刷入pandorabox或者openwrt固件
  • 固件内需要有以下ubus命令:
    • session
    • uci

如果你路由器不是192.168.1.1的ip,你还需要修改proxy.conf.json文件。

该项目是从angular的hero项目clone下来后直接修改的。只app内的文件,其他配置基本没有修改。 用到的知识点如下:

  • 路由拆分
  • http拦截器
  • 路由守卫(鉴权)
  • 延迟加载(这个没看出效果)
  • 使用ng-zorro-antd
  • 组件二次封装(难点1)

其实,按照hero项目的教程看下来,你基本能掌握大部分技能。但是,要真正学习到知识还是要用实际项目练手。就好像难点1那里,这里的封装需了解

  • 如何对数据进行双向绑定
  • 如何从组件输入后输出 现在angular不像angular1Directive可以直接使用scope进行双向绑定 你还要使用各种装饰器@Input @Output还要使用EventEmitter进行事件触发。 详细请看password_eye目录下.ts文件

据说,这样做的目的是为了减少像angular1那样的全局脏检查,性能会更好。但是,开发就麻烦和复杂了。

总结

angular开发还是要配合vscode进行开发,不然import库的时候真的好麻烦 还有现在引入的组件概念。其实,你把这个组件当成angular1的控制器,就比较容易理解。 但是,angular1Directive现在也是归到@Component的。你在angular里面使用@Directive是没法引入templatetemplateUrl这些参数的。所以,angular@Directive又是另外一个概念了 而且,angular现在也解决了angular1时的少问题。例如:双view。而且,route比以前强大,有守卫、延迟加载、还有延迟预加载。 不过,angular有个比较麻烦的‘缺点’。例如:父组件的模板上有个tilte变量,这个变量是用在head标签内的title标签。如果,想要子组件内赋值,你只能使用service这种形式,然后这个变量要用Rxjx的Observable。子组件要注入这个service,父组件对其进行订阅。 暂时,使用angular的感受就是这样了。如果项目能继续深入应该会有发现更多‘问题’,解决更多问题,这样对angular有更多和更深入的了解。