Ionic –用于构建看起来本机HTML5移动应用程序的高端框架

Gone are the days when developing an app took multiple days and even weeks. Today, the world of mobile app development is filled with stunning open source front-end SDKs(Software Development Kits) and frameworks which have made it possible for the developer to build an awesome app within a few minutes. Ionic is one such HTML5 App Development Framework that allows you to create high-performing and extensively intuitive native-like mobile apps. If you’re new to Ionic and want to dig deeper into this most used and recommended framework, then get on with reading the paragraphs that are listed out in this post. Let’s get started!

开发应用程序要花费几天甚至几周的日子已经一去不复返了。 如今，移动应用程序开发领域充满了令人惊叹的开源前端SDK(软件开发工具包)和框架，使开发人员能够在几分钟内构建出色的应用程序。 Ionic就是这样一种HTML5 App Development Framework，它使您可以创建高性能且广泛直观的类似于本机的移动应用程序。 如果您是Ionic的新手，并且想深入了解这个最常用和推荐的框架，请继续阅读这篇文章中列出的段落。 让我们开始吧！

离子框架-概述 (The Ionic Framework – An Overview)

As a powerful front-end framework built on Apache Cordova/PhoneGap, Ionic allows you to create a mobile app using the web technologies that you’re familiar with. Additionally, with Ionic, you can even opt for deploying your mobile apps using AngularJS. Created by the team which has already delivered successful projects like Codiqa and Jetstrap, Ionic is utmost capable of handling the entire look and feel along with the UI interactions that are required for your mobile app. Quite similar to “Bootstrap for Native”, Ionic is equipped with impressive support for a wide range of slick animations and native mobile components.

作为基于Apache Cordova / PhoneGap构建的功能强大的前端框架，Ionic允许您使用熟悉的Web技术来创建移动应用程序。 此外，借助Ionic，您甚至可以选择使用AngularJS部署移动应用程序。 由已交付Codiqa和Jetstrap等成功项目的团队创建，Ionic具有最大的能力来处理整个外观以及移动应用程序所需的UI交互。 Ionic与“ Bootstrap for Native”十分相似，它为各种精美的动画和本地移动组件提供了令人印象深刻的支持。

Serving both as a JavaScript UI library and a CSS framework, Ionic is best suited for developers who’re already familiar with AngularJS. The reason being that Ionic utilized a suite of AngularJS extensions through directives which allow you to equip your HTML5 apps with gestures, user interactions and exciting animations. Following a View Controller pattern, Ionic is pre-equipped with Controllers that enable you to handle UI interaction along with the view.

作为一个JavaScript UI库和一个CSS框架，Ionic最适合已经熟悉AngularJS的开发人员。 原因是Ionic通过指令利用了AngularJS扩展套件，这些指令使您可以为HTML5应用程序配备手势，用户交互和令人兴奋的动画。 遵循视图控制器模式，Ionic预先配备了控制器，使您能够与视图一起处理UI交互。

现场演示

离子框架–它包括什么？ (Ionic Framework – What all does it include?)

Here’s a list of some of the key things that the Ionic Framework includes:

以下是Ionic Framework包括的一些关键内容的列表：

• Icon Pack – The Ionic framework comes with a good collection of icons that can be easily used within the mobile apps

  图标包 – Ionic框架附带了很多图标，可以在移动应用程序中轻松使用

• Automatic Transitions based on History – Ionic can automatically transition views towards the slide left and right on the basis of history

  基于历史记录的自动过渡– Ionic可以根据历史记录自动向左和向右滑动视图

• UI Interaction Handling – You can use AngularJS expressions for handling the visibility and non-visibility of tab, when it is being clicked

  UI交互处理 –单击选项卡时，可以使用AngularJS表达式来处理选项卡的可见性和不可见性

• Gestures – Ionic comes with Hammer.js that offers an incredible gesture support for swipe, tap, drag, drop etc.

  手势 – Hammer.js带有Ionic，它为滑动，点击，拖动，放下等提供了令人难以置信的手势支持。

• A set of UI components – Ionic is loaded with brilliant UI components including modal, radio, tabs, navigation, action sheet, cards, headers, toggle, range, slide boxes etc.

  一组UI组件 – Ionic装有出色的UI组件，包括模式，单选，选项卡，导航，操作表，卡，标题，切换，范围，幻灯片框等。

• View Stacks/State Management – Ionic comes with built-in state management for different views. This feature allows you to keep a good track of the navigation history along with the flexibility to push multiple templates into a single app page.

  视图堆栈/状态管理 – Ionic随附了用于不同视图的内置状态管理。 通过此功能，您可以很好地跟踪导航历史记录，并且可以灵活地将多个模板推送到单个应用程序页面中。

• Customizable Theme – Ionic base theme is built with Sass. Hence, you can conveniently customize it to create a custom theme

  可自定义的主题 – Ionic基本主题是使用Sass构建的。 因此，您可以方便地对其进行自定义以创建自定义主题

