离子：入门问题：1）CSS 2）离子服务 3）Codepen答案

【问题标题】：Ionic: problems getting started: 1) CSS 2) ionic serve 3) Codepen离子：入门问题：1）CSS 2）离子服务 3）Codepen
【发布时间】：2014-08-05 22:55:09
【问题描述】：

问题 1) 离子 css 效果

这是我在移动/模拟器上看到的——Ionic 和它的 css 似乎不适用于 html

https://www.dropbox.com/s/iq1srfaqrr67trv/photo%20%282%29.JPG

我按照这里的教程进行操作（参见相同的代码），但标题未格式化 http://ionicframework.com/docs/guide/testing.html

这里是要点：https://gist.github.com/adaptivedev/4dad183558e740a11a1f

这是 index.html 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="js/app.js"></script>
    <script src="cordova.js"></script>
  </head>
  <body ng-app="todo">
    <ion-side-menus>

      <!-- Center content -->
      <ion-side-menu-content>
        <ion-header-bar class="bar-dark">
          <h1 class="title">Todo</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
      </ion-side-menu-content>

      <!-- Left menu -->
      <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
          <h1 class="title">Projects</h1>
        </ion-header-bar>
      </ion-side-menu>
    </ion-side-menus>
  </body>
</html>

这是 js/app.js 代码：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
//angular.module('starter', ['ionic'])
angular.module('todo', ['ionic']);

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

问题 2) 另外，当我尝试运行时

离子服务

localhost:8100 给Cannot Get /

localhost:8100/index.html 给Cannot Get /index.html

问题 3)

Ionic 有很多 Codepen 示例
http://codepen.io/ionic/public-list/

但如果我尝试从头开始（例如从文档中放置一些代码 sn-ps），Ionic 将无法工作：
http://codepen.io/adaptivedev/pen/gFnyr

我还尝试了“todo”教程代码（包括包含 .css 链接的 head 标签，Codepen 说这不是必需的）
http://codepen.io/adaptivedev/pen/gFnyr

感谢您的帮助！

【问题讨论】：

标签： javascript css angularjs cordova

【解决方案1】：

我不确定如何使用 Ionic 任务运行器/工具来解决您当前的问题，但我可以概述一下我用来运行 Ionic 的方法。

我在使用 Ionic 时也遇到了问题，因此放弃了如 http://ionicframework.com/getting-started/ 中所述的设置。

我所做的是使用http://yeoman.io 脚手架工具设置一个角度应用程序，并通过凉亭bower install ionic 添加离子。

然后我使用 Grunt Serve 并使用移动仿真 (https://developer.chrome.com/devtools/docs/mobile-emulation) 在 Google Chrome 开发工具中查看/调试我的 Ionic 应用程序，以更快地进行测试。

当我需要测试我的应用程序时，我会运行 Grunt 任务，将我的所有应用程序资产复制到 Cordova/PhoneGap 应用程序，然后构建并部署到这些设备/模拟器。

【讨论】：