angular2模块:使用OpaqueToken的依赖注入可以从JS模块工作，但不能内联

Angular2模块是Angular框架中的一个重要概念，用于组织和管理应用程序的不同功能模块。在Angular2中，使用依赖注入（Dependency Injection）来管理模块之间的依赖关系。

依赖注入是一种设计模式，通过将依赖关系从一个对象传递给另一个对象，实现了对象之间的解耦。在Angular2中，使用依赖注入可以方便地将服务、组件等注入到其他组件中，实现组件之间的通信和共享数据。

在Angular2中，使用OpaqueToken来定义依赖注入的标记。OpaqueToken是一个不透明的令牌，用于唯一标识一个依赖项。通过使用OpaqueToken，可以在依赖注入时指定具体的依赖项。

使用OpaqueToken的依赖注入可以从JS模块工作，但不能内联。这意味着在使用OpaqueToken时，需要先定义一个令牌，然后在模块中将其提供给需要注入的组件。这样可以确保依赖项的唯一性和可维护性。

优势：

解耦性：使用依赖注入可以将组件之间的依赖关系解耦，提高代码的可维护性和可测试性。
可扩展性：通过依赖注入，可以方便地添加、替换和升级组件，实现应用程序的可扩展性。
可重用性：通过将依赖项注入到组件中，可以实现组件的复用，减少重复代码的编写。

应用场景：

大型应用程序：在大型应用程序中，使用依赖注入可以方便地管理组件之间的依赖关系，提高代码的可维护性和可测试性。
模块化开发：使用Angular2模块和依赖注入，可以将应用程序拆分为多个模块，实现模块化开发，提高代码的可读性和可维护性。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
腾讯云直播（CSS）：https://cloud.tencent.com/product/css

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关·内容

Angular2 ：从 beta 到 release4.0 版本升级总结

它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。具体请参考官方文档。...组件迁移后，无法正确订阅事件原因：angular(v4.0.0)中依赖注入，若在不同地方声明provider，则会创建不同的实例。...进行静态引导.静态方案可以生成更小，启动更快的应用，默认优先使用。但此处因为有些动态计算环境的代码，故编译失败，此处手动关闭。 5....无法从router里获取RouteParams的API。原因：angular(v4.1.1)中，使用ActivatedRoute的API获取路由信息。...解决办法：注入DomSanitizer服务可以把一个值标记为可信任的，这里添加了一个叫safeUrl的pipe组件，位于app/shared/pipe/safe-url.main.pipe.ts。

8.1K0 0

Angular2 VS Angular4 深度对比：特性、性能

许多模块被淘汰出了Angular核心，这也促使Angular2具备更好的性能。Angular走向了不断增长的模块生态系统，这意味着开发者可以自由的选择所需的组件。...提升依赖注入（DI）：依赖注入（一种程序设计模式，可以通过依赖关系实现调用，而不需要生成）是一种Angular显著区别于其竞争对手的特性。...依赖注入在模块化开发和元素隔离方面非常有帮助，但它的实现一直受到Angular 1.x的困扰。Angular2解决了这个问题，另外还添加了一些缺少的功能，如子注入以及生命周期/范围控制。...由于代码依赖于ES6模块，因此模块加载程序将通过在部分组件上引用它们，来加载依赖关系。...scope： $scope 从Angular2中删除了。

8.7K2 0

进阶 | 重新认识Angular

（Angular1中的带有环的结构） ---- 模块化组织 Angular模块 Angular模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。...依赖注入 Angular的依赖注入可谓是灵魂了，之前有篇详细讲这个的文章《谈谈Angular2中的依赖注入》。...---- 什么是依赖注入依赖注入在项目中，体现为项目提供了这样一个注入机制：有人负责提供服务，有人负责消耗服务，而这样的机制提供了中间的接口，并替使用者进行了创建并初始化这样的处理。...而Angular在某种程度上替我们做了这样的工作，并提供我们使用。在Angular里面我们常常通过服务来共享一些状态的，而这些管理状态和数据的服务，便是通过依赖注入的方式进行处理的。...这样，每次当我们请求页面的时候，都请求整个bundle.js并加载，有了Webpack或许我们只需要加载其中的某些模块，但还是需要请求到所有的代码。

2.5K1 0

大漠穷秋：全面解读Angular 4.0核心特性

