#1 Angular - Introduction to Angular 2

-

เริ่มต้นกับ Angular 2   

   Angular 1 หรือ AngularJS เป็น JavaScript framework ที่ Developer นิยมใช้มากตัวหนึ่ง แล้วทำไมเราจะต้องใช้ Angular 2 ด้วยล่ะ?

   Angular 2 ไม่ได้พัฒนามาจาก Angular 1 แต่ถ้ามาเทียบกันระหว่าง Angular 2 กับ Angular 1 จะเห็นว่า Angular 2 ดีกว่าในหลายๆ ด้าน เช่น
   Performtance: ในเรื่องของการแสดงผล Angular 2 โหลดข้อมูลได้เร็วกว่า Angular 1

   Mobile Support: Angular 1 ไม่ได้ถูกออกแบบมาเพื่อ mobile devices แต่เราใช้ frameworks อื่นๆ ร่วมกับ Angular 1 เพื่อให้ใช้ใน mobile devices ได้ ส่วน Angular 2 ได้ถูกออกแบบมาเพื่อ mobile ตั้งแต่ต้นแล้ว

   Component Based Development: Angular 2 สามารถพัฒนาแยกส่วนเป็น component แล้วนำแต่ละส่วนๆ มาประกอบกันเป็น module ซึ่งง่ายต่อการพัฒนาและแก้ไขในภายหลัง ไว้จะกล่าวในบทถัดๆ ไป

   Angular 2 จะใช้ TypeScript ในการพัฒนา ซึ่ง TypeScript สนับสนุนคุณสมบัติ JavaScript ตามมาตรฐาน ECMAScript2015 (ES6) กล่าวคือจะมีคุณสมบัติที่เทียบเท่ากันทั้งหมด นอกจากนี้ ยังมีคุณสมบัติที่เพิ่มเติม ทำให้ TypeScript มีความสามารถที่เต็มเปี่ยม และมีรูปแบบไวยากรณ์ที่เข้าใจง่ายกว่า JavaScript

ECMAScript คืออะไร

   ECMAScript คือ มาตรฐานภาษา JavaScript ซึ่งมีตั้งแต่ ECMAScript 1 จนถึง ECMAScript 7 browser ส่วนใหญ่ในปัจจุบัน support แค่ ES 5 แต่ ES 6 ยัง support ไม่สมบูรณ์ เราจึงจะต้องแปลง ES 6 เป็น ES 5 เพื่อให้ support กับทุกๆ browser ซึ่ง ES 6 จะมี feature ใหม่ เช่น classes, modules, arrow functions เป็นต้น

TypeScript คืออะไร

   TypeScript เป็นภาษาที่ถูกพัฒนาโดย Microsoft. TypeScript เป็น superset ของ JavaScript และ จะถูก compiles เป็น JavaScript เราเรียกว่า transpilers



ประโยชน์ของการใช้ TypeScript

   1. Intelligence
   
   2. Autocompletion
   
   3. Code navigation

   4. Advanced refactoring

   5. Strong Typing

   6. Supports ES 2015 (ES 6) features จะเหมือนกับ classes, interfaces และ inheritance.


   ถ้ามีความรู้เรื่อง OOP ของ C# หรือ Java จะเรียนรู้ TypeScript ได้ง่ายขึ้น.


   ในบทถัดไปจะมา Install โปรแกรมต่างๆ ที่จำเป็นในการใช้ในการ พัฒนา application ด้วย Angular 2 กัน



ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

#3 Angular - How to create new Angular project with Bootstrap4

-
รูปภาพ
เราจะมาสร้างโปรเจค Angular ใหม่ พร้อมกับเอา Bootstrap4 มาใช้ในโปรเจค จะมาเริ่มกันทีละ step นะ Step 1 : อย่างแรกเช็คก่อนว่าเรา install node มายังนะ (node -v) $ node -v v8.11.1 Step 2 : install angular cli $ npm install -g @angular/cli Step 3 : เช็คให้แน่ใจว่าลง angular cli สำเร็จ $ ng -v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 6.1.5 Node: 8.11.1 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.7.5 @angular-devkit/core 0.7.5 @angular-devkit/schematics 0.7.5 @schematics/angular 0.7.5 @schematics/update 0.7.5 rxjs 6....
อ่านเพิ่มเติม

#2 Angular - Setup Environment

-
รูปภาพ
  โปรแกรมหลักๆ ที่จำเป็นต้องมี  Node.js และ npm Git Editor ซักตัว ในที่นี้ขอแนะนำ Visual Studio Code (VSCode) Install Node.js และ npm Step 1 - เข้าไปที่เว็บไซต์ https://nodejs.org/en/download Step 2 - กด Download ตัว Install (แนะนำให้โหลด V. Recommended) Step 3 - กดติดตั้ง แล้ว กดปุ่ม Next Step 4 - ติ๊กที่ช่อง I accept the terms in the License Agreement แล้ว กดปุ่ม Next Step 5 - เลือก folder ที่ต้องการติดตั้ง แล้ว กดปุ่ม Next Step 6 - เลือกทุกอย่างที่ต้องการติดตั้ง แล้ว กดปุ่ม Next Step 7 - กดปุ่ม Install แล้ว รอติดตั้ง Step 8 - เมื่อติดตั้งเสร็จแล้ว ให้กดปุ่ม Finish Step 9 - ให้เปิด command prompt (cmd) ขึ้นมา พิมพ์ npm version เพื่อเช็คว่า ที่ติดตั้งไปติดตั้งสำเร็จนะ Install Git Step 1 - เข้าไปที่เว็บไซต์ https://git-scm.com Step 2 - กด Download ตัว Install Step 3 - หลังจาก Download เสร็จแล้ว ให้ทำการติดตั้ง แล้วกดปุ่ม Next Step 4 - เลือกจะติดตั...
อ่านเพิ่มเติม

JavaScript Object and Reference Variables (Part 1)

-
รูปภาพ
โดยปกติถ้าเราจะ copy ค่าจากอีกตัวแปรนึงไปยังอีกตัวแปรนึง ก็เพียงจับตัวแปรนั้นมาให้ค่า อย่างเช่น       let a = 1 ;       const b = a ;       a = 3 ;       console . log ( b ); // 1       console . log ( a ); // 3 คราวนี้เราอยาก copy ตัวแปร object บ้าง    const obj1 = {       name: 'superman'     };     const obj2 = obj1 ;     console . log ( obj2 ); // { name: "superman" }     console . log ( obj1 ); // { name: "superman" }     obj1 . name = 'batman' ;     console . log ( obj2 ); // { name: "batman" }     console . log ( obj1 ); // { name: "batman" } เอ๊ะ!! มีอะไรแปลกๆ จะเห็นว่า ตอนแรก obj1.name มีค่าเป็น superman ซึ่งให้ค่า กับ obj2 obj2.name ก็มีค...
อ่านเพิ่มเติม