วีดีโอสอนเขียนเว็บแอพพลิเคชันบน Angular (เวอร์ชั่นเต็ม พร้อมซอสโค้ด)

ในหลักสูตรนี้ เราจะได้เรียนเขียน Web Application ด้วย Angular 5 และ Node.js ซึ่งใช้หลักการ MVC, Data Binding และ Dependency Injection ที่จะช่วยทำให้การเขียน web application ง่ายต่อการวิเคราะห์, บำรุงรักษา (Maintenance) และการพัฒนาต่อยอดอย่างเป็นระบบ (Modularity) ในกรณีที่อนาคต ระบบของเรามีขนาดใหญ่ขึ้น ซับซ่อนมากขึ้น ต้องรองรับผู้ใช้งานมากขึ้น

ด้วยความสามารถของ Angular (frontend web framework) ซึ่งสามารถทำ 2-Ways Data Binding ได้ ทำให้เวปที่เราออกแบบสามารถทำงานได้เหมือน Mobile App ที่เป็นแบบ (Mutiple Views in Single Page) ที่ไม่ต้อง Reload/Redirect URL บน Browser ทำให้ผู้ใช้งานรู้สึกเหมือนโหลดแอพทั้งหมดมารันทีเดียว ไม่ต้องเสียเวลาไป re-load page ใหม่ทุกครั้ง

โดยการสือสารข้อมูลกับ Server, Angular4 จะทำแบบ Asynchronus Communication (Promise Concept) โดยจะไม่เห็นการ refresh ของ Browser ซึ่งเหมือนเขียนด้วย Ajax ของ JQuery ที่มีความวุ่นวายและซับซ่อนมากกว่ามาก แต่ด้วย Angular4 เราสามารถจัดการงานเหล่านี้ได้อย่างๆ ง่าย และโค้ดดูเป็นระบบ สะดวกต่อการมานั่งไล่แก้โค้ดที่หลัง เพราะมีการแบ่ง Model, View และ Controller (MVC) อย่างชัดเจน

พื้นฐานผู้เข้าอบรม :

- HTML, CSS เบื้องต้น

- มีความรู้พื้นฐานเกี่ยวกับการเขียนโปรแกรมด้วยภาษาใดภาษาหนึ่ง เช่น C#, Java, JavaScript, HTML และ CSS พื้นฐาน เป็นต้น *ใช้ภาษา TypeScript and JavaScript ในการสอน

เหมาะสำหรับ :

- ผู้ที่ต้องการพัฒนาระบบ Web Application ด้วย Angular + Node.js ในรูปแบบ Responsive Website

สิ่งที่ต้องเตรียม :

1. เครื่องโน๊ตบุ๊คที่ลงระบบปฏิบัติการ Windows 10 / Windows 8 / Windows 7 / macOS พร้อมติดตั้งโปรแกรมดังต่อไปนี้

- Visual Studio Code ดาวน์โหลด

- Node.js NPM ดาวน์โหลด

2. สมุดปากกา

3. Thumb dive

ตัวอย่าง Workshop ระบบ POS (Point of Sale)

ภาพบรรยากาศการเรียนการสอน

ตารางอบรม (กรุงเทพ พระราม 3) 9:00-16:00 วันละ 6 ชม.

เนื้อหาการอบรม

Day 1 (MEAN Architecture)

- Introduction Angular / Node.js / Express / MongoDB

- Difference between AngularJS and Angular 2-4,5

- Setup Development Tools (Node.js + Angular4 package)

- Using NPM (Node Package Manager)

- Basic Command lines in Angular CLI

- New Angular Project

- Review Project Structure

- Angular Architechture

Modules and NgModules
Comonents
Decorator (@Injectable, @Component)
Data and Event Binding
Directive (Built-In and Custom)
Routing
Router-outlet
Route Guard with CanActivate and CanDeActivate
Webpack
Pipe (Built-in and Custom)
Single Page Web Application
Service and Dependency Injection

- Export and Import Angular Components

- Using Angular Directive (*ng For and *ngIf)

- Bundle Icons
- Bundle Fonts
- Typescript Programming
- Create Components
- Calling External Javascript from TypeScript

Day 2 (AdminLTE + Angular Integration)

- Begin CMPos Workshop

- Admin LTE (Opensource CSS Theme) Integration

- Add Components and Services to Admin LTE

- Data Exchange between Components both (Child and Parent)

- Event Emitter and Listener between Components

- Create Service (sharing data and functionality)

- Create Routing for POS and Stock Workshop

- Routing with Parameters

- Angular Forms (Template-Driven and Reactive)