在Windows下面，node-jyp这个包依赖于Visual Studio，node-sass这个node模块也被墙掉了。所以强烈推荐使用cnpm安装。...Angular/cli把打包、压缩等工作全部分装在命令行里面，并集成了test的所有功能。...Angular2-dependencies-graph是一个node.js的模块，通过它把项目的目录和结构生成图表，就可以清晰地知道自己写的模块位于项目的哪个位置。...Angular架构特色 Angular是第一个把依赖注入这个思想带入到前端开发里来的。在Angular里，依赖注入只有构造器注入这一种方式。...前端用户Angular做它的前端框架，它实现了Angular1和Angular2两个版本，选择范围比较广。可以利用它快速搭建应用框架。今天的分享到此结束，谢谢大家！

2.1K5 0

干货 | 前端阶段性总结之「框架相关」那些事

触框架里面，可能是Angular最多吧，之前项目都是Angular1，现在项目在用Angular2。不得不说，Angular对管理端的开发效率其实是很不错的，毕竟PC端对性能优化等的宽容度都还可以。...目前来说，收集的更多是Angular1的一些文章吧，但感觉多数都不是很完整的，那这里本骚年就简单分享一下使用的演进吧。...Angular1的个人演进入门+理解Directive/Controller/Provider/依赖注入等使用Yaomen自动化搭建Gulp+Grunt开发升级Angular(1.2到1.5) 改用...具体大家也可以本骚年参考之前写的笔记–angular混搭分类。 Angular2的话，目前在做2到4版本的升级。作为项目的熟悉过程，现在还不能给出很多的分享，后面或许有空会整理做些笔记吧。...模块化之前曾经有过像requirejs和seajs等模块化工具，而从es6开始支持module之后，无论是模块化、组件化、依赖注入和异步加载等都变得很是简单呢。

9362 0

Vuejs和其他前端框架的对比

这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。在Vue中，如果你遵守一定的规则，你可以使用单文件组件....它们一样是在组件中被定义，但Vue依赖于模板语法，你可以通过模板的循环函数更高效地展示传入的数据。...Angular 1，MVVM（Model）(View)(View-model) 2，模块化（Module）控制器（Contoller）依赖注入： 3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面...对于后台之类的重表单应用，还是Ng2有优势。依赖注入无论你喜不喜欢DI，这就是Angular2的强大功能之一。有DI可以在不改变代码结构的情况下完成功能替换。...相比而言，Vue 在支持到 IE9 的情况下并不需要依赖 polyfills 来工作。在 Polymer 1.0 版本中，为了弥补性能，团队非常有限的使用数据绑定系统。

3.8K11 0

angular5面试题_大数据面试题

会做2件事，1）基于npm安装node_modules, 2）自动更改配置文件，保证新的依赖正常工作关于angular的依赖注入（dependency injection）依赖注入是Angular实现的一种应用程序设计模式...Angular提供了一种平滑的机制，通过它我们可以将这些依赖项注入我们的组件和指令中。因此，我们只是在构建依赖关系，这些依赖关系可以在应用程序的所有组件之间注入。...使用依赖注入还有以下好处，不需要实例化，（new 实例）。不需要关心class的构造函数里需要什么参数一次注入（app module通过Providers注入），所有组件都可以使用。...脏值检测的基本原理是存储旧数值，并在进行检测时，把当前时刻的新值和旧值比对。若相等则没有变化，反之则检测到变化，需要更新视图。 angular2中有了Zone.js。...模块通过导出或隐藏这些元素来决定其他模块是否可以使用组件，指令等。每个模块都使用@NgModule装饰器定义。 Root Module和Feature Module的区别。

4.3K2 0

vue.js与其他前端框架的对比

这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。在Vue中，如果你遵守一定的规则，你可以使用单文件组件....它们一样是在组件中被定义，但Vue依赖于模板语法，你可以通过模板的循环函数更高效地展示传入的数据。...Angular 1，MVVM（Model）(View)(View-model) 2，模块化（Module）控制器（Contoller）依赖注入： 3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面...，类似路由插件(Vue-router)，Ajax插件(vue-resource)等下面从几个方面来比较一下Vue.js和Angular.js的区别 TypeScript Angular 事实上必须用...对于后台之类的重表单应用，还是Ng2有优势。依赖注入无论你喜不喜欢DI，这就是Angular2的强大功能之一。有DI可以在不改变代码结构的情况下完成功能替换。

4.1K8 0

