Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
เริ่มต้น Angular JS
แบบสบายๆ
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching
www.nextflow.in.th/angularjs
www.nextflow.in.t...
www.nextflow.in.th/angularjs
“พล”
Teerasej Jiraphatchandej
Technology Coach
Nextflow.in.th
Email: teerasej@nextflow.in.th
f...
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 =...
www.nextflow.in.th/angularjs
<button ng-click=“sayHi()”>
HTML
Controller
$scope.sayHi()
www.nextflow.in.th/angularjs
Workshop
C1: 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...
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 Jiraphatchandej
Technology Coach
Nextflow.in.th
Email: teerasej@nextflow.in.th
f...
Upcoming SlideShare
Loading in …5
×

Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ

8,138 views

Published on

สไลด์บางส่วนที่ใช้ประกอบการบรรยายเชิงปฏิบัติการเรื่อง Angular JS และ Ionic Framework สำหรับผู้เริ่มต้น โดยธีรเศรษฐ์ จิรภัทร์ชาญเดช ให้กับมหาวิทยาลัยเกษตรศาสตร์ ศูนย์บริการคอมพิวเตอร์ ในเดือนเมษายน ปี 2015

ดูรายละเอียดเพิ่มเติม http://www.nextflow.in.th/ionic-framework/
ติดต่อจัดอบรมในองค์กร: +66 (0) 83 071 3373

