แองกูล่า (Angular)

Template | HTML | JavaScript | คำสำคัญ (Key) |

แองกูล่า คืออะไร

ชวนอ่าน angular.io
ผู้เริ่มต้นควรเข้าใจ
1. Javascript
2. HTML
3. CSS

AngularJS (รุ่น 1.X : 20 ตุลาคม 2010) และ Angular (รุ่น 2 : 22–23 ตุลาคม 2014) ต่างก็เป็น Front-end JavaScript Framework แบบโอเพนซอร์ส ที่พัฒนาโดย Google แต่เดิม AngularJS ใช้ภาษา Javascript แล้วพัฒนาเป็น Angular ไปใช้ TypeScript แทน ซึ่ง AngularJS ออกมาก่อน มีการใช้ Controller และ $scope ส่วน Angular ได้ในภายหลัง มีการใช้ Components และ Directives ปัจจุบัน Angular รองรับภาษา TypeScript และไม่ต้องใช้ .js ต่อท้ายชื่อแฟ้ม
/wiki/AngularJS
/wiki/Angular
แองกูล่า (Angular) คือ Front-end JavaScript Framework ที่ทำงานฝั่ง Client ใช้สร้าง Reactive Single Page Applications (SPA) โดยทุกหน้าจะอยู่ในหน้าเดียวกันแบบตื่นตัวตลอด ที่ควบคุมปฏิสัมพันธ์ผ่านปุ่มแบบโต้ตอบ ให้ความรู้สึกเหมือน Desktop Application โดยไม่ download ข้อมูลมาเปลี่ยนหน้าใหม่ มีการทำงานแบบ Model-View-Controller ซึ่งการติดตั้ง Angular Framework ต้องใช้คำสั่ง C:\> npm install -g @angular/cli ดังนั้นจึงต้องติดตั้ง Node.js ก่อน
Node.js หรือ Node คือ โปรแกรมสำหรับสั่งให้โปรแกรมภาษา Javascript ที่เขียนขึ้นนั้นได้ทำงาน เช่น สร้าง hello.js ด้วย echo console.log("Hello world");>hello.js แล้วสั่งให้ทำงานด้วย C:\> node hello.js ตรวจสอบรุ่นของ node ด้วย C:\> node -v พบ 16.3.0
ขั้นตอนการติดตั้ง Node.js
เริ่มจาก เปิด https://nodejs.org/en/download/ แล้วเลือก Windows Installer : node-v14.17.0-x86.msi หรือ node-v16.3.0-x64 เมื่อติดตั้งก็จะได้ ผู้จัดการโหนดแพ็กเกจ (Node Package Manager) สามารถตรวจสอบรุ่นด้วย C:\> npm -v พบเลขรุ่นคือ 7.16.0
C:\> npm install -g npm@latest (update npm)
path ที่ถูกเพิ่มคือ %userprofile%\AppData\Roaming\Npm ที่เก็บ Batch file ให้เรียกใช้ เช่น npm.cmd, npx.cmd, ng.cmd ที่ภายในแฟ้มจะไปเรียกใช้ node.exe และพบห้อง C:\Program Files\nodejs\ เก็บแฟ้ม node.exe

เฟรมเวิร์ค และแพลตฟอร์ม

