.
Coding Ionic On Blogspot Using Embedded Plunker
Coding Ionic On Blogspot Using Embedded Plunker
Coding Ionic Blogspot Embedded Plunker
This tutorial is based on the starting guide at http://ionicframework.com/docs/guide/starting.html
The first time you see this post, you will notice that the above code editor contains the startup codes as shown below.
1) Add Ionic Library
Insert the link to Ionic libraries.
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank</title>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
</head>
<body>
</body> </html> |
.
2) Define Modules
2.1) Declare ng-app directive (tell the container that the containing code is an angular application)
2.2) Insert a link to the controller codes (tell the container where to find the instructions)
.
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>IonicBlank</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script> <script src="js/routes.js"></script> <script src="js/directives.js"></script> <script src="js/services.js"></script> </head> <body ng-app="app"> </body> </html> |
.
2.3) Create the controller file.
Create directory, i.e. js
Create file, i.e app.js
.
.
.
.
.
2.4) Add the codes to the file.
.
/*
Ionic Blank App
angular.module is a global place for creating, registering and retrieving Angular modules
'app' is the name of this angular module example (also set in a <html> attribute in index.html)
the 2nd parameter is an array of 'requires'
'app.services' is found in services.js
'app.controllers' is found in controllers.js
*/
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services',])
|
.
3) Define Controllers
3.1.) Create js/ controllers.js
3.2) Add the following codes.
angular.module('app.controllers', [])
.controller('pageCtrl', ['$scope', '$stateParams',
/*
The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
You can include any angular dependencies as parameters for this function
TIP: Access Route Parameters for your page via $stateParams.parameterName
*/
function ($scope, $stateParams) {
}])
|
4) Define Directives
4.1) Create js/directives.js
4.2) Add the following codes
angular.module('app.directives', [])
.directive('blankDirective', [function(){
}]);
|
5) Define Routes
5.1) Create js/routes.js
5.2) Add the following codes.
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
/*
Ionic uses AngularUI Router which uses the concept of states
Learn more here: https://github.com/angular-ui/ui-router
Set up the various states which the app can be in.
Each state's controller can be found in controllers.js
*/
$stateProvider
.state('page', {
url: '/page1',
templateUrl: 'templates/page.html',
controller: 'pageCtrl'
})
$urlRouterProvider.otherwise('/page1')
});
|
6) Define Services
6.1) Create js/services.js
6.2) Add the following codes.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);
|
7) Define Page Templates
7.1) Create templates/page.html. Add the following codes.
<ion-view title="Page" id="page1">
<ion-content padding="true" class="has-header"></ion-content>
</ion-view>
|
8) Add Navigation View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank</title>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
</head>
<body ng-app="app">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
|
No comments:
Post a Comment