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

如何让Angular 2 CLI ng通过子目录提供服务

Angular 2 CLI的ng命令可以通过子目录提供服务的方法如下:

  1. 首先,确保你已经安装了Angular CLI。如果没有安装,可以使用以下命令进行安装:
代码语言:txt
复制
npm install -g @angular/cli
  1. 在命令行中,进入你的Angular项目的根目录。
  2. 创建一个子目录,用于存放你想要提供服务的文件。可以使用以下命令创建子目录:
代码语言:txt
复制
mkdir subdirectory
  1. 在子目录中创建一个服务文件,例如my-service.ts。可以使用以下命令创建文件:
代码语言:txt
复制
touch subdirectory/my-service.ts
  1. 打开my-service.ts文件,并编写你的服务代码。这里提供一个简单的示例:
代码语言:txt
复制
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  // 在这里编写你的服务逻辑
  // ...
}
  1. 在根目录中的app.module.ts文件中,将你的服务添加到providers数组中。打开app.module.ts文件,并将以下代码添加到providers数组中:
代码语言:txt
复制
import { MyService } from './subdirectory/my-service';

@NgModule({
  // ...
  providers: [MyService],
  // ...
})
export class AppModule { }
  1. 现在,你可以在任何组件中使用MyService服务。只需在组件的构造函数中注入该服务即可。例如,在app.component.ts中:
