如何在 Angular 中使用 Plunker？(1)

📌 相关文章

📜 如何在 Angular 中使用 Plunker？(1)

📅 最后修改于: 2023-12-03 14:52:13.499000 🧑 作者: Mango

如何在 Angular 中使用 Plunker？

Plunker 是一个在线代码编辑器，支持多种前端框架，其中也包括 Angular。使用 Plunker 可以方便地分享和协作 Angular 项目。本文将介绍如何在 Angular 中使用 Plunker。

步骤

打开 Plunker 官网，单击右上角的“Sign in”按钮，用你的 GitHub 账号登录。

Plunker 官网

创建一个新的 Plunk。单击右上角的“New Plunk”按钮，输入名称和描述，选择 Angular 模板，单击“Create”。

创建新 Plunk

在 Angular 中使用 Plunker。在 Plunker 中使用 Angular，需要通过 npm 安装 Angular，并引入必要的模块。

<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
  <title>Angular Plunker</title>
</head>

<body>
  <my-app>
    Loading...
  </my-app>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.29/zone.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.45/system.js"></script>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function (err) {
      console.error(err);
    });
  </script>
</body>

</html>

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <input [(ngModel)]="name" placeholder="Name">
  `
})
export class AppComponent {
  name = 'Angular';
}

// systemjs.config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  map: {
    '@angular/core': 'https://npmcdn.com/@angular/core',
    '@angular/common': 'https://npmcdn.com/@angular/common',
    '@angular/compiler': 'https://npmcdn.com/@angular/compiler',
    '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser',
    '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic',
    'rxjs': 'https://npmcdn.com/rxjs',
    'app': './app'
  },
  packages: {
    '@angular/core': {
      main: 'bundles/core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'bundles/common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'bundles/compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'bundles/platform-browser.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'bundles/platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    'rxjs': {
      main: 'index.js',
      defaultExtension: 'js'
    },
    'app': {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

运行和分享 Plunker。单击右上角的“Preview”按钮，即可在浏览器中预览 Angular 应用。单击右上角的“Share”按钮，可以获取分享链接和嵌入代码。

运行和分享 Plunk

结论

通过 Plunker，在线分享和协作 Angular 项目变得非常方便。在使用 Plunker 时，需要先安装必要的模块，并引入系统配置文件。最后，可以在浏览器中预览和分享应用。