Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Ionic Instructions

View gist:037944b82a5ad11d7067

This is updated and slighted modifed from: http://ionicframework.com/docs/guide/

== Install Dependencies == sudo npm install -g cordova gulp ionic

== Create Project ==

ionic start todo blank
cd todo

== Add Desired Platforms ==

ionic platform add ios
ionic platform add android

== Edit www/index.html == 1. Add Title

<title>Todo</title>
  1. Replace body code with:
<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>

== Edit www/js/app.js ==

  1. Change angular module name: angular.module('todo', ['ionic'])

== Preview In Browser w/ Live Reload ==

  1. Open another terminal and navigate to root of todo project
  2. run the ionic live reload server ionic serve

Bonus : Chrome allows "Emulation" in Dev Tools to emulate various devices. Very helpful

== Can also run on device or in emulator ==

  1. To run on device
ionic run android
  1. To emulate
ionic emulate ios

== Build it out ===

  1. www/index.html -- Replace "Center cotent" with
<!-- Center content -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
  </ion-header-bar>
  <ion-content>
    <!-- our list and list items -->
    <ion-list>
      <ion-item ng-repeat="task in tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>
  1. Update with:
<body ng-app="todo" ng-controller="TodoCtrl">
  1. Remove the following StatusBar code from www/js/app.js if(window.StatusBar) { StatusBar.styleDefault(); }

  2. Add TodoCtrl controller to www/js/app.js

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'Collect coins' },
    { title: 'Eat mushrooms' },
    { title: 'Get high enough to grab the flag' },
    { title: 'Find the Princess' }
  ];
})
  1. Browser should start looking like an app

== Add Create Task Ability ==

  1. www/index.html -- After html <h1 class="title">Todo</h1> add the button
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
  <i class="icon ion-compose"></i>
</button>
  1. Create www/views/new-task.html note views directory needs to be created)
<div class="modal">
  <!-- Modal header bar -->
  <ion-header-bar class="bar-secondary">
    <h1 class="title">New Task</h1>
    <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
  </ion-header-bar>

  <!-- Modal content area -->
  <ion-content>

    <form ng-submit="createTask(task)">
      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="What do you need to do?" ng-model="task.title">
        </label>
      </div>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Create Task</button>
      </div>
    </form>

  </ion-content>
</div>
  1. Update the controller in www/js/app.js
.controller('TodoCtrl', function($scope, $ionicModal) {
  // No need for testing data anymore
  $scope.tasks = [];

  // Create and load the Modal
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

  // Called when the form is submitted
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

  // Open our new task modal
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // Close the new task modal
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});
  1. You should now be able to create tasks

== Add Project Support ==

  1. Edit www/index.html with new center content
<!-- Center content -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- New Task button-->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="task in activeProject.tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>
  1. Also update the left menu
<!-- Left menu -->
<ion-side-menu side="left">
  <ion-header-bar class="bar-dark">
    <h1 class="title">Projects</h1>
    <button class="button button-icon ion-plus" ng-click="newProject()">
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
        {{project.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu>
  1. Bunch of code into www/js/app.js
.factory('Projects', function() {
  return {
    all: function() {
      var projectString = window.localStorage['projects'];
      if(projectString) {
        return angular.fromJson(projectString);
      }
      return [];
    },
    save: function(projects) {
      window.localStorage['projects'] = angular.toJson(projects);
    },
    newProject: function(projectTitle) {
      // Add a new project
      return {
        title: projectTitle,
        tasks: []
      };
    },
    getLastActiveIndex: function() {
      return parseInt(window.localStorage['lastActiveProject']) || 0;
    },
    setLastActiveIndex: function(index) {
      window.localStorage['lastActiveProject'] = index;
    }
  }
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

  // A utility function for creating a new project
  // with the given projectTitle
  var createProject = function(projectTitle) {
    var newProject = Projects.newProject(projectTitle);
    $scope.projects.push(newProject);
    Projects.save($scope.projects);
    $scope.selectProject(newProject, $scope.projects.length-1);
  }


  // Load or initialize projects
  $scope.projects = Projects.all();

  // Grab the last active, or the first project
  $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

  // Called to create a new project
  $scope.newProject = function() {
    var projectTitle = prompt('Project name');
    if(projectTitle) {
      createProject(projectTitle);
    }
  };

  // Called to select the given project
  $scope.selectProject = function(project, index) {
    $scope.activeProject = project;
    Projects.setLastActiveIndex(index);
    $ionicSideMenuDelegate.toggleLeft(false);
  };

  // Create our modal
  $ionicModal.fromTemplateUrl('views/new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope
  });

  $scope.createTask = function(task) {
    if(!$scope.activeProject || !task) {
      return;
    }
    $scope.activeProject.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();

    // Inefficient, but save all the projects
    Projects.save($scope.projects);

    task.title = "";
  };

  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  }

  $scope.toggleProjects = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };


  // Try to create the first project, make sure to defer
  // this by using $timeout so everything is initialized
  // properly
  $timeout(function() {
    if($scope.projects.length == 0) {
      while(true) {
        var projectTitle = prompt('Your first project title:');
        if(projectTitle) {
          createProject(projectTitle);
          break;
        }
      }
    }
  });

});
  1. Should now have a pretty close to fully working todo app
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.