Mad IT: August 2016

Basic Angular Directive

นอกจาก Angular Expression แล้ว เรายังสามารถใช้ Angular Directive สำหรับการผูกข้อมูล (binding) โดย directive ที่ใช้ทั่วไป มีดังนี้

ng-init

สำหรับการกำหนดค่าเริ่มต้นให้กับตัวแปร

<div ng-init="price=50;qty=25">

    <p>Amount: {{ price * qty }}</p>
    <p>Amount: {{ price * qty | currency }}</p>
    <p>Amount: {{ price * qty | currency:'THB' }}</p>

</div>

ตัวอย่างจะเป็นการกำหนดค่าตัวแปร price กับ qty

ng-model

เป็นการผูกค่าตัวแปรกับ input tag ใน HTML

1 2	<input type="text" ng-model="name"> <p>Name: {{ name }}</p>

ในตัวอย่างเป็นการผูก input text กับตัวแปรชื่อ name ซึ่งในการผูกค่า อาจจะใช้เป็นตัวแปรแบบ primitive หรือว่า object ก็ได้

หรืออีกตัวอย่างหนึ่ง เป็นการผูกค่าตัวแปร like กับ input radio

<div ng-init="like='Yes'">
    <input type="radio" value="Yes" ng-model="like">I like
    <input type="radio" value="No" ng-model="like">I don't like
    <p>Answer: {{ like }}</p>
</div>

หรือ ผูกค่ากับ select tag

<select ng-model="food">
    <option value="Rice">Rice</option>
    <option value="Noodle">Noodle</option>
    <option value="Soup">Soup</option>
</select>

Your Order: {{ food }}

ng-click

เนื่องจากใน javascript ตัวแปรนอกจากจะเก็บค่าต่างๆ หรือว่าใช้เก็บเป็น object ของ property (ซึ่งก็เป็นการเก็บค่าอยู่ดี) ได้แล้ว ยังสามารถกำหนดให้ตัวแปรมีค่าเก็บ function ได้ด้วย เสมือนกับ function เป็นค่าๆ หนึ่ง ดังนั้นเราจึงใช้คุณสมบัตินี้มากำหนดพฤติกรรมของการทำงานในเอกสาร HTML ได้

ตัวอย่างกำหนดการคำนวณให้กับปุ่ม

1 2	<button ng-click="counter=counter+1">Count</button> <p>Counter: {{ counter }}</p>

ng-if

เป็น directive ที่ใช้กำหนดเงื่อนใขให้กับ HTML

ตัวอย่างกำหนดให้แสดงหรือไม่แสดงข้อความ (รวมถึงสีพื้น)

<div ng-init="show=true">
    <p ng-if="show" style="background-color: red;">Red</p>
    <p ng-if="!show" style="background-color: green;">Green</p>

    <button ng-click="show=!show">Toggle</button>
</div>

นอกจากนี้ยังมี

ng-repeat
ng-app
ng-controller

พื้นฐานของ Angular Directive ก็จะมีประมาณนี้ เอาไว้ค่อยมาต่อกันนะค่ะ

Reference:
ng Directive

Angular Expression

Angular สามารถเขียน code ลงไปได้ 2 รูปแบบ คือ Angular Expression และ Angular Directive ซึ่งสำหรับ Angular Expression จะมีลักษณะคล้ายๆ การเขียน JavaScript ลงไปยัง {{ script }}

ซึ่งตัวอย่างที่สามารถเขียนลงไปได้ก็อย่างเช่น

{{ 'Hello World' }} - แสดงข้อความ
{{ 1 + 2 }} - คำนวณค่าคงที่
{{ a + b }} - คำนวณค่าจากตัวแปร
{{ user.name }} - แสดงค่า property จาก object
{{ items[index] }} - แสดงค่าจาก array

แต่จะแตกต่างจาก JavaScript คือ