เฟรมเวิร์ค (Framework) คือ ชุดคำสั่ง เครื่องมือ โครงสร้าง ต้นแบบพื้นฐาน ที่ถูกสร้างมารองรับการทำงาน เพื่ออำนวยความสะดวกแก่ผู้ใช้งาน แทนที่จะสร้างเองก็มีเครื่องมือที่พร้อมใช้ ช่วยให้พัฒนาระบบได้เร็ว และง่ายขึ้น แต่ขนาดโปรแกรมจะมีขนาดใหญ่ ต้องศึกษาฟังก์ชัน และใช้คุณสมบัติได้เท่าที่มี อาทิ Laravel เป็น Web application framework ส่วน Angular และ React Native เป็น Framework แบบ Cross Platform Technology
แพลตฟอร์ม (Platform) คือ การทํางานร่วมกันของฮาร์ดแวร์ หรือซอฟต์แวร์ อาจเป็นระบบปฏิบัติการ สถาปัตยกรรมคอมพิวเตอร์ เช่น ไมโครซอฟท์วินโดวส์ แมคโอเอสเอ็กซ์ หรือแอนดรอย ครอสแพลตฟอร์ม (Cross Platform) คือ การรองรับให้โปรแกรมคอมพิวเตอร์ ภาษาโปรแกรม ระบบปฏิบัติการ หรือ ซอฟต์แวร์ สามารถทำงานได้บนหลายแพลตฟอร์ม เช่น บนไมโครซอฟท์วินโดวส์ บนแมคโอเอสเอ็กซ์ บนลีนุกซ์ บนแอนดรอย และบนเพาเวอร์พีซี
Top 20 Front-end ได้แก่ 1) React Native 2) Framework7 3) Flutter 4) NativeScript 5) Meteor 6) JQuery 7) CocoaTouch 8) Xamarin 9) Swiftic 10) Ionic 11) Sencha Ext JS 12) Apache Cordova 13) Onsen UI 14) Corona SDK 15) Monaca 16) Mobile Angular UI 17) Appcelerator Titanium 18) Uno 19) Ktor 20) Aurelia
Top 10 Web Frameworks ได้แก่ 1) Ruby on Rails (Ruby) 2) Laravel (PHP) 3) Django (Python) 4) ASP.NET (C#) 5) Express (JavaScript) 6) Spring (Java) 7) Angular (JavaScript) 8) Ember (JavaScript) 9) Meteor (JavaScript) 10) Vue (JavaScript)

10 เฟรมเวิร์คฟอนต์เอ็นที่ดีที่สุด

มีเฟรมเวิร์คมากมายน่าสนใจ เพราะทำให้การพัฒนาแอปพลิเคชันสำเร็จในเวลาที่รวดเร็ว มีลูกศิษย์ CS 2564 หลายคนสนใจ Angular ค้นดูก็พบว่าอยู่ใน 10 เฟรมเวิร์คที่ดีที่สุด เมื่ออ่านจุดเด่นของ Angular พบว่า 1) เขียนโค้ดง่าย 2) รูปแบบการเขียนเป็นฟอร์มแบบองค์ประกอบเดียว 3) เป็นระบบนิเวศน์ขนาดใหญ่ 4) วัสดุถูกออกแบบให้สร้างแอพลิเคชันได้ดี 5) มีประสิทธิภาพสูง เมื่อเทียบกับ เฟรมเวิร์คคู่แข่ง ได้แก่ 1) React 2) Angular 3) Vue.js 4) Ember.js 5) jQuery 6) Semantic-UI 7) Backbone.js 8) Preact 9) Svelte 10) Foundation
Popularity: React.js 40.14%, Angular 22.96%, Vue.js 18.97%, Angular.js 11.49%, Svelte 2.75%

ติดตั้ง Angular และสร้าง my-app

my-app (ชื่อที่สร้างขึ้นใช้ชื่ออื่นได้) คือ ชื่อแอปพลิเคชันเริ่มต้นในตัวอย่างนี้ ซึ่งมีแฟ้มเริ่มต้นสำหรับนำไปพัฒนาต่อ พร้อมโฟลเดอร์ที่จำเป็นสำหรับการเริ่มต้นประมวลผล เมื่อติดตั้งแล้วเสร็จสามารถเปิดบริการ web server และ open service แล้วใช้งานได้ทันที บริการที่ http://localhost:4200
Workspace and projects
ng new my-app (workspace + project)
ng new my-ws --create-application false (without project)
cd my-ws (my-ws = my-workspace)
ng generate application my-first-app (in workspace)
A project in workspace
mkdir angular
cd angular
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open
Automatic opening in browser : http://localhost:4200

เริ่มแก้ไข my-app

เปิด D:\angular\my-app\src\app\app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'burin rujjanapan'; /* my-app */
}
เปิด D:\angular\my-app\src\app\app.component.css 
แล้วพิมพ์ .toolbar { background-color: blue !important; }
เปิด D:\angular\my-app\src\app\app.component.html
แล้วสำรวจพบ .toolbar มี background-color: #1976d2;

เมื่อมีการแก้ไข แฟ้ม component.ts, component.css component.html ใน my-app จะมีผลต่อการเปลี่ยนแปลงใน localhost ทำให้รู้ผลการแก้ไขได้ทันที โดยไม่ต้องสั่ง restart แอปพลิเคชันใหม่

แนะนำเว็บ

https://nodejs.org/en/download/
https://angular.io/guide/setup-local
https://angular.io/guide/file-structure
https://sysadmin.psu.ac.th/2018/05/22/รู้จัก-angularjs-กันดีกว่า/

ใช้เวลาโหลดเว็บเพจ = 152 มิลลิวินาที สูง = 1575 จุด กว้าง = 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net