angular js: first look เริ่มต้น angular js กันแบบสบายๆ

59
เมน Angular JS แบบสบายๆ โดย รเศรษ รทชาญเดช Technology Coaching www.nextflow.in.th/angularjs www.nextflow.in.th/ionic-framework

Upload: teerasej-jiraphatchandej

Post on 15-Jul-2015

1.235 views

Category:

Technology


5 download

TRANSCRIPT

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