Angular核心概念之模块(Module)

今天我们开始更新Angular核心系列专题,这仅是我个人学习Angular以来进行的一些总结和个人经验分享,并不是一个适合初学者的教程, 建议初学者还是先去中文官网了解Angular。闲话少说,我们直接进入正题。

初识Module

Angular的Module作用是把ComponentPipeirective打包成内聚的功能块,封装和暴露相应的功能,从而达到模块间的解耦,高度自治的一种程序设计模式。 换句话说,Module对应的是业务和功能,Component对应的才是页面展示和交互。

我们使用@NgModule来标记一个类,使之成为Angular模块类。下面是里面的常用元数据的功能和注意事项:

  • imports数组:引用其他NgModule来配合工作(多次导入同一个模块不会有问题,因为Angular会优先搜索是否缓存过此模块。但是!!!如果有多个模块提供了相同的服务,那么后者取胜,但是如果根模块也提供此服务,根模块的会完胜!)
  • declarations数组: 声明那些属于此NgModule的组件(Component、Pipe、Directive)
  • bootstrap数组: 声明一个数组,变成自己组件树的根,通常只有一个Component。重点来了!!!只有跟模块才会声明此项!!!
  • exports数组: 公布出去的类(可以是Component,也可以是Module)
  • providers数组: 依赖注入的Service。这里还有一个注意事项,那就是Angular的设计理念就是以依赖注入方式注入进来的Service作用域是整个App,也就是说,在providers数组里面声明的Services,无论是根模块,还是子模块,他们共享同一个数组和执行环境(懒加载的模块除外!!!)

怎么样设计模块

在构建项目初期,如果能有一个精通框架设计的大神来搭建整个项目,把整个框架搭的条理清晰,模块划分合理,想必这样的项目应该是大家都喜欢干的。那么,接下来干活来了,我们不必完全依赖大神,或者说我们也有机会成为大神,只需要尽量遵守一下几点,人人都是大神!

模块应各司其职。

这和我们天天说的”高内聚,低耦合“的设计规范很像,减少模块间的依赖程度,尽量使其独立,这样做不仅有利于程序的维护,而且思路清晰,开发起来也很高效。举个例子,根模块AppModule的职责是什么?项目的引导和初始化,至于其他的功能比如Http,I Don’t Care…

特性Module

带路由组件的特性Module,标准做法是自己去定义路由。既然孩子(子组件或者特性组件)都有行事能力了,做父亲的根Module就别瞎掺和了…

创建Core Module和Shared Module

Core Module: 应用启动时导入 Shared Module: 公共的ComponentDirectivePipe

推荐

推荐链接->Angular模块常见问题,建议所有Angular新手老手仔仔细细去阅读里面的内容,他会让你对Angular的模块有重新的认识,也能从中体会到Angular设计者的高明之处。

推荐链接->Angular-Module官方Guide,在这里你会看到一个小demo是如何变得越来越模块化的。

未完待续

  • 路由相关
  • 模块的懒加载与路由配置
Angular

作为一个”实干家”,我决定在接下来的一段时间开一个关于Angular的专题, 一是为了记录自己学习心得, 二是在工作闲暇之余,有东西和大家进行交流探讨,互相提高。

背景

谈到Angular,不得不先提及一下SPA(Single Page Application)。SPA和一般的Web应用有一个只看名字就能知道的重要的区别, 那就是SPA只有一个”页面”。敲黑板!!!这里的一个页面指的是只从服务端拿一次HTML页面,同时服务端也会返回一个作为”控制器”的js文件, 所有的除了向服务端获取数据或者是验证用户权限等其他功能,都在前台完成,这样做的好处就是大大减轻服务器的压力,Gmail和Twitter等 互联网公司也都大量使用了SPA。

Angular作为AngularJS的升级版,无论从设计理念上,还是效率上都有很大的进步。其模块化的设计符合现代应用开发的趋势,在和后端进行交互上,也能和当今 微服务框架有很好的配合,同时也符合TDD(Test-Driven Development)的特点。

Angular作为Google系前端框架,和Microsoft的TypeScript的强强联合,带着英雄所见略同的架势,自然吸引了全世界开发者的注意,Angular整个 庞大的生态系统拔地而起:IDE,Tooling,UI components,Cross-Platform Development,以及各种活跃的社区…具体内容详见Angular官方资源

内容

Angular核心内容包括如下几个部分:

我会围绕以上内容进行展开,大致包含少量的用法讲解,更多的是我对其的理解和一些注意事项。 因为本人水平有限,如遇到和官方文档有偏差,还以官方为准。

准备

在分享Angular之前,我们需要了解基本的前端知识包含HTML、CSS,掌握或是精通JavaScript,了解TypeScript语法以及面向HTTP服务的RxJS和响应式编程。

环境

为了更好地配合日后内容中的代码的兼容性,我列举如下环境供大家参考:

  • MacOS (10.12.6)
  • node (6.10.3)
  • NPM (5.3.0)
  • Angular (4.3.5)
  • @angular-cli (1.3.1)

One More Thing

此博客开通了Disqus评论功能,国内被屏蔽,如果想与我进行交流,请自行科学上网,或发邮件给我,我会尽快回复。

万物伊始

今天是北京时间2017年8月10日,我决定在个人主页上发布第一篇博客。

为什么开博客?

转眼人生已过20多个春秋,回首过去,发现除了某些重要时刻还能回想起来之外,其余皆是过眼云烟,还有因为自己最近几年对年龄的概念很是模糊,有可能真的是要“变老”了。 所以,我想能在接下来的时间里能把一些经历和学到的知识,做过的事以文字的形式记录下来。

很多认识我的人觉得我平时嘻嘻哈哈,开朗活泼,可是我的确不会表达自己内心的想法。 而最近一年我所经历的一些事让我又成长了许多,每次自己有很多话但是无处开口时,Notes会是我最好的倾诉对象。

所以,在接下来的日子,我会更新维护此博客,让它成为我的内心深处的“主要根据地”。

博客的内容

互联网是没有隐私的,这上面不会有任何涉及我私人的事情。所以我考虑再三,以后的博客应该围绕但不仅限于以下几种。

  • 编程(武器不能丢)
  • 健身(我好你也好)
  • 鸡汤(带毒的那种)

接下来我可能为此添加以下功能:

  • 网站分析(已加入Google Analytics)
  • 评论功能(已加入Disqus)

致谢

感谢GitHub Pages提供平台

感谢@mmistakes提供的免费主题 HPSTR

以及免费图片源The Stocks等等

出发

接下来我会在此地驻扎,希望路过的朋友都能在此收获价值。