Skip to main content

你的第一个 Ionic 应用：Angular

¥Your First Ionic App: Angular

Ionic 的很棒之处在于，通过一套代码库，你可以使用熟悉的 Web 工具和语言为任何平台进行构建。跟随我们创建一个工作照片库。这是之前和之后：

¥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 用于版本控制。

    ¥Git for version control.

  • SSH 客户端，例如 PuTTy，用于安全登录 Appflow。

    ¥SSH client, such as PuTTy, for secure login to Appflow.

  • Node.js 用于与 Ionic 生态系统交互。在此下载 LTS 版本。

    ¥Node.js for interacting with the Ionic ecosystem. Download the LTS version here.

  • 代码编辑器 for...写代码！我们是 Visual Studio Code 的粉丝。

    ¥A code editor for... writing code! We are fans of Visual Studio Code.

  • 命令行终端 (CLI):仅供参考 Windows 用户，为了获得最佳的 Ionic 体验，我们建议使用内置命令行 (cmd) 或 Powershell CLI，在管理员模式下运行。对于 Mac/Linux 用户来说，几乎任何终端都可以使用。

    ¥Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For Mac/Linux users, virtually any terminal will work.

安装 Ionic 和 Cordova​

¥Install Ionic and Cordova

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

¥Run the following in the command line:

npm install -g @ionic/cli cordova
注意

-g 选项表示全局安装。全局安装软件包时，可能会出现 EACCES 权限错误。

¥The -g option means install globally. When packages are installed globally, EACCES permission errors can occur.

考虑将 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 应用现在正在 Web 浏览器中运行。你的大部分应用都可以直接在浏览器中构建，从而大大提高了开发速度。

¥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 具有 LiveReload 功能，因此当你进行更改并保存时，应用会立即更新！

¥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 代表顶部导航和工具栏，"选项卡 2" 为标题。我们将应用代码放入 ion-content 中。在本例中，我们将在此处添加一个按钮，用于打开设备的相机并显示相机捕获的图片。但首先，让我们从一些显而易见的事情开始：重命名选项卡二页面：

¥ion-header represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into ion-content. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page:

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

接下来，打开 src/app/tabs/tabs.page.html。将标签更改为“Gallery”，将图标名称更改为“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.

目录