代码语言:txt
复制
import { Component } from '@angular/core';
import { MyService } from './subdirectory/my-service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
  `
})
export class AppComponent {
  title = 'My App';

  constructor(private myService: MyService) { }
}

通过以上步骤,你就可以在Angular 2 CLI项目中通过子目录提供服务了。

请注意,这里提供的是一种通用的方法,具体的实现可能会因项目结构和需求而有所不同。如果需要更多关于Angular的帮助,可以参考腾讯云的Angular相关文档和产品:

希望以上信息对你有帮助!如果有任何其他问题,请随时提问。

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

相关·内容

Angular CLI 创建你的第一个 Angular 示例程序

第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。 全局安装 Angular CLI。...希望创建工作区和初始化应用项目: 运行 CLI 命令 ng new,并提供一个名字 my-app,如下所示:ng new my-app ng new 会提示你要把哪些特性包含在初始的应用项目中。...还将创建下列工作区和初始项目文件: 一个新的工作区,根目录名叫 my-app 一个初始的骨架应用项目,也叫 my-app(但位于 src 子目录下) 一个端到端测试项目(位于 e2子目录下) 相关的配置文件...第三步:启动开发服务Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。 进入工作区目录(my-app)。...使用 CLI 命令 ng serve 启动开发服务器,并带上 --open 选项。

1.1K40

Angular 应用的外壳 原

你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来你构建出 Tour of Heroes app(英雄指南) 这个应用。...运行 CLI 命令  ng new 然后提供空间的名字  angular-tour-of-heroes, 完整的命令如下显示: ng new angular-tour-of-heroes ng new...一个最初的骨架应用项目,同样叫做 angular-tour-of-heroes(位于 src 子目录下)。 一个端到端测试项目(位于 e2e 子目录下)。 相关的配置文件。...cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。...添加应用样式 大多数应用都会努力整个应用保持一致的外观。 因此,CLI 会生成一个空白的 styles.css 文件。 你可以把全应用级别的样式放进去。

94810

Angular 应用的外壳

你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来你构建出 Tour of Heroes app(英雄指南) 这个应用。...运行 CLI 命令  ng new 然后提供空间的名字  angular-tour-of-heroes, 完整的命令如下显示: ng new angular-tour-of-heroes ng new ...一个最初的骨架应用项目,同样叫做 angular-tour-of-heroes(位于 src 子目录下)。 一个端到端测试项目(位于 e2e 子目录下)。 相关的配置文件。...cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。...添加应用样式 大多数应用都会努力整个应用保持一致的外观。 因此,CLI 会生成一个空白的 styles.css 文件。 你可以把全应用级别的样式放进去。

1K30

Angular10配置webpack打包 「详细教程」

添加ngx-build-plus: ng add ngx-build-plus npm 包管理器 AngularAngular CLIAngular 应用都依赖于某些库所提供的特性和功能,它们都是...要想创建工作区和初始应用项目: 运行 CLI 命令 ng new,并提供一个名字 my-app,如下所示: ng new my-app ng new 会提示你要把哪些特性包含在初始的应用项目中。...完整命令:ng new my-app --style less 第三步:启动开发服务Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。...使用 CLI 命令 ng serve 启动开发服务器,并带上 --open 选项。...--project getting-started 备注:这一步通过NPM安装包,在Angular >= 7 and CLI >= 7版本中,您的项目使用自定义生成器的更新您的angular.jsonng

4.9K20

Angular 6正式版发布,都有哪些新功能

官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本的依赖包,你的依赖包与你的应用程序同步,使用 schematics 时,第三方还能提供脚本更新...如果你的某个依赖包提供ng update schematic,那么它在进行重大更改时会自动更新代码!...学习更多关于如何使用ng update , 开始学习如何创建您自己的 ng update 语法,可以参考 rxjs 的 package.json 的入口,它关联了 collection.json。...ng add使用软件包管理器来下载新的依赖包并调用安装脚本,它可以通过更改配置和添加额外的依赖包(如 polyfills)来更新你的应用。...Shakable Providers 为了你的应用更小,我们将服务引用模块改为模块引用服务,这让我们只需要构建在模块里注入的服务

4.2K20

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

让我们首先检查已安装的 CLI 的版本: $ ng version 如下图所示: 您可能需要运行的第二个命令是 help 命令,用于获取完整的使用帮助: $ ng help CLI 提供以下命令...e2e (e): 构建并提供 Angular 应用程序,然后使用 Protractor 运行端到端测试。 generate (g): 根据原理图生成和/或修改文件。...生成项目 您可以使用 Angular CLI 通过在命令行界面中运行以下命令来快速生成 Angular 项目: $ ng new frontend 注意:frontend是项目的名称。...因此,您不需要安装本地服务器来为您的项目提供服务 —您可以简单地从终端使用 ng serve 命令在本地为您的项目提供服务。...运行结果如下图所示: 生成Angular构件 Angular CLI 提供ng generate 命令,可帮助开发人员生成基本的 Angular 构件,例如模块、组件、指令、管道和服务: $ ng

21100

Angular 6的新特性介绍

ng update ng update 是新增的一个cli命令。通过ng update不仅可以保持正确的版本依赖,而且能保持依赖关系的同步。第三方可以使用原理图提供更新脚本。...如果您的某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码! ng add ng add 也是新增的一个cli命令。...通过ng add可以更加容易向项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大的补充是用于显示分层数据的新树组件。...点击查看更多关于CLI工作空间的信息 Providers的改变 为了使我们的程序变得轻量,Angular6将模块引入服务的模式,改成服务引入模块的模式。...如何升级到6.0.0 按照引导对应用进行升级 ? 更新通常遵循3个步骤,并将利用新ng update工具。

2.3K21

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

Angular是一个完全集成的框架,可以您快速开始项目工作,无需考虑选择哪个库以及如何处理日常问题。我认为Angular是作为前端的,就像RoR是作为后端的。...另一件要提到的事情是Angular CLI和它的Webpack负责编译TS到JS,所以你不应该IDE为你编译它。...一旦安装了它们,我们将通过运行以下命令来安装Angular CLI: npm install -g @angular/cli 安装成功后,我们可以通过运行以下ng new命令来生成一个新项目: ng new...我们正在将我们的应用程序构建为可以从任何Web服务提供的静态资产(如果您想从子目录提供服务ng build,请选择--base-href)。...(例如俄语)提供服务ng serve --aot --locale=ru --i18n-file=src/messages.ru.xlf。

42.5K10

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

在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。 这允许您在开发期间连续运行应用程序。...#install PM2 第3步:使用Angular CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app...$ cd sysmon-app $ sudo ng serve 使用Angular CLI提供Angular App 从ng serve命令的输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符...终止正在运行的Angular App 第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

2.9K40

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

Angular CLIAngular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...第3步:使用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 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

自动内联字体 为了加快应用的第一次内容绘制,从而你的应用变得更快,我们引入了自动字体内联。在编译时,Angular CLI 将下载和内联在应用程序中使用和链接的字体。...我们引入了新的 CLI 输出更新,日志和报告更容易阅读。...改进的 CLI 输出格式 改进的报告和日志 Angular Language Service(语言服务提供了很多有用的工具,为 Angular 开发带来了更多生产力和乐趣。...更快的构建 通过对一些关键领域所做的更新,我们带来了更快的开发和构建周期。 安装依赖项时,ngcc 更新流程现在加快到了 2-4 倍。 TypeScript v4.0 的编译速度加快了。...如何获取版本 11 更新 当你准备好时,请运行以下命令来更新 AngularCLIng update @angular/cli @angular/core 可以前往 update.angular.io

3.3K30

干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架

因此,您应该考虑将Angular JavaScript框架添加为开发工具包的一部分。 开发人员可以将工作隔离到工作站,也可以他们登录到数据中心中的特定服务器(以保持集中状态)。...你需要什么 AlmaLinux的运行实例 具有sudo特权的用户 如何在AlmaLinux上安装Angular 登录到您的AlmaLinux服务器,并首先使用以下命令安装git: sudo dnf install.../ cli 以上安装完成后,请使用以下命令验证安装: ng --version 您应该看到已安装Angular的版本以及其他几个软件包(图A)。...在为应用程序提供服务后(需要一两分钟才能完成此步骤),打开Web浏览器并将其指向http:// SERVER:4200(其中SERVER是您的托管服务器的IP地址)(图B)。...Angular已成功为该应用程序提供服务。 恭喜,您现在已为开发人员准备了Angular。在流行的框架的帮助下,他们登录到服务器并开始开发公司理想的Web或移动应用程序。

1K20

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...你快熟的构建一个属于自己的NG-ZORRO后台管理框架,注意我们的前端代码的编写全部都是在VS Code上面编写。 Angular项目目录介绍(重要): ?...使用Angular CLI快速添加功能到现有的Angular应用程序: Angular CLI介绍: Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng

3.9K20

使用Angular CLI生成 Angular 5项目

今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命令会生成一个新的项目叫做my-app并把该项目的文件放在...angular-cli.json文件里面的prefix: ? 在生成的项目里可以看到, 同时还生成了spec文件. 如果我不想我的项目生成spec文件呢?...ng new也有这个参数--skip-tests: ng new my-app2 --skip-tests ? 可以看到, 并没有生成任何spec文件. ng new的参数一共有这些: ?...综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改....前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set 来配置cli.

1.9K30

​使用Angular和TypeScript开发单页应用的详细教程

在这篇博客中,我们将详细介绍如何使用Angular和TypeScript开发一个简单而功能丰富的单页应用。...步骤1:安装Angular CLI首先,确保你的系统已经安装了Node.js和npm(Node包管理器)。...然后通过以下命令安装Angular CLI:npm install -g @angular/cli步骤2:创建Angular应用使用Angular CLI创建一个新的Angular应用。...:ng serve然后在浏览器中访问http://localhost:4200,你将看到你的Angular应用。...通过这个简单的例子,你可以学习如何使用Angular和TypeScript创建一个单页应用。随着你的学习深入,你可以添加更多组件、服务、路由、样式和功能,以创建一个更加复杂和强大的应用。

13410

augular 英雄之旅

1.利用cli创建项目 ng new angular-tour-of-heroes 2.启用应用 cd ....核心库中导出 Component符号,它是一个装饰器工厂,为组件提供需要的元数据,cli自动生成三个元数据 用于为该被装饰的组件指定 Angular 所需的元数据。...2.CLI自动在app.Module.ts中自动导入HeroesCompent(就是cli刚刚生成的heroes.component.ts中的类) 添加属性 在class中增加属性即可 import..."是ng的双向绑定语法,ngModel是指令,默认不能使用,依赖FormsModule 用 @Input 装饰器来 hero 属性可以在外部的 HeroesComponent 中绑定。...创建服务模块 ng generate service hero 自动生成service文件,大概是说将会把服务注入到根组件中 import { Injectable } from '@angular/

1.7K20
领券