#2 Angular - Setup Environment

-
  โปรแกรมหลักๆ ที่จำเป็นต้องมี 
  1. Node.js และ npm
  2. Git
  3. Editor ซักตัว ในที่นี้ขอแนะนำ Visual Studio Code (VSCode)


Install Node.js และ npm

Step 1 - เข้าไปที่เว็บไซต์ https://nodejs.org/en/download

Step 2 - กด Download ตัว Install (แนะนำให้โหลด V. Recommended)

Choose Installer

Step 3 - กดติดตั้ง แล้ว กดปุ่ม Next

Launch

Step 4 - ติ๊กที่ช่อง I accept the terms in the License Agreement แล้ว กดปุ่ม Next

Accept

Step 5 - เลือก folder ที่ต้องการติดตั้ง แล้ว กดปุ่ม Next

Destination Folder

Step 6 - เลือกทุกอย่างที่ต้องการติดตั้ง แล้ว กดปุ่ม Next

Default Installation

Step 7 - กดปุ่ม Install แล้ว รอติดตั้ง

Click Install

Step 8 - เมื่อติดตั้งเสร็จแล้ว ให้กดปุ่ม Finish

Finish Button

Step 9 - ให้เปิด command prompt (cmd) ขึ้นมา พิมพ์ npm version เพื่อเช็คว่า ที่ติดตั้งไปติดตั้งสำเร็จนะ










Install Git

Step 1 - เข้าไปที่เว็บไซต์ https://git-scm.com

Step 2 - กด Download ตัว Install

Git

Step 3 - หลังจาก Download เสร็จแล้ว ให้ทำการติดตั้ง แล้วกดปุ่ม Next

GNU Licence

Step 4 - เลือกจะติดตั้งอะไรบ้าง แล้วกดปุ่ม Next

Default Components

Step 5 - จากนั้น กดปุ่ม Next ไปเรื่อยๆ 

Step 6 - เมื่อถึงหน้านี้ให้ทำการกดปุ่ม Next อีกเพื่อทำการ Install

Accept Default Settings

Step 7 - เมื่อทำการติดตั้งสำเร็จ ให้กดปุ่ม Finish

Complete Installation Process



Install Visual Studio Code

Step 1 - เข้าไปที่เว็บไซต์ https://code.visualstudio.com

VisualStudio

Step 2 - Download VSCode มาติดตั้ง จากนั้น กดปุ่ม Next

Initial Screen

Step 3 - เลือก I accept the agreement แล้วกดปุ่ม Next

Next

Step 4 - เลือก Folder ที่ต้องการติดตั้ง แล้วกดปุ่ม Next

Destination Location

Step 5 - เลือกชื่อของโปรแกรมตามต้องการ แล้วกดปุ่ม Next

Program Shortcut

Step 6 - เลือกตามที่ต้องการ แล้วกดปุ่ม Next

Default Settings

Step 7 - กดปุ่ม Install รอการติดตั้ง

Setup

Step 8 - เมื่อทำการติดตั้งสำเร็จให้ กดปุ่ม Finish เพื่อทำการเปิด VSCode ขึ้นมา

Final Screen


เมื่อเราทำการติดตั้งทุกอย่างเสร็จหมดแล้ว ในบทถัดไปเราจะมาเริ่มโปรเจค Angular 2 กัน


ความคิดเห็น

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

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

#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) กล่าวคือจะมีคุณสมบัติที่เทียบเท่ากันทั้งหมด นอกจ...
อ่านเพิ่มเติม

#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....
อ่านเพิ่มเติม

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 ก็มีค...
อ่านเพิ่มเติม