102C Fork Ionic Blank Template On CodePen and GitHub
.
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.
link download
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.