Skip to main content

你的第一个 Ionic 应用：Angular

🌐 Your First Ionic App: Angular

Ionic 的一个很棒之处在于，使用一套代码库，你就可以使用熟悉的网页工具和语言为任何平台构建应用。请跟随我们一起创建一个可用的照片图库。以下是前后对比：

🌐 The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:

An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.

入门很容易。请注意，本指南中引用的所有代码都可以在 GitHub 上找到。

🌐 It’s easy to get started. Note that all code referenced in this guide can be found on GitHub.

所需工具​

🌐 Required Tools

立即下载/安装这些以确保最佳的 Ionic 开发体验：

🌐 Download/install these right away to ensure an optimal Ionic development experience:

  • Git 用于版本控制。
  • SSH 客户端，例如 PuTTy，用于安全登录 Appflow。
  • Node.js 用于与 Ionic 生态系统交互。在此下载 LTS 版本。
  • 一个用于... 编写代码的代码编辑器 ！我们是 Visual Studio Code 的粉丝。
  • 命令行终端（CLI）：供参考 Windows 用户，为了获得最佳的 Ionic 体验，我们推荐使用内置命令行（cmd）或以管理员模式运行的 Powershell CLI。对于 Mac/Linux 用户，几乎任何终端都可以使用。

安装 Ionic 和 Cordova​

🌐 Install Ionic and Cordova

在命令行中运行以下命令：

🌐 Run the following in the command line:

npm install -g @ionic/cli cordova
note

-g 选项意味着 全局安装。当软件包被全局安装时，可能会发生 EACCES 权限错误。

考虑设置 npm 以在不使用提升权限的情况下全局运行。更多信息请参阅 解决权限错误。

🌐 Consider setting up npm to operate globally without elevated permissions. See Resolving Permission Errors for more information. :::

创建一个应用​

🌐 Create an App

接下来，使用我们的“选项卡”应用模板创建一个 Ionic Angular 应用：

🌐 Next, create an Ionic Angular app using our “Tabs” app template:

ionic start photo-gallery tabs

这个入门项目包含三个预构建页面和 Ionic 开发的最佳实践。有了已经准备好的常用构建模块，我们可以轻松添加更多功能！

🌐 This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

接下来，切换到应用文件夹：

🌐 Next, change into the app folder:

cd photo-gallery

就是这样！现在到了有趣的部分——让我们看看应用的实际效果。

🌐 That’s it! Now for the fun part - let’s see the app in action.

运行应用​

🌐 Run the App

接下来运行此命令：

🌐 Run this command next:

ionic serve

瞧！你的 Ionic 应用现在可以在网页浏览器中运行了。你的大部分应用都可以直接在浏览器中构建，大大提高了开发速度。

🌐 And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed.

🌐 Photo Gallery!!!

有三个选项卡。点击 Tab2 选项卡。它是一个空白画布，也就是添加摄像头功能的完美位置。让我们开始将此页面转换为照片图库。Ionic 提供实时重载功能，因此当你进行更改并保存时，应用会立即更新！

🌐 There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!

Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.

在你喜欢的代码编辑器中打开相册应用文件夹，然后导航到 /src/app/tab2/tab2.page.html。我们看到：

🌐 Open the photo-gallery app folder in your favorite code editor of choice, then navigate to /src/app/tab2/tab2.page.html. We see:

<ion-header>
  <ion-toolbar>
    <ion-title>Tab Two</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding"></ion-content>

ion-header 代表顶部导航栏和工具栏，标题为“Tab 2”。我们将应用代码放入 ion-content。在这种情况下，我们将在这里添加一个按钮，用于打开设备的相机并显示相机拍摄的图片。但首先，让我们从一些显而易见的事情开始：重命名 Tab Two 页面：

<ion-title>Photo Gallery</ion-title>

接下来，打开 src/app/tabs/tabs.page.html。将标签改为“图库”，图标名称改为“images”:

🌐 Next, open src/app/tabs/tabs.page.html. Change the label to “Gallery” and the icon name to “images”:

<ion-tab-button tab="tab2">
  <ion-icon name="images"></ion-icon>
  <ion-label>Gallery</ion-label>
</ion-tab-button>

这只是我们可以用 Ionic 做的所有很酷的事情的开始。接下来，我们将把应用部署到你的 iOS 或 Android 设备上，然后继续构建照片图库。

🌐 That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery.

目录