Previously we have 'OpaqueToken', but it is DEPRECATED. The new one is called 'InjectionToken'. The difference between OpaqueToken is for InjectionToken we are able to pass the type, but OpaqueToken not. // token.ts import { InjectionToken } from '@a…

承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板的弹窗组件 使用方法 基本项目结构 因为打算将我们的popup弹窗设计为在npm托管的包,以便其他项目可以下载并使用,所以我们的启动项目大概包含如下结构: package.json // 定义包的基本信息,包括名字.版本号.依赖等 tsconfig.json // angular项目基于typesc…

通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModule是一个angular项目的起点. 不过单从angular的启动过程来说,AppModule就是其工作的终点.整个angular框架的启动过程都是为了使AppModule可以工作而展开的.本文算是笔者单就阅读angular源码中的启动过程相关部分的总结,angular源码博大精深,有任何笔者理解不…

如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅仅知道这些可能还不够呢? 不久前有个叫 Tree-Shakeable Tokens feature 被合并到 master 分支,如果你和我一样充满好奇心,可能也想知道这个 feature 改变了哪些东西. 所以现在去看看,可能有意外收获嗷. 注入器树(Injector Tree) 大多数开发者知道…

1. lazyload 的 path 变成相对路径了, 不过如果你用 ng update 的话, 依然可以不需要修改, cli config 好像能调支持绝对路径的写法. const routes: Routes = [ { path: '', loadChildren: './home/home.module#HomeModule' }, ]; 2. 新的 providers 依赖注入机制 tree shakeable (可树摇) 从前我们通过在 module.providers 或 comp…

Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angular CLI 使用.创建组件.事件.自定义服务. ngFor 指令.Input.Output 装饰器等 Angular 4 指令快速入门 涉及如何创建指令.定义输入属性.事件处理.如何获取宿主元素属性值.如何创建结构指令等 Angular 4 表单快速入门 涉及如何创建表单.表单验证.表单控件状态.…

When we create a Service, Angluar CLI will helps us to add: @#Injectable({ providedIn: 'root' }) It only create a instance in root dependency tree. If there is no reference to use this provider, Angular will remove it from our production code. But th…

You probably have seen 'foorRoot()' method a lot inside Angular application. Creating a configurable NgModule allows us do the configuration for each serivce. // service module import { NgModule, ModuleWithProviders, Provider } from '@angular/core';…

在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能.Angular的知名组件库几乎都依赖了这套开发包.比如ANT,PrimeNG等. 本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块. 1.环境安装 cdk不是angular的默认模块,需要手动安装 yarn add @angular/cdk 在app.modul…

在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候,依赖注入就那么工作着,我们使用它,几乎不会想到要归功于它的便利且直观的Angular API. 但也有些时候,我们也许需要深入研究一下依赖注入系统,手动配置它. 这种对依赖注入的深入了解,在下面的情况下是必须的: 为了解决一些古怪的依赖注入错误 为单元测试手动配置依赖 为了理解某些第三方模块的不寻…