首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

非angular类如何使用angular服务及其dep

在非Angular类中使用Angular服务及其依赖(dependency),可以通过以下步骤实现:

  1. 创建一个Angular服务:
    • 使用Angular CLI命令(例如:ng generate service myService)创建一个新的Angular服务。
    • 在服务文件中定义所需的功能和方法。
  • 注册服务提供商:
    • 在需要使用服务的模块中,通过提供商将服务注册到模块的提供商列表中。
    • 可以使用@Injectable装饰器将服务标记为可注入的。
  • 在非Angular类中使用服务:
    • 使用Angular的依赖注入机制,在非Angular类的构造函数中注入服务实例。
    • 通过调用注入的服务实例的方法来使用其功能。

以下是一个示例:

在Angular服务文件中,例如myService.service.ts

代码语言:txt
复制
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData(): string {
    return 'Data from Angular service';
  }
}

在非Angular类中,例如一个普通的JavaScript类:

代码语言:txt
复制
import { MyService } from './myService.service';

class NonAngularClass {
  private myService: MyService;

  constructor(myService: MyService) {
    this.myService = myService;
  }

  useService(): void {
    const data = this.myService.getData();
    console.log(data);
  }
}

在使用该非Angular类的文件中,例如main.ts

代码语言:txt
复制
import { MyService } from './myService.service';
import { NonAngularClass } from './nonAngularClass';

const myService = new MyService();
const nonAngularClass = new NonAngularClass(myService);
nonAngularClass.useService();

这样,非Angular类NonAngularClass就可以通过注入服务实例MyService来使用服务中的功能。

请注意,以上示例中使用的是Angular的依赖注入机制,如果需要在非Angular类中使用服务,需要手动进行依赖注入,而不是直接通过new关键字实例化服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular Elements 组件在angular 页面中使用的DEMO

如果页面引入该Js文件 ,就相当于在页面中新增了一个标签,所以在任意框架中都可以使用新标签,就像它是原生div一样。        ...二、Angular Elements 使用实战      前不久看到项目angular-elements-dashboard :支持动态加载模块和动态加载外部的模块。...于是我就尝试一下,看这个构建的angular elements 文件到底如果引入一个空白的页面中,引入后的组件在浏览器中又是如何呈现的。      页面结构:      ?...总结一下,通过使用两个种方式操作自定义元素和以前学习的内置元素的概念一模一样。 ...它的目的是为了不改变Native的模式情况下,引入最新的Shadow Dom v1技术 ,而Native已经过时,不鼓励使用

2.7K20

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。 这允许您在开发期间连续运行应用程序。...#install PM2 第3步:使用Angular CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app...终止正在运行的Angular App 第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

