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

เริ่มต้น 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


ทำไมต้อง 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


Module



directive


<script

src=“js/app.js”>

HTML

app.js .module(“myApp”)

<body ng-app=“myApp”>


<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>

.controller( function(){ $scope.username = “Pon”;

}]);


directive


ng-click


<button ng-click=“doSomething(param)”>…</button>

.controller( function(){ $scope.doSomething = function(param){ };

}]);


<button ng-click=“sayHi()”>

HTML

Controller $scope.sayHi()


WorkshopC1: 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 (/profile) ProfileController

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 www.nextflow.in.th/angularjs



“พล” Teerasej JiraphatchandejTechnology Coach Nextflow.in.th

Email: [email protected] facebook.com/nextflow www.nextflow.in.th