Question

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

如果我能下载文件（la jQuery mobile）并继续使用它，我不是在命令行上安装东西的忠实粉丝。所以我得到了最新的Ionic测试版，我一直在努力用它来构建一些测试。 Ionic网站上的todo应用程序几乎可以工作（虽然当您使用Phonegap构建它时，项目列表文本是白色的。）

无论如何，我的问题是：我应该使用哪些元素来构建 - 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>

至少在当地都能为我工作。那是哪个呢？在Javascript页面中，CSS元素不是 all 镜像。我对此感到困惑，我不想使用速度较慢，效率较低或灵活性较低的方法。

Answer 1

基本上，Ionic既是css框架又是javascript框架。理论上你可以只使用css类并以这种方式构建应用程序。

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

类

<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组件的上下文中想象这一点。虽然你可以在技术上使用类来构建sidemenu，但你必须自己连接逻辑，这并不理想。

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

Answer 2

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

中找到相当不错的示例

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

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

Answer 3

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

您无需使用CLI即可安装Ionic。只需将所有文件here on Ionic's GitHub下载到您的项目中，然后使用index.html中的参考here from Ionic's guide即可。您的应用程序将能够使用所有Ionic和Angular.js！