เริ่มต้นเรียนรู้ ionic framework แบบสบายๆ...
TRANSCRIPT
เริ่มต้น Ionic Framework โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching www.nextflow.in.th/ionic-framework
www.nextflow.in.th/ionic-framework
<ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Header</h1> </ion-header-bar>
<ion-content> Hello </ion-content>
<ion-footer-bar class="bar-assertive"> <h1 class="title">Footer</h1> </ion-footer-bar> </ion-pane>
www.nextflow.in.th/ionic-framework
<ion-content class="padding">
<!-- class="button" --> <button class="button"> button </button>
<button class="button button-block"> block button </button>
<button class="button button-clear"> Clear button </button>
</ion-content>
www.nextflow.in.th/ionic-framework
<ion-content>
<!-- แบบ div a --> <div class=“list”> <a href=“#” class=“item”> </div>
<!-- แบบ ul li --> <ul class=“list”> <li class=“item”></li> </ul>
</ion-content>
www.nextflow.in.th/ionic-framework
Single Page Application
www.nextflow.in.th/ionic-framework
home.html
index.html page2.html
page3.html
www.nextflow.in.th/ionic-framework
ion-nav-bar
ion-nav-view
home.html
user.html
setting.html
www.nextflow.in.th/ionic-framework
HTML
Module
.config( $stateProvider, $urlRouterProvider ){
}
www.nextflow.in.th/ionic-framework
stateProvider
• state name
• url
• templateUrl
• Controller
www.nextflow.in.th/ionic-framework
.config(function($stateProvider, $urlRouterProvider) {
… .state('home', { url: "/home", templateUrl: "views/home.html", controller: "HomeController" })
// default url $urlRouterProvider.otherwise("/home");
})
www.nextflow.in.th/ionic-framework
<ion-view>
<a href=“#/user/{{username}}/{{password}}”>
</ion-view>
www.nextflow.in.th/ionic-framework
.config(function($stateProvider, $urlRouterProvider) {
… .state('user', { url: “/user/:param1/:param2”, templateUrl: “views/user.html", controller: "UserController" })
// default url $urlRouterProvider.otherwise("/home");
})
www.nextflow.in.th/ionic-framework
.controller( … , [‘$stateParams’,function($stateParams){
var param = $stateParams.param1;
}])
www.nextflow.in.th/angularjs
.factory( function() { return {
property : [1,2,3], method : function() {
} }
www.nextflow.in.th/ionic-framework
ngcordova.com