• Pull to Refresh – Ionic allows you to add the ‘pull to refresh’ capability to the scroll area within the application

  拉动刷新 -Ionic允许您将“拉动刷新”功能添加到应用程序内的滚动区域

了解Ionic Framework的优势 (Knowing Ionic Framework’s Advantages)

Here is a list of some noteworthy advantages of the Ionic Framework:

以下列出了Ionic Framework的一些值得注意的优点：

• Flexibility to package apps into different frameworks

  将应用程序打包到不同框架中的灵活性

Once you’re done with developing a hybrid app using Ionic, you can go ahead with packaging the app into a variety of frameworks, thereby saving you from the headache that’s associated with re-writing the code on a repetitive basis

一旦使用Ionic开发了混合应用程序，就可以继续将应用程序打包到各种框架中，从而免除了与重复编写代码相关的麻烦

• Default app-setups

  默认的应用设置

Unlike a suite of HTML5 app development frameworks, Ionic comes with several pre-gererated app setups that can be utilized for getting started with the creation of an app layout instantly

与一套HTML5应用程序开发框架不同，Ionic附带了多个预开发的应用程序设置，可用于立即开始创建应用程序布局。

• A developer-friendly documentation

  开发人员友好的文档

In contrast to the lengthy and often boring documentation available with other HTML5 App development frameworks, Ionic comes with a developer-friendly documentation that isn’t boring and helps you to in using Ionic more easily

与其他HTML5 App开发框架所提供的冗长且经常令人厌烦的文档相反，Ionic附带了开发人员友好的文档，该文档不乏味，可帮助您更轻松地使用Ionic

• Ionic comes with a small learning curve

  离子具有小的学习曲线

Even a plain understanding of AngularJS can enable you to initiate the process of developing eye-catchy mobile apps using the Ionic framework. You need not get into the complexities of understanding any difficult programming language

即使是对AngularJS的简单理解，也可以使您启动使用Ionic框架开发引人注目的移动应用程序的过程。 您无需陷入理解任何困难的编程语言的复杂性

• Easy to integrate with popular back-end technologies

  易于与流行的后端技术集成

One of the greatest advantages of the Ionic framework is that it can be easily hooked up to the most common and well-known back-end technologies like Ruby or Node.

Ionic框架的最大优势之一是可以轻松地与最常见和最著名的后端技术(如Ruby或Node)挂钩。

离子框架–特别强调标记和演示 (Ionic Framework – Special emphasis on Markup and Presentation)

People behind Ionic are confident enough that the innovative design patterns incorporated within the framework are beyond the boundaries of applauds. Plus, there is an additional flexibility of adding a custom CSS in addition to overriding the default properties. Although Ionic’s default design is quite similar to that of iOS, it’s quite easy to extend the CSS to get the look and feel you desire to have for your mobile app. With its core written using Sass, Ionic comes with tons of mixins and fully-customized variables that make it a powerful and robust HTML5 mobile app development framework.

Ionic背后的人们有足够的信心，将框架内包含的创新设计模式超越了鼓掌。 另外，除了覆盖默认属性外，还具有添加自定义CSS的额外灵活性。 尽管Ionic的默认设计与iOS的默认设计非常相似，但是扩展CSS来获得您希望为移动应用拥有的外观和感觉非常容易。 Ionic的核心使用Sass编写，具有大量的mixins和完全自定义的变量，从而使其成为功能强大且强大HTML5移动应用程序开发框架。

最后的想法 (Final Thoughts)

When it comes to creating native apps using HTML5, nothing can beat the Ionic Framework. Hope by now, you’d have gathered an in-depth understanding of Ionic and its growing significance among the HTML5 app development community.

当使用HTML5创建本机应用程序时，没有什么比Ionic Framework更胜一筹了。 希望到现在为止，您已经对Ionic及其在HTML5应用程序开发社区中的日益重要的意义有了深入的了解。

例： (Example:)

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic- A high-end framework for building native-looking HTML5 mobile apps</title>
    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionicApp', ['ionic'])
    .controller('MyCtrl', function($scope) {
      $scope.items = [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 }
      ];
    });
    </script>
  </head>
  <body ng-controller="MyCtrl">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic List Items</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="item in items" item="item">
          List Item {{ item.id }}
        </ion-item>
      </ion-list>
    </ion-content>
  </body>
</html>

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic- A high-end framework for building native-looking HTML5 mobile apps</title>
    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionicApp', ['ionic'])
    .controller('MyCtrl', function($scope) {
      $scope.items = [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 }
      ];
    });
    </script>
  </head>
  <body ng-controller="MyCtrl">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic List Items</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="item in items" item="item">
          List Item {{ item.id }}
        </ion-item>
      </ion-list>
    </ion-content>
  </body>
</html>

输出： (Output:)

翻译自: https://www.script-tutorials.com/ionic-framework/