Angular2 学习第一天

Angular2中的八个主要构造块 1.（Module ）模块 Angular应用由模块组成，模块能导出组件，服务，函数，值等供其它模块使用 2....（Component）组件 directives数组包含组件模板依赖的组件或指令 providers数组包含组件依赖的服务 3.（Template）模板 4.（Metadata）元数据 5....（Dependency Injection）依赖注入实例 //从模块库引入类型定义 import {Component} from "angular2/core"; import {bootstrap...（Typescript/traceur/babel）的注解特性，注解可以看作是转换码器层面的语法糖。...Paste_Image.png 过滤器 Angular2中的过滤器过滤器即模板中对数据的变换机制常用预置过滤器： DecimalPipe: | number:'2.2-2' DatePipe: |

7852 0

AngularJS2.0 教程系列（一）

等各种格式的JS模块加载 es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块 traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5...引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6的关键字，用来从模块中引入类型定义...在这里，我们从angular2模块库中引入了三个类型： Component类、View类和bootstrap函数。 2....EzApp.annotations = [new Component({selector:"ez-app"})]; 很显然，注解可以看做编译器（traceur）层面的语法糖，但和python的装饰器不同...，注解在编译时仅仅被放在annotation里，编译器并不进行解释展开 - 这个解释的工作是 Angular2完成的： ?

2.4K1 0

Angular2：从AngularJS 1.x 中学到的经验

如果控制器之间有一些重复的逻辑，最大的可能就是：我们需要把这些逻辑封装到某个服务里面，如果某个控制器需要用到这些功能，就使用AngularJS 的依赖注入机制注入这个服务。...由于指令支持依赖注入API，所以在接收到用户的输入之后，可以直接把具体的操作代理给注入的服务来执行。...在《迈向Angular2》一书第5 章会进一步学习依赖注入API。服务端渲染 Web 需求越大，web 应用就变得越复杂。...大规模应用自从Backbone.js 出现之后，MVW 就是构建单页应用的标配。我们可以按照注意点分离原则把业务逻辑从视图中分离出来，从而构建出设计良好的应用。...利用JavaScript 虚拟机的代码优化机制可以获得显著的性能提升，其中一种优化叫做内联缓存。但是AngularJS 1.x 中实现的digest循环内存使用效率不高，而且阻碍了这种优化过程。

2.7K1 0

前端三大框架大杂烩

有了这三个框架之后，我们告别了以前jquery面条式的代码，也摆脱了到处操作dom元素带来的繁琐，模块业务划分更清晰。这三个框架的出现，不仅让前端的工作得以高效，也让后端省了不少事，比如，路由控制。...Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。...-> Angular2 Angular1使用依赖注入来解决模块之间的依赖问题，模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块，也考虑了动态加载的需求。 Vue Vue中指令和组件分得更清晰。...代码才能使用（可以进行跨平台开发的依据，通过不同的解释器解释成不同平台上运行的代码，由此可以有RN和React开发桌面客户端）。

2.6K5 0

ECMAScript6基础学习教程（一）运行ES6代码

目前，浏览器JavaScript引擎还没有全盘支持ES6语法（Chrome情况会好些，但依旧没有支持所有的ES6新特性），所以，我们依旧需要使用ES6转码器，将ES6语法转为ES5语法，再在浏览器中运行...最流行，最推荐的ES6转码器是Babel。无论是React，亦或Vue，Angular2，无一例外的使用了Babel来支持ES6特性，通过webpack这个模块化和项目构建工具来编译ES6。...单独运行JS文件单独运行某个含有ES6语法的JS文件，步骤如下：安装Babel命令行工具和相关包 npm install --global babel-cli npm install --save...2.在浏览器中运行JS代码如果需要在浏览器中支持ES6语法，可以引入脚本转换器babel.min.js，以内联脚本或者外部文件链接方式运行： ......：从Babel 6.0开始，不再直接提供浏览器版本。

7233 0

