ng-fiddle 是一个可以为 Angular 应用程序创建在线演示的 npm 包。使用 ng-fiddle 可以轻松创建一个演示页面，以便与他人共享你的 Angular 代码示例，方便交流和学习。
本文将介绍如何使用 ng-fiddle 进行 Angular 应用程序的在线演示，并附有相应的代码示例供读者学习参考。
1. 安装
使用以下命令安装 ng-fiddle：
npm install -g ng-fiddle
安装完成后，就可以使用 ng-fiddle 命令来创建一个新的演示页面。
2. 创建演示页面
创建演示页面非常简单，只需要在你的 Angular 应用程序文件夹中打开终端，然后运行以下 ng-fiddle 命令：
ng-fiddle create
命令执行完成后，将会在你的应用程序的根目录下创建一个新文件夹 ng-fiddle，其中包含一个名为 app.ts 的 TypeScript 文件。
3. 编写代码示例
在 app.ts 文件中，你可以自由写入任何你想演示的 Angular 代码片段。例如，你可以创建一个简单的组件，并在其中输出一段文本。
下面是一个使用 ng-fiddle 创建的示例组件代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: 'Hello, ng-fiddle!'
})
export class AppComponent {}在这个示例代码中，我们创建了一个名为 AppComponent 的组件，它的模板内容只包含了一段简单文本信息。
当然，你可以编写任何你想演示的代码片段，用来说明各种 Angular 的特性和用法。在后面的章节，我们会给出更加复杂的代码示例。
4. 运行演示页面
在编写完代码示例后，我们需要运行演示页面来确保代码能够正确运行。
使用以下命令来运行演示页面：
ng-fiddle serve
执行该命令后，ng-fiddle 将启动本地服务器，并在默认端口（3000）上运行你的 Angular 应用程序。使用浏览器访问 http://localhost:3000/，即可查看运行效果。
5. 共享演示页面
在可以成功运行演示页面后，你需要将你的代码分享给别人。ng-fiddle 已经为你准备好了共享功能。
使用以下命令来共享你的演示页面：
ng-fiddle share
执行该命令后，ng-fiddle 将会为你生成一个唯一的 URL，用于在 ng-fiddle 网站上访问你的演示页面。复制该 URL，并与其他人共享即可。
6. 示例代码
下面是一个完整的使用 ng-fiddle 创建演示页面的代码示例（假设你的 Angular 应用程序文件夹名为 my-app）：
安装 ng-fiddle
npm install -g ng-fiddle
创建演示页面
cd my-app ng-fiddle create
编写代码示例
在
my-app/ng-fiddle/app.ts文件中编写AppComponent组件代码：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ---------- --------------- --------- -- ------------ ------- ------- -------- - -- ------ ----- ------------ - ------- - ----- -- -- ---------- -运行演示页面
ng-fiddle serve
共享演示页面
ng-fiddle share
执行以上步骤后，你就可以在 ng-fiddle 上共享你的 Angular 代码示例了。
结论
在本篇文章中，我们介绍了如何使用 ng-fiddle 进行 Angular 应用程序的在线演示。通过本文的学习，你可以轻松创建一个在线演示页面，并与他人分享你的 Angular 代码示例，方便交流和学习。希望读者可以在日常开发中应用本技术，提升自身开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e0388