2.9K40
  • 如何使用Angular CLI和PM2运行Angular应用程序

    Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...Angular CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app,将其替换为应用程序的名称...第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...Angular CLI主页:https://angular.io/cli PM2主页:http://pm2.keymetrics.io/ 在本指南中,我们展示了如何使用Angular

    2.2K30

    如何Angular项目中使用MQTT

    本文将介绍如何Angular 项目中使用 MQTT 协议,实现客户端与 MQTT 服务器的连接、订阅、收发消息、取消订阅等功能。...项目初始化新建项目参考链接如下:使用 Angular CLI 创建 Angular 项目示例:ng new my-app安装 MQTT 客户端库本次使用的是库为 ngx-mqtt,这个库不仅仅是 MQTT.js...服务器本文将使用 EMQX 提供的免费公共 MQTT 服务器,该服务基于 MQTT 云服务器 - EMQX Cloud 创建。...总结综上所述,我们实现了在 Angular 项目中创建 MQTT 连接,模拟了客户端与 MQTT 服务器进行订阅、收发消息、取消订阅以及断开连接的场景。...Angular 作为三大主流的前端框架之一,既能够在浏览器端使用,也能够在移动端使用,结合 MQTT 协议及 MQTT 物联网云服务 可以开发出很多有趣的应用,比如客服聊天系统或实时监控物联网设备信息的管理系统等

    2.5K40

    Angular 2 + 折腾记 :(3)初步了解服务使用

    前言 不探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理的地方; Angular2...// vehicle-fault.service.ts // 服务必须引入这个 import { Injectable } from '@angular/core'; // 自己封装的鉴权 import...this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里的每个接口返回一个可观察的订阅对象 }复制代码 那么我们应该如何服务可以正常使用呢...大致有那么两种; 模块内注入,整个模块内的components皆可以使用 import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用.../core'; // 引入路由模块 import { Router, ActivatedRoute } from '@angular/router'; // 基 import { MitDataTableBase

    1.6K20

    angular框架如何实现父子组件传值、父子组件传值

    文章目录 1.理解父子组件、父子组件 2.父组件给子组件传值- -@input 3.父组件通过@ViewChild主动获取子组件的数据和方法 4.父子组件如何传递数据 1.理解父子组件、父子组件...子组件中@input接收父组件传过来的数据: export class newsComponent implements OnInit{ @Input msg:string } 即在组件的中用...3.父组件通过@ViewChild主动获取子组件的数据和方法 在angular也提供了一个@Output修饰器来实现子组件给父组件传值,但是这个方法是较复杂的,我们使用另一种@ViewChild方法来实现...4.父子组件如何传递数据 现在我知道的有三种方法: cookie:只要在一个组件的ts文件中设置了cookie,则其他组件也可以读取cookie的键值对。...service:定义一个服务,将不同组件中要使用相同的函数用一个服务包裹,则可以在不同组件引入这个服务来公用同一方法。

    1.6K20

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    用户在设计器中进行更改后,只需单击一下,就可以使用修改后的Angular标记更新原始HTML文件。...例如,您可以使用IntelliSense为新控件创建Angular标记,然后使用可视化设计器编辑标记。...在我们的示例中,操作是在单独的选项卡中打开设计图面,并使用 Angular标记提供的上下文,以及源文件中该标记的位置。 现在单击链接以在相邻选项卡中打开设计器。...现在,“属性”窗格显示特定于TrendLine的属性。 设置绑定到latestPrice,fitType设置为Logarithmic,以及对Plot的可见性。...西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务

    5.4K40

    Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)

    现在使用http模块与后端通信,变可以让我们的应用活起来。 我把后台服务写成了可跨域请求的webapi,这样在node上面调试起来就方便多了。...@Component表示该js文件所导出的是组件。 @Injectable表示该js文件所导出的文件是服务,而服务是可以通过注入来创建的。...服务的注入,是angular中用来剥离controller和业务逻辑的方式。...通过toPromise转换成promise对象以后,就可以正常的使用then方法去处理返回值了。 通过promise的then方法,可以获得到服务器的返回值。...这里写图片描述 对,会提示,如果使用了类型里没有的字段,还会报错。这活生生把一个弱类型语言变成了强类型的。当然如果不喜欢,我们可以不用自定义。把自定义的Result换成any即可。 ?

    1.3K10

    使用.net core ABP和Angular模板构建博客管理系统(创建后端服务

    如何创建.net core ABP和Angular模板可以参考我的这篇文章:http://blog.csdn.net/yiershan1314/article/details/78219322 创建实体...CreatorUserId { get; set; } } 创建DbContext 提到DbContext,对于经常使用DbFirst模式的开发者来说已经再熟悉不过了,EntityFramework...set; } public DbSet NoteToNoteBooks { get; set; } } 创建数据库迁移 现在我们通过创建的实体和...DbContext利用EF的Code First数据库迁移来创建数据库。...这里写图片描述 构建应用层服务 在DDD(领域驱动设计)设计中,仓储实现了对数据进行特定操作的代码。ABP使用泛型IRepository接口为每一个实体创建了一个自动的仓储。

    61120

    使用.net core ABP和Angular模板构建博客管理系统(完善前台服务

    上一篇写到 使用.net core ABP和Angular模板构建博客管理系统(创建前端菜单及页面):http://www.jianshu.com/p/4ff4ddeae917 实现添加方法...input).subscribe(m => this.refresh()); // 一定要执行subscribe这个请求才会发出去 } 在note.component.html中使用...简单实现添加功能 抽象一个基 我们看见这样有太多的重复代码,我们抽象一个基出来吧。 如下新建一个文件: ?...,delete请求 import { Observable } from 'rxjs/Observable'; import { Http, Headers, Response } from '@angular...删除方法可以用 思考 1、 列表页面继承了PagedListingComponentBase,这个到底提供了些什么。 2、在处理的时候应该有提示和遮罩层显得更加友好。

    51120

    使用angular2中使用nodejs创建服务器,并成功获取参数

    首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...; 安装nodemon 可以让服务器自动重启, 方法:npm install nodemon; 在启动服务器的时候用:nodemon build/...js; 这样服务器就算启动完成了. /** *...,地址是http://localhost:8000") }); 接着在本地从创建好的服务器上获取数据: import { Component, OnInit } from '@angular/core'...app.module中引入过了,这里需要声明在构造函数里头,并引入Http from "@angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务器上的数据: 接下来还有配置: 在根目录新建一个文件...然后在package.json文件中,修改一行 "start": "ng serve --proxy-config proxy.confi.json", 然后启动 要用npm run start; 只要使用这个命令

    4.3K70

    前端必读3.0:如何Angular使用SpreadJS实现导入和导出 Excel 文件

    在之前的文章中,我们为大家分别详细介绍了在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的“三部曲”,本文我们将为大家介绍该问题在Angular...mod=attachment&aid=MjM0MDU3fDk2NDQyNTkyfDE2NjM5MjI3NjF8NjI2NzZ8OTk3MTg%3D 应该注意的是,由于我们使用的是 Angular CLI...,我们需要确保它与 NPM 一起安装: npm install -g @angular/cli 由于我们将使用 SpreadJS 的 Excel 导入和导出功能,因此我们需要 ExcelIO 组件。...workbookInitialized)="workbookInit($event)"> 实例化 SpreadJS 组件并在 app.component.ts 文件中创建 ExcelIO 的对象.../node_modules/file-saver/FileSaver.js"]** 导入组件 import {saveAs} from 'file-saver'; 现在已经可以在 Angular使用

    1.8K20

    AngularDart4.0 指南-体系结构概述 顶

    您可以通过使用Angular的标记组合HTML 模板,编写组件来管理这些模板,在服务中添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...您可以使用其配套模板定义组件的视图。 模板是一种HTML形式,告诉Angular如何呈现组件。 模板看起来像普通的HTML,除了一些不同之处。...注意是如何在原生HTML元素中合适的存放。 自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个。...@Component注解需要参数提供Angular需要的信息来创建和呈现组件及其视图。...如果注射器没有HeroService,它如何知道如何制作一个? 简而言之,您必须事先在注入器中注册HeroService的提供者。 提供者是可以创建或返回服务的东西,通常是服务本身。

    7.9K30

    Angular 2 架构(上)

    (Templates)是由 Angular 扩展的 HTML 语法组成,组件 (Components)用来管理这些模板,应用逻辑部分通过服务 (Services)来完成,然后在模块中打包服务与组件,...imports - 本模块组件模板中需要由其它导出的模块。 providers - 服务的创建者。本模块把它们加入全局的服务表中,让它们在应用中的任何部分都可被访问到。...我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。...---- 元数据(Metadata) 元数据告诉 Angular 如何处理一个。 考虑以下情况我们有一个组件叫作 Component ,它是一个,直到我们告诉 Angular 这是一个组件为止。...@Component 装饰器能接受一个配置对象,并把紧随其后的标记成了组件Angular 会基于这些信息创建和展示组件及其视图。

    1.4K10

    Angular学习笔记(一)

    imports - 本模块声明的组件模板需要的所在的其它模块。 providers - 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。...模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个。...@Component 装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。...往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。 指令 Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。...服务 服务是一个广义范畴,包括:值、函数,或应用所需的特性。 依赖注入 大多数依赖都是服务Angular 使用依赖注入来提供新组件以及组件所需的服务。 2.

    3.3K20

    Angular系列教程-第五节

    1.模块 NgModule 是一个带有 @NgModule 装饰器的。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...每个组件都应该(且只能)声明(declare)在一个 NgModule 中。 如果你使用了未声明过的组件,Angular 就会报错。 declarations 数组只能接受可声明对象。...Angular 把组件和服务区分开,以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开,你可以让组件更加精简、高效。 理想情况下,组件的工作只管用户体验,而不用顾及其它。...依赖注入 在 Angular 中,要把一个定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。...同样,也要使用 @Injectable() 装饰器来表明一个组件或其它(比如另一个服务、管道或 NgModule)拥有一个依赖。

    2.9K20

    Angular 1 vs. Angular 2 深度比较

    让我们看看这是如何达到的: 目标:更易于推论 在当前版本的 Angular 中,我们有时不得已对应特定的使用场景推论框架内部构建,比如必须推论应用事件初始化和摘要循环: 在 Angular 1 中没有摘要循环结束事件...Angular 2 如何因 Zones 而更透明 Angular 2 使用 zones 机制使摘要循环不再被需要。...目标: 提升模块化 在 Angular 1 中,Angular 的模块几乎都依赖于注入容器以及其他相关功能。...目标:为服务器端渲染提供支持 支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的;在一个比较大型的Angular 1 的应用中,即使使用了预先定义的缓存模块,我们可以清楚地看到当应用开始启动时...结论 我真的为 Angular 2 感到兴奋,在尝试几个组件之后,我可以看到它是如何的简单易学,对开发者更加透明。很多事情就像这个文章前面说过的,像 Zones 很容易使用

    2.8K100
    领券