.
ionicv1 tutorial
102C Fork Ionic Blank Template On CodePen
1. Ionic Blank Template
Ionic Blank Template is the easiest template to start with. Once you understand how controllers, ng’s, $scope and the rest work, you can move to Side Menu and Tab Template.
2. Fork CodePen codes
In this tutorial, we are going to fork the CodePen codes at https://codepen.io/notarazicom/pen/brrxMp . Click on this URL and then find the Fork button on the page.
3. Fundamental Sections
The codes consist of 100++ lines. At first, you may think that there are too much codes for beginners to learn. Fortunately you don’t have to understand each and every line of them in order to develop a simple app. You just need to know the fundamental sections.
The following is the fundamental section that you need to focus first.
4. Simple VIEW codes.
Start with a simple code editing as shown below.
<body ng-app="app" animation="slide-left-right-ios7" >
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
<ion-content padding="true" class="has-header">
<center><h1><i class="icon ion-person"></i></h1></center>
<form id="form1" class="list"><!-- optional -->
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" placeholder="" ng-model="person.name">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="" ng-model="person.email">
</label>
<button class="button button-block button-balanced" ng-click="saveData()">
Save
</button>
<button class="button button-block button-assertive" ng-click="resetData()">
Reset
</button>
</form>
<p>You have entered:<mark> {{person}}</mark></p>
</ion-content>
</ion-view>
</script>
<script>
/*create js object app, bind to html app, use ionic framework*/
var app=angular.module('app',['ionic']);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/
/*define app.controller methods*/
app.controller('homeCtrl',['$scope',function($scope){
}]);
|
Outcome:
5. Ionic VIEW codes.
The example codes above demonstrate the following:
Code sample
|
explanation
|
<i class="icon ion-person"></i>
|
Display ionic icon ie person
|
<input type="text" placeholder="" ng-model="person.name">
|
Bind a model “person” having a property “name” to the containing element ie input.
|
<input type="email" placeholder="" ng-model="person.email">
|
Bind a model “person” having a property “email” to the containing element ie input.
The type=email will check for email format validity.
|
<button class="button button-block button-balanced" ng-click="saveData()">
|
Bind a function call for saveData() to the containing element ie button.
|
<p>You have entered:<mark> {{person}}</mark></p>
|
Include an expression in HTML codes enclosed in double braces.
|
6. Ionic CONTROLLER Codes.
Declare person as an empty object.
Declare saveData() for later use.
Declare resetData() to reset person.
app.controller('homeCtrl',['$scope',function($scope){
$scope.person={};
$scope.saveData=function(){
// to be added later
}
$scope.resetData=function(){
$scope.person={};
}
}]);
|
7. Working with Local Storage.
Add codes to save data to local storage.
app.controller('homeCtrl',['$scope',function($scope){
$scope.person={};
$scope.saveData=function(){
window.localStorage.setItem(
"appdata",
JSON.stringify($scope.person)
);
}
$scope.resetData=function(){
$scope.person={};
}
}]);
|
Call saveData() from within resetData() to save empty person to local storage.
app.controller('homeCtrl',['$scope',function($scope){
$scope.person={};
$scope.saveData=function(){
window.localStorage.setItem(
"appdata",
JSON.stringify($scope.person)
);
}
$scope.resetData=function(){
$scope.person={};
$scope.saveData();
}
}]);
|
Add initData() to preload person with local storage data.
When the app runs for first time or refreshes, controller will get data from local storage if they exist.
app.controller('homeCtrl',['$scope',function($scope){
$scope.person={};
/*init data*/
$scope.initData=function(){
/*if storage exists*/
if (typeof(Storage) !== "undefined") {
/*if appdata exists*/
if (window.localStorage["appdata"] &&
window.localStorage["appdata"]!=null ){
/*parse string as JSON data*/
$scope.person =JSON.parse(
window.localStorage.getItem("appdata")
);
}/*if appdata exists*/
}/*if storage exists*/
}/*init data*/
/*call init data*/
$scope.initData();
$scope.saveData=function(){
window.localStorage.setItem(
"appdata",
JSON.stringify($scope.person)
);
}
$scope.resetData=function(){
$scope.person={};
$scope.saveData();
}
}]);
|
8. Complete Codes
Fork GitHub project (https://github.com/notarazicom/ionic-101-blank ),
copy the following codes,
paste into index.html in the GitHub project,
Import your forked GitHub project into Build.PhoneGap.com, and
compile the app.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<!--local lib-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<!--cloud lib-->
<script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above-->
<!--<link href="css/ionic.app.css" rel="stylesheet">-->
<!--local lib-->
<!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">-->
<!--cloud lib-->
<link href="http://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet">
<!--ionic custom styling-->
<style>
.platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px}
</style>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
<ion-content padding="true" class="has-header">
<center><h1><i class="icon ion-person"></i></h1></center>
<form id="form1" class="list"><!-- optional -->
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" placeholder="" ng-model="person.name">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="" ng-model="person.email">
</label>
<button class="button button-block button-balanced" ng-click="saveData()">
Save
</button>
<button class="button button-block button-assertive" ng-click="resetData()">
Reset
</button>
</form>
<p>You have entered:<mark> {{person}}</mark></p>
</ion-content>
</ion-view>
</script>
<script>
/*create js object app, bind to html app, use ionic framework*/
var app=angular.module('app',['ionic']);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/
/*define app.controller methods*/
app.controller('homeCtrl',['$scope',function($scope){
$scope.person={};
/*init data*/
$scope.initData=function(){
/*if storage exists*/
if (typeof(Storage) !== "undefined") {
/*if appdata exists*/
if (window.localStorage["appdata"] &&
window.localStorage["appdata"]!=null ){
/*parse string as JSON data*/
$scope.person =JSON.parse(
window.localStorage.getItem("appdata")
);
}/*if appdata exists*/
}/*if storage exists*/
}/*init data*/
/*call init data*/
$scope.initData();
$scope.saveData=function(){
window.localStorage.setItem(
"appdata",
JSON.stringify($scope.person)
);
}
$scope.resetData=function(){
$scope.person={};
$scope.saveData();
}
}]);
/*define app.config method*/
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{url:'/page1',templateUrl:'home.html',controller:'homeCtrl'});
$urlRouterProvider.otherwise('/page1')
});
/************************/
/*define SYSTEM SETTINGS*/
/************************/
app.config(function($ionicConfigProvider, $sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
app.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
/*
This directive is used to disable the "drag to open" functionality of the Side-Menu
when you are dragging a Slider component.
*/
app.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
function stopDrag(){
$ionicSideMenuDelegate.canDragContent(false);
}
function allowDrag(){
$ionicSideMenuDelegate.canDragContent(true);
}
$rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
$element.on('touchstart', stopDrag);
$element.on('touchend', allowDrag);
$element.on('mousedown', stopDrag);
$element.on('mouseup', allowDrag);
}]
};
}]);
/*
This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
app.directive('hrefInappbrowser', function() {
return {
restrict: 'A',
replace: false,
transclude: false,
link: function(scope, element, attrs) {
var href = attrs['hrefInappbrowser'];
attrs.$observe('hrefInappbrowser', function(val){
href = val;
});
element.bind('click', function (event) {
window.open(href, '_system', 'location=yes');
event.preventDefault();
event.stopPropagation();
});
}
};
});
</script>
</body>
</html>
|
.
No comments:
Post a Comment