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

เริ่มต้น Angular JS
แบบสบายๆ
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching
www.nextﬂow.in.th/angularjs
www.nextﬂow.in.th/ionic-framework

“พล”
Teerasej Jiraphatchandej
Technology Coach
Nextflow.in.th
Email: teerasej@nextflow.in.th
facebook.com/nextflow
www.nextflow.in.th

ทำไมต้อง Angular JS?

HTML
ข้อมูล
…
Database
Web service
Object
Array

JQuery
หรือ
Angular JS

$(selector).method()
<div id=“main”>
<input
class=“b”/>
</div>

data-object {{data-object}}

HTML
Module
Controller
$scope.property
$scope.method()

module

Module

angular.module(“myApp”, [] )

js/app.js

directive

<body ng-app=“myApp”>
myApp = angular.module(“myApp”, [] );

myApp =
angular.module(“myApp”, [] )

Controller

.controller(“…”,
[‘$scope’, function($scope){
// magic!
} ] );

.controller($scope) {
$scope.name = “Pon”
}

$scope

.controller( function(){
$scope.property = [];
}]);

Expression

Controller
“MyCtrl”
HTML
<… ng-controller=“MyCtrl”>
My name is {{ username }}

<h1> Hello, {{ username }}</h1>
$scope.username = “Pon”;
}]);

ng-click

<button ng-click=“doSomething(param)”>…</button>
$scope.doSomething = function(param){
};
}]);

<button ng-click=“sayHi()”>
HTML
Controller
$scope.sayHi()

Workshop
C1: Vat 7 Controller

ng-repeat

$scope.list = [
1,2,3
];

<ul ng-repeat=“item in list”>
<li>{{item}}</li>
</ul>
HTML
Controller
$scope.list

$scope.list = [
{ id: 1, ch: ‘a’},
{ id: 2, ch: ‘b’},
{ id: 3, ch: ‘c’},
];

<ul ng-repeat=“item in list”>
<li>{{item.name}}</li>
</ul>
HTML
Controller
$scope.list

Challenge:

filter

ng-view
+ ngRoute

index.html Controller

Routeng-view

HTML
(/)
HomeController
HTML
(/proﬁle)
ProﬁleController
Route

$routeParams

HTML
(/profile/:id)
ProfileController
$routeParams.id
Route
href=“#/profile/29

Factory

แชร์ข้อมูลระหว่าง Controller
HTML
Controller Data, Web Service
Controller
Controller
Data, Web Service
Data, Web Service

แชร์ข้อมูลระหว่าง Controller
HTML
Controller
FactoryController
Controller

.factory( ‘Name’ , [ ‘’ , function() {
}]);

.factory( function() {
return {
method1 : function() {
}
}
}]);

.factory( ‘UserService’ … );
.controller( … [ ‘UserService’ ,
function( UserService ) {
}]);

Web Service

$http.post
$http.get

$http.get(‘url’)
.then(
function(resp){ … },
function(error){ … }
)

$http.post(‘url’, {} )
.then(
function(resp){ … },
function(error){ … }
)

ขอบคุณครับ
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching

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

Recommended

Recommended

More Related Content

More from Teerasej Jiraphatchandej

More from Teerasej Jiraphatchandej (20)

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