这种实现方式被称为“推断注入”，也就是从传入的工厂方法形参的名称中推断出依赖的模块并将其注入，函数体的字符串形式可以调用toString方法得到，接着使用正则就可以提取出形参的字符，也就是依赖模块的名称...这种方式虽然简洁，但代码在利用工具进行压缩混淆时通常会将形参使用的名称修改为更短的名称，这时再用形参的名称去寻找依赖项就会导致错误，于是AngularJS又提供了另外两种依赖注入的实现方式——“内联声明...AngularJS的依赖注入模块源代码可以在官方代码仓的src/auto/injector.js中找到，从文件夹的命名就可以看到它是用来实现自动化依赖注入的，其中包含大量官方文档的注释，会对阅读理解源代码的思路有很大帮助...其他类型的装饰器本文中不再赘述，它们的工作方式是相似的，下一节中我们来看看Inversify.js是如何使用装饰器语法来实现依赖注入的。...用inversify.js实现依赖注入 Inversify.js提供了更加完备的依赖注入实现，它是使用Typescript编写的。

3.3K3 0

Angular企业级开发(1)-AngularJS简介

视图会从模型中获取数据，然后展示给用户，当用户通过鼠标或键盘操作或键入与应用进行交互的时候，控制器将会做出响应，并修改模型中的数据，最后模型会通知视图，数据已经发生变化，这样视图就可以刷新其中改变的内容...5.依赖注入 Dependency Injection是一种设计模式，目的是在配置应用时定义应用所需的依赖。使用依赖注入能避免手动创建应用的依赖。...初次启动应用时，AngularJS会使用依赖注入加载模块的依赖。 Java流行框架Spring就是充分使用了依赖注入。...依赖注入能提升AngularJS应用的可测试性，而且AngularJS单元测试和集成测试还有专门的测试框架。 6.可测试性 AngularJS应用借助依赖注入的，大大提升了应用的可测试性。...Angular1.x和Angular2 在国内1.5.x版本开发的应用应该较多，但是2.0版本也已经发布了。对于Angular2，很多开发者都觉的要重新学习一遍。

1.5K8 0

Angular2 初体验

Angular2 和 AngularJS 1.x 相比，可以说是全新的框架，除了名字有延续性之外，能延续的真的不多。...： mkdir learning-angular cd learning-angular npm init 编辑生成的 package.json 文件，添加 angular2 的 npm 包及其依赖项..."> UMD 的全称是 Universal Module Definition，符合 UMD 定义的 Javascript 模块可以在任意的 Javascript 环境中执行。...使用 TypeScript 开发 Angular2 应用虽然完全能够使用 Javascript es5 来开发，但是这并不是官方推荐的做法，官方推荐的是 TypeScript ，默认的教程也都是使用...TypeScript 最终会被编译成 JavaScript 的模块 (commonjs/amd/system) ，因此需要一个模块加载器，官方使用的是 SystemJS，因此我们要安装 SystemJS

1.6K2 0

拥抱 Vite2.0 系列（二）

依赖项被强缓存 Vite通过HTTP头缓存依赖请求，所以如果你想在本地编辑/调试依赖，请遵循这里的步骤。热模块替换 Vite通过本地ESM提供了HMR API。...这样TS就会对那些不能与单独的翻译一起工作的特性发出警告。客户端类型 Vite的默认类型是Node.js API。...你可以使用jsxInject(这是唯一的vite选项)注入JSX helper，以避免手动导入: // vite.config.js export default { esbuild: {.../example.json' Glob Import Vite支持通过特殊的import.meta.glob从文件系统中导入多个模块: const modules = import.meta.glob...如果你宁愿直接导入所有的模块(例如，依赖于这些模块中的副作用首先被应用)，你可以使用import.meta.globEager相反: const modules = import.meta.globEager

3.3K3 0

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

angular2模块:使用OpaqueToken的依赖注入可以从JS模块工作，但不能内联

相关·内容

Angular2 ：从 beta 到 release4.0 版本升级总结

Angular2 VS Angular4 深度对比：特性、性能

进阶 | 重新认识Angular

大漠穷秋：全面解读Angular 4.0核心特性

干货 | 前端阶段性总结之「框架相关」那些事

Vuejs和其他前端框架的对比

angular5面试题_大数据面试题

vue.js与其他前端框架的对比

Angular2 学习第一天

AngularJS2.0 教程系列（一）

Angular2：从AngularJS 1.x 中学到的经验

前端三大框架大杂烩

ECMAScript6基础学习教程（一）运行ES6代码

前端三大框架vue，angular，react大杂烩

前端三大框架vue，angular，react大杂烩

一统江湖的大前端（10）——inversify.js控制反转

Angular企业级开发(1)-AngularJS简介

Angular2 初体验

拥抱 Vite2.0 系列（二）

angular教程推荐

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