JavaScript อ้างอิงจาก ตัวแปร window แต่ Angular จะใช้ $scope object
ตัวแปรไหนที่ไม่อยู่ใน scope หรือไม่เคยกำหนดค่ามาก่อน Angular จะใส่ให้เป็น null หรือเริ่มต้น เช่น ถ้าเป็นตัวเลขก็จะใส่เป็นค่า 0 เป็นต้น
ไม่สามารถใส่ Control Flow ได้ เช่น loop, if
ไม่สามารถสร้าง function ได้

ไว้โอกาสหน้าจะมาต่อกันเรื่อง Directive

Reference:

AngularJS Documentation for expression

Angular Expressions - W3Schools

AngularJS 101

AngularJS เป็น lib ของ javascript ที่จะช่วยให้การเขียนได้ง่ายขึ้น (เข้าใจว่า) ดังนั้นการเขียน Angular JS จึงเหมือน javascript ทั่วๆ ไป แต่อาจจะมีการรูปแบบการเขียน (syntax) ที่แตกต่างออกไป

การจะเริ่มเขียน AngularJS สามารถเขียนได้บนไฟล์ .html ทั่วๆ ไป โดยเพิ่มการอ้างอิง AngularJS lib และใส่ module เข้าไป

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <title>test</title>
    </head>
    <body>
        {{ 'Hello World '}}
    </body>
</html>

ส่วนที่เพิ่มเข้าไปคือ "ng-app" ใน html tag และ script ที่อ้างไปยัง AngularJS lib เพียงเท่านี้ก็เป็นอันเสร็จ คือไฟล์ html นี้สามารถเพิ่ม code ส่วนที่เป็น Angular เข้าไปได้แล้ว ซึ่งในตัวอย่างจะเป็นการแสดงข้อความ 'Hello World' ผ่านทาง AngularJS

เอาหอมปากหอมคอแค่นี้ก่อน ไว้มาดูตอนต่อไป

ติดตั้ง Sublime และ Package Control

Sublime เป็น text editor ตัวหนึ่งคล้ายๆ กับ Notepad++ แต่ว่าเป็นโปรแกรมที่มีอยู่ทั้งใน Windows, MacOS ก็เลยทำให้หลายคนใช้กัน เพราะว่าจะได้สภาพแวดล้อมที่คล้ายกันทั้งใน PC และ Mac

การติดตั้ง Sublime ก็ไม่ได้ยุ่งยากอะไร Search มาแล้วก็สามารถเลือกติดตั้งกันได้เลยทั้ง Windows, Mac แต่การจะใช้ Sublime ให้เป็นประโยชน์จะไม่ได้สิ้นสุดแค่นั้น จะต้องหา package อื่นๆ มาติดตั้งเพิ่มเติม เพื่อให้ Sublime สามารถทำงานได้มีประสิทธิภาพมากขึ้น ดังนั้นเมื่อติดตั้ง Sublime แล้ว สิ่งที่ควรติดตั้งตามมาคือ Package Control เพื่อให้สามารถติดตั้ง package อื่นๆ ต่อไปได้ ซึ่งวิธีติดตั้งสามารถเข้าไปดูจาก https://packagecontrol.io/installation ได้ค่ะ แต่สั้นๆ ก็คือไปที่เมนู View > Show Console แล้ว copy text จากในหน้าเวปนั้น ไปใส่กด enter เป็นอันเสร็จค่ะ

หลังจากนั้นสามารถกด Ctrl + Shift + p เพื่อติดตั้ง package อื่นๆ ต่อไป ซึ่ง package อื่นๆ ก็อย่างเช่น

Emmet เป็นตัวช่วยให้การเขียนโปรแกรมง่ายขึ้น เช่น สามารถเขียน table>tr>td แล้วก็กด tab ได้เลย มันก็จะขึ้นมาเป็น tag table ทั้งหมดให้เรียบร้อย
HTML5 เข้าใจว่าเป็นตัวที่ทำให้ Sublime รู้จัก tag HTML5 จะได้แสดงสีอย่างสวยงาม
SublimeCodeIntel ใช้สำหรับ autocomplete code โดยเมื่อพิมพ์เข้าไปแล้วจะแสดงเป็น pop up มาให้เลือก

