Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下,我们往往希望自己的页面是响应式的。

Angular Flex Layout 也提供了 Responsive API 帮助我们进行响应式布局。

只需在 Static API 后加上 breakpoint 后缀就可以,例如

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>
<div fxFlex="50%" fxFlex.gt-sm="100%"> ... </div>

和其他响应式 API 一样,这样就会引入一个所谓的 Fallback 策略的问题。

继续阅读Angular Flex Layout 进阶

Angular Router 路由匹配

Photo by Roland Kay-Smith on Unsplash

Angular Router 是 Angular 最重要的内置模块之一。

利用它可以非常快速的生成路由规则,实现前端的模块化开发。

但是其中有一些细节值得关注。

在本篇文章中,我会重点介绍 Angular Router 中——路由匹配的概念。

继续阅读Angular Router 路由匹配

Angular forRoot 与 Services

Photo by Jaanus Jagomägi on Unsplash

在Angular中,

常常会看到在 AppModule 中调用某个模块的 forRoot 方法。

其中最常见的应该就是 RouterModule.forRoot()。

但是 forRoot 的作用是什么?什么时候要自己编写 forRoot?

读完本文,

相信你会有一个答案。

继续阅读Angular forRoot 与 Services

VSCode 下调试 Angular Library

Photo by MAX LIBERTINE on Unsplash

VSCode 调试功能繁琐之处在于,

不同结构的项目往往需要手动编辑 launch.json 这个配置文件。

本文以 Angular Library 调试为切入点,

介绍在 VSCode 下调试 Angular Library 的方法。

为了更好的理解这个指南,

你可以首先 git clone ngx-spinner 这个仓库。

继续阅读VSCode 下调试 Angular Library

Angular Module 作用域

Photo by Vanessa Lang on Unsplash

Angular 中模块由 @NgModule 装饰器来修饰。

通过 @NgModule 关键字 imports,declarations, exports,providers ,用户可以组合 Components,Pipe,Directives 及 Services 四个基础组件。

Angular 模块的复杂之处在于各个基础组件的作用域不同,这对初学者会造成很多困扰:应该在什么时候导入第三方模块?导入之后,在哪里可以使用这些模块提供的组件?

因此可以说,理解了 Angular 作用域的问题,也就解决了模块导入的问题。

继续阅读Angular Module 作用域

理解 Angular Resolver

1.什么是 Reslover

Angular 6+ 中 Router(路由)多了一个 resolve 属性。这个属性指向的一段代码被称为 “ Resolver ”。

Resolver 可以理解为在路由到组件加载之间的一段中间代码。它可在组件被路由之前获取预抓取数据,然后在组件初始化时获取并处理。

路由绑定 Resolver 后,路由执行流程如下:

1.用户点击链接。

2.路由执行 Resolver 获取数据。

3.目标组件初始化并搜集结果。

4.目标组件完成加载。

为了有个初步的概念,你可以先结合这个在线例子熟悉一下。

2.为什么使用 Resolver

相比于直接在组件中注入服务,Resolver 可以将数据抓取与其他业务逻辑分离开来,更加利于项目的维护和扩展。

这种做法也被称为遵循“ single responsibility principle

继续阅读理解 Angular Resolver