Ionic 基础知识 - 哪些元素用于基本应用程序？答案

【问题标题】：Ionic basics - which elements to use for a basic app?Ionic 基础知识 - 哪些元素用于基本应用程序？
【发布时间】：2014-07-19 21:22:33
【问题描述】：

离子文档非常令人沮丧。首先，我无法通过网站上描述的方法安装它，在我的 Mac 或 PC 上，我收到“您的 Cordova 版本太旧。请重新安装。”错误，尽管按照说明我无法修复它。

Tbh 我不喜欢在命令行上安装东西，如果我可以下载文件（a la jQuery mobile）并继续使用它。所以我得到了最新的 Ionic 测试版，我一直在尝试用它构建一些测试。 Ionic 网站上的待办事项应用程序非常有效（尽管在 Phonegap Build 时项目列表文本是白色的）。

无论如何，我的问题是：我应该使用哪些元素来构建 - CSS 元素或 JavaScript 元素？

我希望我遗漏了一些非常明显的东西，但我在这里使用了文档：http://ionicframework.com/docs/components/ 和这里：http://ionicframework.com/docs/api/

让我们来看看标题。 CSS 页面说你可以像这样构建它们：

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

JavaScript 页面是这样写的：

<ion-header-bar class="bar-light">
  <h1 class="title">bar-light</h1>
</ion-header-bar>

至少在本地，两者都对我有用。那么它是哪一个？ CSS 元素并非全部反映在 Javascript 页面中。我对此感到困惑，我不想使用速度较慢、效率较低或灵活性较低的方法。

【问题讨论】：

【解决方案1】：

本质上，Ionic 既是一个 css 框架，也是一个 javascript 框架。理论上，您可以只使用 css 类并以这种方式构建应用程序。

但是由于 Ionic 是建立在 angular 之上的，它允许我们创建已经应用了这些类的简单元素。让我们看一个例子。

类

<ul class="list>
  <li class="item" ng-repeat="item in items">
     {{item.name}}
  </li>
<ul>

指令

<ion-list>
  <ion-item ng-repeat="item in items">
    {{item.name}}
  </ion-item>
<ion-list>

这两个块都将渲染完全相同的东西。一个类为list 的元素和其中的一些项目为item。

不同之处在于，如果您想为列表添加一些功能（重新排序项目、滑动选项按钮），您需要使用指令。因为我们使用的是指令，所以我们可以使用预定义的功能，而不必让用户连线自己逻辑起来（就像你为 jQuery 插件做的那样）。

现在这个例子已经很简单了，但是你可以在我们的 Sidemenu 组件的上下文中想象它。虽然您可以在技术上使用类构建侧边菜单，但您必须自己连接逻辑，这并不理想。

希望这能更好地解释事情。

【讨论】：

谢谢。实际上，我确实在 CLI 上完成了所有工作，现在我使用 JavaScript/Angular 版本来实现该功能。自从我发布这个问题以来，Ionic 已经走了很长一段路。 :)

【解决方案2】：

您可以从网站 codepen.io/ionic/

获得很好的示例

始终尝试使用最新版本的库（目前为 0.9 beta），最新版本更快更高效。

我使用了 Phonegap 构建，并且只引用了 ionic 库和 css 文件，这很酷。

【讨论】：

【解决方案3】：

您可以使用 JS 或 CSS 方法。我个人更喜欢CSS方法。

您不需要使用 CLI 来安装 Ionic。只需将所有文件 here on Ionic's GitHub 下载到您的项目中，然后在 index.html 中使用引用 here from Ionic's guide。您的应用将能够使用所有 Ionic 和 Angular.js！

【讨论】：