- Angular Forms (Validation Module)

- Integrate DataTable and Pagination

- Using NPM and Popular ng modules such as json2ts, angular-material, bootstrap

- Popular Visual Studio Code Extensions such as Angular4 Snippet

- Angular Form and 2-Ways Data Binding

- Loggging and Debugging

- Angular Regular Expression with Pipe

- Make Web Responsive using Flexbox and Bootstrap CSS

- Learn Angular Material User Interface

Day 3 (WebAPI, InMemoryWebAPI + Node.js)

- Module and Component Management

- Connecting In-Memory WebAPI (Mock-up WebAPI)

- Deep Dive Node.js

- WebAPI with Node.js

- Routing (HTTP GET, POST, DELETE and PUT) in Node.js with Express

- JSON Parsing with Body-Parser

- Connecting with Server HTTP (GET | POST)

- Passing multiple parameters

- Asyn Commu. with Reactive Way (Observable, Promise, Subscription)

- Http Error Handling using RXJS Catch

- Angular + Node.js Integration

- LocalStorage and Session Handler

Day 4 (MongoDB + Node.js Integration)

- MongoDB Installation and Integration

- Learn How NoSQL and RDBMS Difference is

- MongoDB Concept (Document, Collection, Fields)

- MongoDB Compass (GUI)

- MongoDB Shell (CLI)

- MongoDB Collection Joining

- Insert, Select, Update and Delete in MongoDB

- MongoDB Import and Export

- Connect RESTFul Webservice (JSON)

- Import @angular Modules and External JavaScript Modules

- Upload file and image

- PM2 ($ pm2 start app.js) - start/stop/restart and log

Day 5 (Finish Workshop + Deployment + ResponsiveCSS)

- Finish Workshop's Logic and Features

- Make Responsive Website with Bootstrap and FlexBox

- Production Deployment

- Fixing Problem Access Deny Due to Using IP

- Demo - Deploy on Docker

- Demo - (Develop android/ios mobiles app with angular)

- FAQ

วิธีการสั่งซื้อ

ทำการ Login ด้วย Account ของ Facebook โดยคลิ๊กที่ปุ่ม
กรอกรายละเอียด
กดปุ่ม ยืนยันการสั่งซื้อ
ทางบริษัทจะส่งอีเมล์แจ้ง วิธีการชำระเงิน ไปให้ทางอีเมล์ที่ท่านใช้สมัครสั่งซื้อ หรือสามารถดูได้ ที่นี่
เมื่อชำระเงินเรียบร้อยแล้ว กรุณาแฟกซ์สลิปมาที่ +66-2-6898943 หรือสแกนส่งทางอีเมล์ support@codemobiles.com หรือโทรมาแจ้งที่เบอร์ +66-81-359-9468
เมื่อบริษัทได้ตรวจสอบการชำระเงินแล้ว จะทำการส่ง รายละเอียดการเข้าใช้งาน ของหน้า VDO Training Online ไปให้ทางอีเมล์ที่ท่านใช้สมัครสั่งซื้อ

กรอกรายละเอียด
กดปุ่ม ยืนยันการสั่งซื้อ
ทางบริษัทจะส่งอีเมล์แจ้ง วิธีการชำระเงิน ไปให้ทางอีเมล์ที่ท่านใช้สมัครสั่งซื้อ หรือสามารถดูได้ ที่นี่
เมื่อชำระเงินเรียบร้อยแล้ว กรุณาแฟกซ์สลิปมาที่ +66-2-6898943 หรือสแกนส่งทางอีเมล์ support@codemobiles.com หรือโทรมาแจ้งที่เบอร์ +66-81-359-9468
เมื่อบริษัทได้ตรวจสอบการชำระเงินแล้ว จะทำการส่ง รายละเอียดการเข้าใช้งาน ของหน้า VDO Training Online ไปให้ทางอีเมล์ที่ท่านใช้สมัครสั่งซื้อ

วิธีการชำระเงิน / Payment
ชำระเงินผ่านธนาคารหรือตู้ ATM

ธนาคารกสิกรไทย สาขาเจริญราษฎร์ 7

ชื่อบัญชี บริษัท โค้ดโมบายส์ จำกัด (ออมทรัพย์) 670-2-04739-9 กรุณาตรวจสอบข้อมูลบัญชีให้ถูกต้องก่อนการโอนเงิน

*เมื่อชำระเงินเรียบร้อยแล้ว รบกวนแฟกซ์สลิปมาที่ +66-2-6898943, สแกนส่งทางอีเมล support@codemobiles.com หรือโทรแจ้งมาที่เบอร์ +66-81-359-9468