Published in: Technology
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ

  1. 1. เริ่มต้น Angular JS แบบสบายๆ โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช Technology Coaching www.nextflow.in.th/angularjs www.nextflow.in.th/ionic-framework
  2. 2. www.nextflow.in.th/angularjs “พล” Teerasej Jiraphatchandej Technology Coach Nextflow.in.th Email: teerasej@nextflow.in.th facebook.com/nextflow www.nextflow.in.th
  3. 3. www.nextflow.in.th/angularjs ทำไมต้อง Angular JS?
  4. 4. www.nextflow.in.th/angularjs HTML ข้อมูล … Database Web service Object Array
  5. 5. www.nextflow.in.th/angularjs JQuery หรือ Angular JS
  6. 6. www.nextflow.in.th/angularjs $(selector).method() <div id=“main”> <input class=“b”/> </div>
  7. 7. www.nextflow.in.th/angularjs data-object {{data-object}}
  8. 8. www.nextflow.in.th/angularjs
  9. 9. www.nextflow.in.th/angularjs HTML Module Controller $scope.property $scope.method()
  10. 10. www.nextflow.in.th/angularjs
  11. 11. www.nextflow.in.th/angularjs
  12. 12. www.nextflow.in.th/ionic-framework module
  13. 13. www.nextflow.in.th/angularjs Module
  14. 14. www.nextflow.in.th/ionic-framework angular.module(“myApp”, [] )
  15. 15. www.nextflow.in.th/ionic-framework js/app.js
  16. 16. www.nextflow.in.th/angularjs Module
  17. 17. www.nextflow.in.th/angularjs
  18. 18. www.nextflow.in.th/ionic-framework directive
  19. 19. www.nextflow.in.th/angularjs <script src=“js/app.js”> HTML app.js .module(“myApp”) <body ng-app=“myApp”>
  20. 20. www.nextflow.in.th/angularjs <body ng-app=“myApp”> myApp = angular.module(“myApp”, [] );
  21. 21. www.nextflow.in.th/ionic-framework myApp = angular.module(“myApp”, [] )
  22. 22. www.nextflow.in.th/ionic-framework Controller
  23. 23. www.nextflow.in.th/ionic-framework .controller(“…”, [‘$scope’, function($scope){ // magic! } ] );
  24. 24. www.nextflow.in.th/angularjs .controller($scope) { $scope.name = “Pon” }
  25. 25. www.nextflow.in.th/ionic-framework $scope
  26. 26. www.nextflow.in.th/angularjs .controller( function(){ $scope.property = []; }]);
  27. 27. www.nextflow.in.th/ionic-framework Expression
  28. 28. www.nextflow.in.th/angularjs Controller “MyCtrl” HTML <… ng-controller=“MyCtrl”> My name is {{ username }}
  29. 29. www.nextflow.in.th/angularjs <h1> Hello, {{ username }}</h1> .controller( function(){ $scope.username = “Pon”; }]);
  30. 30. www.nextflow.in.th/ionic-framework directive
  31. 31. www.nextflow.in.th/ionic-framework ng-click
  32. 32. www.nextflow.in.th/angularjs <button ng-click=“doSomething(param)”>…</button> .controller( function(){ $scope.doSomething = function(param){ }; }]);
  33. 33. www.nextflow.in.th/angularjs <button ng-click=“sayHi()”> HTML Controller $scope.sayHi()
  34. 34. www.nextflow.in.th/angularjs Workshop C1: Vat 7 Controller
  35. 35. www.nextflow.in.th/ionic-framework ng-repeat
  36. 36. www.nextflow.in.th/ionic-framework $scope.list = [ 1,2,3 ];
  37. 37. www.nextflow.in.th/angularjs <ul ng-repeat=“item in list”> <li>{{item}}</li> </ul> HTML Controller $scope.list
  38. 38. www.nextflow.in.th/ionic-framework $scope.list = [ { id: 1, ch: ‘a’}, { id: 2, ch: ‘b’}, { id: 3, ch: ‘c’}, ];
  39. 39. www.nextflow.in.th/angularjs <ul ng-repeat=“item in list”> <li>{{item.name}}</li> </ul> HTML Controller $scope.list
  40. 40. www.nextflow.in.th/ionic-framework Challenge:
  41. 41. www.nextflow.in.th/ionic-framework filter
  42. 42. www.nextflow.in.th/ionic-framework ng-view + ngRoute
  43. 43. www.nextflow.in.th/angularjs index.html Controller
  44. 44. www.nextflow.in.th/angularjs Routeng-view
  45. 45. www.nextflow.in.th/angularjs HTML (/) HomeController HTML (/profile) ProfileController Route
  46. 46. www.nextflow.in.th/ionic-framework $routeParams
  47. 47. www.nextflow.in.th/angularjs HTML (/profile/:id) ProfileController $routeParams.id Route href=“#/profile/29
  48. 48. www.nextflow.in.th/ionic-framework Factory
  49. 49. www.nextflow.in.th/angularjs แชร์ข้อมูลระหว่าง Controller HTML Controller Data, Web Service Controller Controller Data, Web Service Data, Web Service
  50. 50. www.nextflow.in.th/angularjs แชร์ข้อมูลระหว่าง Controller HTML Controller FactoryController Controller
  51. 51. www.nextflow.in.th/angularjs .factory( ‘Name’ , [ ‘’ , function() { }]);
  52. 52. www.nextflow.in.th/angularjs .factory( function() { return { method1 : function() { } } }]);
  53. 53. www.nextflow.in.th/angularjs .factory( ‘UserService’ … ); .controller( … [ ‘UserService’ , function( UserService ) { }]);
  54. 54. www.nextflow.in.th/ionic-framework Web Service
  55. 55. www.nextflow.in.th/ionic-framework $http.post $http.get
  56. 56. www.nextflow.in.th/ionic-framework $http.get(‘url’) .then( function(resp){ … }, function(error){ … } )
  57. 57. www.nextflow.in.th/ionic-framework $http.post(‘url’, {} ) .then( function(resp){ … }, function(error){ … } )
  58. 58. ขอบคุณครับ โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช Technology Coaching www.nextflow.in.th/angularjs www.nextflow.in.th/ionic-framework
  59. 59. www.nextflow.in.th/angularjs “พล” Teerasej Jiraphatchandej Technology Coach Nextflow.in.th Email: teerasej@nextflow.in.th facebook.com/nextflow www.nextflow.in.th

×