นอกจากนี้ยังมี package สำหรับแต่ละภาษาเช่น Python เพื่อให้แสดงสีตามแต่ละภาษาด้วย

ก็สรุปจบการแนะนำ Sublime พร้อมการติดตั้งไว้เท่านี้

การเปลี่ยนแปลงจนถึง Java8

เป็นการสรุปที่อบรมมาค่ะ เอาแบบสั้นมากๆ

Java5

Fast Loop

for (int x : list)

Variable Argument

public void doSomething (int... listInt)

Format (printf)
Enumeration ที่เป็น type safe
Autoboxing
Generic type
Annotation
Document annotation
Static import package

import static java.lang.math.*;

Java6

Script engine สามารถ run javascript ใน java ได้ ผ่าน class javax.script.ScriptEngine
String pool คือมีการรวมค่าของ string ที่เป็นค่าเดียวกันไว้ด้วยกัน (แต่ไม่ใช่ค่า string ตอน runtime)

String s1 = "Hello";

String s2 = "Hello"; // s1 = s2

String s3 = new String("Hello"); // s1 <> s3

String s4 = s3.intern(); // s1 == s4

Java7

String switcher คือใช้ string ในการเลือก case ได้
Literal underscore สามารถเพิ่ม _ เพื่อให้อ่านง่าย

long a = 127_777;

byte x = 0b0111_1111;

DiamondOp คือสามารถละ type ที่กำหนดใน generic class ได้

List b = new ArrayList<>();

Null safe มี java.util.Objects ที่เป็น utility สำหรับจัดการค่าที่สามารถเป็น null ได้ เช่น equals(), toString()
Multi-catch

try {

...

} catch (IndexOutOfBoundsException | NumberFormatException | ArithmeticException ex) {

System.out.println(ex.getClass());

}

Try resource block

try (

/* create auto-closeable resource object (class that implements AutoCloseable interface) */

) {

...

} catch (Exception ex) {

...

}

Walk โดยการเพิ่ม FileVisitor ใช้กับ Files.walkFileTree
Watch โดยมี WatchService

WatchService ws = FileSystems.getDefault().newWatchService();

Path p = Paths.get("temp");

p.register(ws, StandardWatchEventKinds.ENTRY_DELETE);

Java8

Interface สามารถสร้าง static method โดยจะต้องเป็น concrete method และเรียกผ่าน Interface ไม่ใช่เรียกที่ class
Interface สามารถสร้าง default method ที่เป็น concrete method ได้
Lambda ซึ่งจะถูกสร้างเป็น private method ใน class นั้นๆ (แม้ว่าจะคล้าย anonymous class) โดยใช้ annotation @FunctionalInterface เพื่อให้ compiler เช็คว่า interface เป็น SAM (Single Abstract Method) หรือเปล่า หรือจะใช้ predefined functional type (java.util.function.*) ก็ได้
Optional ซึ่งเป็น class ใหม่ เพื่อไม่ให้เกิด NullPointerException แต่ต้องใช้คู่กับ method orElse, orElseGet, orElseThrow หรือ ifPresent (ทั้งนี้จะใช้ Optional ก็จะต้องรู้เรื่อง Lambda ก่อน เพราะว่าหลาย method จะต้องใช้ความสามารถนี้)
Stream เป็น class ใหม่ และเพิ่ม method steam() ใน Collection และ Arrays เพื่อใช้ในการสร้าง stream หรือใช้ method of ของ Stream และเพิ่มค่าใน Stream โดย method add

Stream ss = Arrays.stream(array);

Stream sa = Stream.of(array);

Stream sd = Stream.generate(Math::random).limit(3); // สร้างค่าสุ่ม 3 ค่า

Stream sf = Files.lines(Paths.get("test.txt")); // สามารถอ่านจาก IO Stream ได้ด้วย

Parallel โดยสามารถใช้ได้บน Stream โดยแค่กำหนดเป็น Stream.parallel()
Parallel โดยใช้ class CompletableFuture