angular4学习笔记一 niceFish架构、angular架构

  • 适合新手学习
  • 观看大漠的angular2免费视频
  • 视频以及代码链接 https://gitee.com/mumu-osc/NiceFish
  • 通过学习nicefish代码,快速掌握angular2的架构

写在前面

最近在学习angular2,看了看官方文档但是还是感觉不能系统掌握angular,虽然官方讲解的很清晰但是对于我这样的菜鸟来说,不结合具体的项目很难理解每一个技术要点。所以从网上搜到了大漠的良心之作—angular2视频,结合官方文档,感觉效率事半功倍。下面分享一下我的学习记录,大家共同学习,如果有错误还望多批评指正。

NiceFish架构图

这里写图片描述

上图是的nicefish项目结构图,因为我学习该项目代码只添加了部分模块,所以该结构图只做了部分模块和组件。。、

Angular架构图

这里写图片描述

模块

这里写图片描述

总结

1、模块:现在前端框架越来越趋向于模块化、工程化。一个简单的项目可能只需要一个根模块就可以了,但是稍微大一定的项目就需要创建多个模块 。模块为该模块中的组件提供上下文环境。
前端模块化的优点:
①各功能模块解耦、灵活架构
②易于进行测试
③易于分工合作
说到模块,就不由得想起了前端路由和懒加载,哈哈哈
2、组件:模块中包含组件,组件属于哪个模块,必须要在该模块中进行声明。一个组件只属于一个模块。
3、模板:组件配套的html页面
4、双向数据绑定:
这里写图片描述
双向数据绑定把属性绑定和事件绑定结合

这里写图片描述
5、service通过依赖注入到组件中

猜你喜欢

转载自blog.csdn.net/weixin_42706227/article/details/81534538