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 )