Angular 路由快速教程

Photo by Harley-Davidson on Unsplash

声明

这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法,避免复杂

的概念影响对路由基本用法的认识,因此只涉及路由模块导入、路由匹配算

法、路由跳转指令,并不涉及守护路由、子路由,解析路由(resolver),路

由参数的获取等高级路由知识 。

前言

路由是一个 Web 应用不可缺少的一环, 路由的存在可以让用户对应用中感兴

趣的内容进行收藏方便下次访问。 在单页应用程序(SPA)中,路由必须由前

端来处理。Angualr 提供了功能强大的路由模块,可以帮我们完成复杂的页

面路由需求。

对于一个正常的 Web 应用来说,当一个路由发生时,会触发两个方面的变化,

一是浏览器中的地址会发生改变,二是页面局部或者全部会发生改变。

为了做到这两点,Angular 通过监听浏览器地址的改变来触发页面的渲染。这

其中的关键要数 “占位符” 和路由匹配的用法!

那就让我们开始吧~

继续阅读Angular 路由快速教程

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

前面介绍了 Angular 如何利用 @Input @Output 来提高组件的复用性。

但是 @Input @Output 只解决了组件中控制层数据复用的问题,

但是在很多场合,我们需要解决组件中视图层的复用问题。

我们希望能将父组件的某组内容嵌入在子组件中,由子组件负责展示。

对于这个问题,Angular 提出了投影(project)的概念。

继续阅读Agular 组件交互(三)投影

Angular 组件交互(二)@Input

前端组件化带来的需求就是前端框架必须能够实现父子组件之间的通讯。

其中父组件数据流向子组件这一过程叫做属性绑定(property binding)。

在 Angular 中实现属性绑定的方法有很多,其中一种是利用 @Input 修饰符。

继续阅读Angular 组件交互(二)@Input

Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下,我们往往希望自己的页面是响应式的。除了使用 BootStrap 等

CSS 框架,我们还有没有其他选择呢?答案当然是肯定的。作为支持指令的前

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

在实际使用中,我们只需在 Static API 后加上断点(breakpoint )后缀就可以

轻松实现一个响应式页面。

何为断点

在 Flex Layout 中,一个断点可以理解为由一个行为+指定页面尺寸=值组成。

如 fxShow.lg = ‘true’ 就表明,当页面尺寸为 lg 时,该元素执行 fxShow 这个

动作,也就是让该元素隐藏。

下面这个例子中,当页面尺寸为大于 sm 时,这个 div 在主轴方向就会扩展到

容器的100%,否则就占50%。

继续阅读Angular Flex Layout 进阶

Angular 路由匹配教程

Photo by Roland Kay-Smith on Unsplash

Angular Router 是 Angular 最重要的内置模块之一。利用它可以非常快速的

生成路由规则,实现前端模块化开发。但是其中有一些细节值得关注。

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

继续阅读Angular 路由匹配教程

Angular forRoot 详解

Photo by Jaanus Jagomägi on Unsplash

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

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

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

读完本文,相信你会有一个答案。

继续阅读Angular forRoot 详解

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 模块漫谈

Photo by Vanessa Lang on Unsplash

模块是 一个 Angular 应用组织的重要一环,通过模块之间的导入导出,我们可

以把复杂的功能分解到各个模块中,增强了代码的复用性可维护性。但是这也

引入了一定的学习复杂度。本教程从 Angular 模块入手,将 Angular 应用组

织方式和模块中资源的可见性做了详细的解释。读完本文,相信会对 Angular

有更新的认识。

继续阅读Angular 模块漫谈