CODEWITHSUNDEEP
javascriptcssangularjscordova
mylord
mylord

Reputation: 699

Ionic: problems getting started: 1) CSS 2) ionic serve 3) Codepen

Problem 1) Ionic css effects

This is what I see on mobile/emulators -- Ionic and it's css doesn't seem to be working to on the html

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

I followed the tutorial here (see same code), but the header isn't formatted http://ionicframework.com/docs/guide/testing.html

Here's the gist: https://gist.github.com/adaptivedev/4dad183558e740a11a1f

Here's the index.html code:

<!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>

Here's the js/app.js code:

// 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();
    }
  });
})

Problem 2) Also, when I try to run

ionic serve

localhost:8100 gives Cannot Get /

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

Problem 3)

There are many Codepen examples for Ionic
http://codepen.io/ionic/public-list/

But if I try to start one from scratch (as in put up some code snippets from docs), Ionic doesn't work:
http://codepen.io/adaptivedev/pen/gFnyr

I also tried with the "todo" tutorial code (including the head tag including .css link, which Codepen says isn't necessary)
http://codepen.io/adaptivedev/pen/gFnyr

Thanks for any help!

Upvotes: 0

Views: 3100

Answers (1)

Johnathan Hair
Johnathan Hair

Reputation: 151

I'm not sure how to solve your current problem with using the Ionic task runners / tools, but I can outline what I do use to have Ionic running.

I had issues using Ionic also and abandoned setting it up as described on http://ionicframework.com/getting-started/.

What I did instead was setup an angular app with http://yeoman.io scaffolding tool and added ionic via bower bower install ionic.

I then use Grunt Serve and view/debug my Ionic app in Google Chrome Dev Tools using mobile emulation (https://developer.chrome.com/devtools/docs/mobile-emulation) to test more quickly.

When I need to test my app I then run a Grunt task that copies all of my application assets to a Cordova/PhoneGap application and then build and deploy to those devices/emulators.

Upvotes: 1

Related Questions