Sunday, January 8, 2017

101 Ionic Todo Projects

101 ionic codepen

This tutorial demonstrate the steps to create basic ionic apps on codepen based on the original getting started tutorial published at http://ionicframework.com/docs/guide/starting.html

0) Preparation

Goto www.codepen.io and create a new codepen.

1) Add HTML Basic Structure

Refer : http://ionicframework.com/docs/guide/starting.html

html

<html>

<head>

<!-- Internal Library

-->

</head>

<ion-side-menus>

<ion-side-menu-content>

<ion-header-bar class="bar-dark">

</ion-header-bar>

<ion-content>

</ion-content>

</ion-side-menu-content>

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

Name: 101CodePenIonic01 (http://codepen.io/notarazi/pen/wgKwpM )

2) Add Ionic Script

html

<html>

<head>

<!-- Internal Library

-->

</head>

<ion-side-menus>

<ion-side-menu-content>

<ion-header-bar class="bar-dark">

</ion-header-bar>

<ion-content>

</ion-content>

</ion-side-menu-content>

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

angular.module('app', ['ionic'])

Name: 101CodePenIonic02 (http://codepen.io/notarazi/pen/ygYBxz )

3) Build Basic UI and Data

html

<html>

<head>

<!-- Internal Library

-->

</head>

<ion-side-menus>

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

<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>

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

angular.module('app', ['ionic'])

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

Name: 101CodePenIonic03 (http://codepen.io/notarazi/pen/MJagLr )

4) Adding Modal

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="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>


<script src="cordova.js"></script>
</head>
<body ng-app="app" ng-controller="TodoCtrl">
<ion-side-menus>


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

<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content>

<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>


<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>

<script id="new-task.html" type="text/ng-template">

<div class="modal">


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


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

</script>

</ion-side-menus>
</body>
</html>

angular.module('app', ['ionic'])

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

Name: CodePenIonic04 (http://codepen.io/notarazi/pen/KaddVZ )