Angular核心概念之组件(Component)

师者,所以传道受业解惑也。

在今天这个特殊的日子,向所有人民教师说声:你们辛苦了,教师节快乐。(^__^)

论Component的重要性

敲黑板,组件这一块是Angular最重要的部分,没有之一!!!

谈到组件化,必须先提起模块化。Node.js中的模块就是一个文件,通过import的方式来进行模块或者资源的加载,Angular与NOde.js类似。在早期的模块化工具中,多数只对JS文件做了处理,缺少对HTML和CSS的管理。后来形成的按模块划分的概念,相对传统的按资源目录划分的方式,按照逻辑来划分显得更加合理,让模块更加独立,方便维护。

我的理解:前端的组件就是为了实现同一个业务逻辑的代码文件的组合。

@Component

Angular用@Component来定义一个类作为Angular的组件。

最常用的元数据有以下几个:

  • selector:在HTML模板中标识此组件的CSS选择器
  • styleUrls:指定此组件所需要的CSS文件路径(一个数组)
  • templateUrl:指定此组件HTML模板文件路径

还有几个不是很常用的,但是要了解一下:

  • animations:标明此组件的动画效果
  • providers:为此组件注入Service数组(包括子组件)
  • styles:此组件的CSS样式
  • template:此组件的HTML模板 以上两个元数据不建议使用,因为他们是明文固定的写在这个文件里面,不利于复用和维护,建议使用常用的以文件引用的形式。

组件基础

每个组件都有一个模板,Angular才能将组件内容渲染到DOM上,这个DOM元素叫宿主元素。组件可以与宿主元素进行交互,包括:

  • 显示数据:使用插值语法(双大括号)来显示组件的数据
  • 双向数据绑定:便控制用户输入
    [{ngModel}]=property
    
  • 监听宿主元素时间以及调用组件方法:监听click事件,触发组件类中特定函数
    <i (click)="someFun()"></i>
    

    Angular和AngularJS最大的不同就是Angular不再默认双向数据绑定,而是又额外增加了属性以及事件绑定,为交互增加了更多的选择。

组件一般不是单独存在的,而是通过与其他组件协调合作的,然后把他们封装在模块中。模块是组件之上的一层抽象。

未完待续…

组件交互

组件生命周期

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评论功能,国内被屏蔽,如果想与我进行交流,请自行科学上网,或发邮件给我,我会尽快回复。

Update

  • On May 7th 2018 吐槽一波:Angular都已经V6了,我这系列还没更新完,哈哈哈…
万物伊始

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

为什么开博客?

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

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

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

博客的内容

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

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

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

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

致谢

感谢GitHub Pages提供平台

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

以及免费图片源The Stocks等等

出发

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