เริ่มต้น Angular JS แบบสบายๆ
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching www.nextflow.in.th/angularjs
www.nextflow.in.th/ionic-framework
www.nextflow.in.th/angularjs
“พล” Teerasej JiraphatchandejTechnology Coach Nextflow.in.th
Email: [email protected] facebook.com/nextflow www.nextflow.in.th
www.nextflow.in.th/angularjs
ทำไมต้อง Angular JS?
www.nextflow.in.th/angularjs
HTML
ข้อมูล …
Database Web service
Object Array
www.nextflow.in.th/angularjs
JQuery หรือ
Angular JS
www.nextflow.in.th/angularjs
$(selector).method()<div id=“main”>
<input class=“b”/>
</div>
www.nextflow.in.th/angularjs
data-object {{data-object}}
www.nextflow.in.th/angularjs
www.nextflow.in.th/angularjs
HTML
Module
Controller$scope.property
$scope.method()
www.nextflow.in.th/angularjs
www.nextflow.in.th/angularjs
www.nextflow.in.th/ionic-framework
module
www.nextflow.in.th/angularjs
Module
www.nextflow.in.th/ionic-framework
angular.module(“myApp”, [] )
www.nextflow.in.th/ionic-framework
js/app.js
www.nextflow.in.th/angularjs
Module
www.nextflow.in.th/angularjs
www.nextflow.in.th/ionic-framework
directive
www.nextflow.in.th/angularjs
<script
src=“js/app.js”>
HTML
app.js .module(“myApp”)
<body ng-app=“myApp”>
www.nextflow.in.th/angularjs
<body ng-app=“myApp”>
myApp = angular.module(“myApp”, [] );
www.nextflow.in.th/ionic-framework
myApp = angular.module(“myApp”, [] )
www.nextflow.in.th/ionic-framework
Controller
www.nextflow.in.th/ionic-framework
.controller(“…”, [‘$scope’, function($scope){
// magic!
} ] );
www.nextflow.in.th/angularjs
.controller($scope) {
$scope.name = “Pon” }
www.nextflow.in.th/ionic-framework
$scope
www.nextflow.in.th/angularjs
.controller( function(){ $scope.property = [];
}]);
www.nextflow.in.th/ionic-framework
Expression
www.nextflow.in.th/angularjs
Controller “MyCtrl”
HTML
<… ng-controller=“MyCtrl”>
My name is {{ username }}
www.nextflow.in.th/angularjs
<h1> Hello, {{ username }}</h1>
.controller( function(){ $scope.username = “Pon”;
}]);
www.nextflow.in.th/ionic-framework
directive
www.nextflow.in.th/ionic-framework
ng-click
www.nextflow.in.th/angularjs
<button ng-click=“doSomething(param)”>…</button>
.controller( function(){ $scope.doSomething = function(param){ };
}]);
www.nextflow.in.th/angularjs
<button ng-click=“sayHi()”>
HTML
Controller $scope.sayHi()
www.nextflow.in.th/angularjs
WorkshopC1: Vat 7 Controller
www.nextflow.in.th/ionic-framework
ng-repeat
www.nextflow.in.th/ionic-framework
$scope.list = [ 1,2,3
];
www.nextflow.in.th/angularjs
<ul ng-repeat=“item in list”> <li>{{item}}</li>
</ul>
HTML
Controller $scope.list
www.nextflow.in.th/ionic-framework
$scope.list = [ { id: 1, ch: ‘a’}, { id: 2, ch: ‘b’}, { id: 3, ch: ‘c’},
];
www.nextflow.in.th/angularjs
<ul ng-repeat=“item in list”> <li>{{item.name}}</li>
</ul>
HTML
Controller $scope.list
www.nextflow.in.th/ionic-framework
Challenge:
www.nextflow.in.th/ionic-framework
filter
www.nextflow.in.th/ionic-framework
ng-view + ngRoute
www.nextflow.in.th/angularjs
index.html Controller
www.nextflow.in.th/angularjs
Routeng-view
www.nextflow.in.th/angularjs
HTML (/) HomeController
HTML (/profile) ProfileController
Route
www.nextflow.in.th/ionic-framework
$routeParams
www.nextflow.in.th/angularjs
HTML (/profile/:id)
ProfileController $routeParams.id
Route
href=“#/profile/29
www.nextflow.in.th/ionic-framework
Factory
www.nextflow.in.th/angularjs
แชร์ข้อมูลระหว่าง Controller
HTML
Controller Data, Web Service
Controller
Controller
Data, Web Service
Data, Web Service
www.nextflow.in.th/angularjs
แชร์ข้อมูลระหว่าง Controller
HTML
Controller
FactoryController
Controller
www.nextflow.in.th/angularjs
.factory( ‘Name’ , [ ‘’ , function() {
}]);
www.nextflow.in.th/angularjs
.factory( function() { return {
method1 : function() {
} }
}]);
www.nextflow.in.th/angularjs
.factory( ‘UserService’ … );
.controller( … [ ‘UserService’ , function( UserService ) {
}]);
www.nextflow.in.th/ionic-framework
Web Service
www.nextflow.in.th/ionic-framework
$http.post $http.get
www.nextflow.in.th/ionic-framework
$http.get(‘url’) .then( function(resp){ … }, function(error){ … } )
www.nextflow.in.th/ionic-framework
$http.post(‘url’, {} ) .then( function(resp){ … }, function(error){ … } )
ขอบคุณครับ โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching www.nextflow.in.th/angularjs
www.nextflow.in.th/ionic-framework
www.nextflow.in.th/angularjs
“พล” Teerasej JiraphatchandejTechnology Coach Nextflow.in.th
Email: [email protected] facebook.com/nextflow www.nextflow.in.th