本教程中，我们将从一个新的 Angular 应用程序开始，逐步过渡到使用 Capacitor 的原生移动应用程序领域。 您也可以选择添加 Konsta UI
Capacitor allows you to easily convert your Angular web application into a native mobile app without requiring significant modifications or learning a new skill like React Native.
__CAPGO_KEEP_0__ 允许您轻松将 Angular 网络应用程序转换为原生移动应用程序，无需进行重大修改或学习新的技能，如 React Native。
This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you can optionally use 本教程将指导您完成整个过程，首先从一个新的 Angular 应用程序开始，然后使用 __CAPGO_KEEP_0__ 进入原生移动应用程序领域。另外，您也可以选择使用 Konsta UI
About Capacitor
关于 __CAPGO_KEEP_0__
使用 Capacitor，您可以轻松地获得一个功能完善的原生移动应用程序，无需复杂的设置或陡峭的学习曲线。其精简的 API 和流线化的功能使其成为轻松集成到您的项目中的理想选择。相信我，您将惊叹于如何轻松地使用 Capacitor 实现一个功能完善的原生应用程序！
准备您的Angular应用程序
要创建一个新的Angular应用程序，请运行以下命令：
ng new my-app
cd my-app在提示您选择Angular版本时，请选择“Angular”。
为了创建一个原生移动应用程序，我们需要一个 export 我们的项目。因此，让我们在我们的 package.json 中包含一个简单的脚本，以便可以利用它来构建和复制Angular项目：
{
"scripts": {
// ...
"build": "ng build --prod"
}
}执行命令后，您应该能够在项目根目录下看到一个新的 build文件夹。 dist package.json
这个文件夹将在后续由Capacitor使用，但现在我们必须正确设置它。
将Capacitor添加到您的Angular App中
要将任何Web应用打包到原生移动容器中，我们必须遵循几个初始步骤，但之后只需执行一个命令就可以了。 sync 首先，我们可以将__CAPGO_KEEP_0__ __CAPGO_KEEP_1__安装为开发依赖项，然后在项目中设置它。在设置过程中，您可以按“回车”键以接受名称和包ID的默认值。
接下来，我们需要安装核心包和iOS和Android平台的相关包。 Capacitor CLI 到目前为止，您应该能够观察到新的
ios
Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your Angular project
npx cap init
# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platforms
npx cap add ios
npx cap add android文件夹。 ios 和android android Angular 项目中的文件夹。
这些是真正的本机项目!
为了以后访问 Android 项目，您必须安装 Android Studio。对于 iOS，您需要一台 Mac，并应安装 Xcode.
此外，您应该找到一个 capacitor.config.ts 文件在您的项目中，它包含一些基本的Capacitor设置，在同步过程中使用。您需要注意的是 webDir,它必须指向构建命令的结果。目前，它是不准确的。
为了解决这个问题，打开 capacitor.config.json 文件并更新 webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}您可以通过执行以下命令来尝试它：
npm run build
npx cap sync第一个命令 npm run build 将仅仅构建您的Angular项目并复制静态构建，而第二个命令 npx cap sync 将同步所有的web code 到native平台的正确位置，以便在应用中显示。
此外，同步命令可能会更新native平台并安装插件，因此当您安装新的 Capacitor 插件 时，需要重新运行 npx cap sync 命令。
不经意间，你已经完成了，好让我们看看在设备上的应用！
构建和部署原生应用
为了开发iOS应用，你需要安装 Xcode 并且为了开发Android应用，你需要安装 Android Studio 此外，如果你打算在应用商店上发布你的应用，你需要为iOS注册Apple Developer Program，并为Android注册Google Play Console。
如果你对原生移动开发新手，可以使用Capacitor CLI轻松打开原生项目：
npx cap open ios
npx cap open android一旦你设置好了原生项目，部署应用到连接的设备就很容易了。在Android Studio中，只需等待所有内容就绪，然后你就可以在不改变任何设置的情况下将应用部署到连接的设备。以下是一个例子：
在Xcode中，你需要设置签名账户才能将应用部署到真实设备而不是仅仅是模拟器。如果你之前没有做过这个，Xcode会引导你完成这个过程（但再次，必须注册开发者计划）。随后，你只需点击播放即可在连接的设备上运行应用，你可以在顶部选择设备。以下是一个例子：
恭喜! 您已经成功部署了 Angular 网页应用到移动设备。以下是一个例子：
但是，等一下，还有更快的方法可以在开发期间完成此操作……
Capacitor 实时重载
到目前为止，您可能已经习惯了所有现代框架都具有热重载的功能，好消息是您可以在移动设备上实现相同的功能 并且只需花费最少的努力！ 启用对您的本地托管应用程序的实时重载
在您的网络上 通过让 __CAPGO_KEEP_0__ 应用程序从特定 URL 加载内容。 by having the Capacitor app load the content from the specific URL.
在 Windows 上运行：
ipconfig getifaddr en0__CAPGO_KEEP_0__
ipconfig然后查找 IPv4 地址。
我们可以通过在我们的配置中添加另一个条目来指示 Capacitor 从服务器直接加载应用程序： capacitor.config.ts 文件：
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.x.xx:4200',
cleartext: true
}
};
export default config;请确保使用 正确的 IP 和端口，我在这个例子中使用了默认的 Angular 端口。
现在，我们可以通过将这些更改复制到我们的本机项目中来应用这些更改：
npx cap copy命令与 copy 类似，但它只会 sync复制到 web 文件夹和配置中做出的更改，而不会更新本机项目。 文件： 命令与 "capgo build" 类似，但它只会复制到 web 文件夹和配置中做出的更改，而不会更新本机项目。
您可以再次通过 Android Studio 或 Xcode 部署您的应用程序。之后，如果您在 Angular 应用程序中更改了什么 the app will automatically reload 应用程序将自动重新加载
并显示更改！ 请注意
Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.
请注意，您应该在配置中使用正确的 IP 和端口。上面的 Capacitor 块显示了示例目的地的默认 Angular 端口。
使用 Capacitor 插件
npm i @capacitor/share让我们看看如何使用一个 __CAPGO_KEEP_0__ 插件的示例，我们之前提到过几次。要实现这一点，我们可以通过运行： 这并没有什么特别的分享插件 share() 但是它仍然会弹出本机分享对话框！为此，我们现在只需要导入包并从我们的应用程序中调用相应的函数，所以让我们改变 src/app/app.component.ts 到此：
import { Component } from '@angular/core';
import { Share } from '@capacitor/share';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
async share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
}如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要执行此操作，请运行以下命令：
npx cap sync点击按钮后，您可以亲眼目睹美丽的原生分享对话框!
添加 Konsta UI
要在 Nuxt 3 应用中使用 Konsta UI，您需要 tailwind 已经安装 并安装包：
npm i konsta此外，您需要修改 tailwind.config.js 文件：
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./src/**/*.{html,ts}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig 将扩展默认（或您的自定义）Tailwind CSS 配置文件，添加一些额外的变体和辅助工具以支持 Konsta UI。
现在我们需要设置主 App 组件以便我们设置一些全局参数（如 theme).
需要将整个应用程序包裹在 App 在 src/app/app.component.html:
<app>
<h1>Welcome to Angular and Capacitor!</h1>
<button (click)="share()">Share now!</button>
</app>示例页面
现在我们已经设置好了，
例如，让我们打开 src/app/app.component.html 并将其更改为以下内容:
<app>
<page>
<navbar title="My App" />
<block strong>
<p>
Here is your Angular & Konsta UI app. Let's see what we have here.
</p>
</block>
<block-title>Navigation</block-title>
<list>
<list-item href="/about/" title="About" />
<list-item href="/form/" title="Form" />
</list>
<block strong class="flex space-x-4">
<button>Button 1</button>
<button>Button 2</button>
</block>
</page>
</app>如果安装所有必要组件后，实时重载出现延迟，请尝试重新启动。完成后，您应该看到一个使用 Angular 和 Capacitor 构建的native样式的移动应用程序。
您应该看到以下页面作为结果：
结论
Capacitor 是一个基于现有 Web 项目构建原生应用的出色选择，提供了一个简单的方式来共享 code 并保持一致的 UI。
并且通过添加 Capgo，使得添加实时更新到您的应用变得更加容易，确保您的用户始终可以访问最新的功能和 bug 修复。
如果您想学习如何将 Capgo 添加到您的 Angular 应用中，请查看下一篇文章：
继续从 Building Mobile Apps with Angular 和 Capacitor
中学习 Building Mobile Apps with Angular and Capacitor Building Mobile Apps with Angular 和 __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities 使用 @capgo/capacitor-live-activities 来实现原生能力的 Using @capgo/capacitor-live-activities 中的原生能力， For @capgo/capacitor-live-activities 的实现细节 使用 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的原生能力 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的实现细节，并 使用 @capgo/capacitor-native-navigation 为 @capgo/capacitor-native-navigation 的原生能力
