Babel Coder

คอร์ส Universal Angular 2 : ล้วงลึกการสร้าง Universal ด้วย Angular 2


Creator
Nuttavut Thongjor
Category
Web Development
คำอธิบายหลักสูตร

จุดเด่นของคอร์สนี้

  • เป็นคอร์สออนไลน์แรกและตัวเดียวในขณะนี้ที่สอนการสร้าง Universal JavaScript ด้วย Angular2
  • จัดการ SEO ไปกับการทำ Universal JavaScript
  • ใช้งาน Firebase และ Node.js / Express.js เพื่อสร้าง Restful API
  • การทำ Auth ด้วย JWT
  • สอนใช้ Docker ในการทำงานและการใช้ Digital Ocean
  • เรียนรู้ Reactive Programming ไปกับ RxJS
  • ใช้งาน Meterial Design ในการออกแบบแอพพลิเคชัน
  • มีแบบฝึกหัดทบทวนทุกบท ผู้สอนเป็นผู้ตรวจและให้คำแนะนำ
  • สร้างโปรเจคที่ใช้งานได้จริง 7 โปรเจค โปรเจคจบผู้เรียนสามารถสร้างแอพพลิเคชันได้อิสระ โดยผู้มีสอนมีหน้าที่ให้คำแนะนำ
  • มีบอร์ดสนทนาให้สอบถามปัญหาได้ทุกเมื่อ
  • ย้อนกลับมาดูได้ทุกเมื่อ แม้จบคอร์สไปแล้ว

รูปแบบการเรียน

คอร์สนี้เป็นหลักสูตรออนไลน์ผ่านวิดีโอ คุณจึงสามารถกลับมาดูใหม่ได้ในทุกครั้งที่ต้องการ

ผู้สอนเชื่อว่าการเรียนรู้ที่ได้ผลไม่ใช่การอัดทุกสิ่งที่มีเข้าไปในสมองเพียงวันสองวัน รูปแบบการเรียนจึงอิงตามปฏิทินการศึกษา กล่าวคือระบบจะจำกัดบทเรียนต่อหนึ่งสัปดาห์ตามความเหมาะสม เพื่อให้ผู้เรียนได้ค่อยๆซึมซับความรู้เข้าไปในปริมาณที่พอเหมาะ

เมื่อจบแต่ละสัปดาห์ระบบจะให้ผู้เรียนทำแบบฝึกหัดส่งภายในระยะเวลาที่กำหนด ผู้สอนจะเป็นผู้ตรวจและให้ความเห็นเพิ่มเติม รวมไปถึงการให้คะแนนและการประเมินผลการเรียนเป็นเกรดเมื่อจบหลักสูตร ทั้งนี้เมื่อจบหลักสูตรผู้เรียนต้องผ่านการสอบหรือทำโปรเจคส่งเพื่อเป็นการทบทวนความรู้ทั้งหมดที่ได้จากคอร์สนี้

เพื่อให้การเรียนรู้ได้ประสิทธิภาพสูงสุด ระบบจะไม่แสดงเนื้อหาทั้งหมดออกมาในครั้งเดียว แต่จะแสดงวิดีโอหรือเอกสารเฉพาะหน่วยการเรียนรู้ที่ผู้เรียนต้องศึกษาในสัปดาห์นั้น ทั้งนี้เพื่อเป็นการป้องกันไม่ให้ผู้เรียนให้ความสนใจไปที่บทเรียนอื่นอย่างข้ามขั้นตอน เมื่อจบสัปดาห์ชุดการสอนของสัปดาห์ต่อไปจึงจะแสดงขึ้นมา

หลังสิ้นสุดหลักสูตรระบบจะแปลผลคะแนนจากแบบฝึกหัดและการทดสอบอื่นๆเป็นเกรด พร้อมทั้งออกใบรับรองผลการเรียนออนไลน์ให้ด้วย แม้ตอนนี้เกรดและใบรับรองจะไม่สามารถนำไปใช้ประโยชน์ได้ แต่ขอให้เชื่อผู้สอนว่ามันคือผลผลิตจากความพยายามในการเรียนรู้ตลอดหลักสูตร อวดใครไม่ได้แต่คือความภูมิใจที่รับรู้ได้ด้วยตนเอง

ขั้นตอนการศึกษา

ศึกษาบทเรียนในหัวข้อต่างๆจากวิดีโอ มองภาพรวมและคิดตาม ท้ายบทจะมีเอกสารสรุปเฉพาะสิ่งที่จำเป็นต้องจำ ให้ผู้เรียนให้ความสนใจเฉพาะสิ่งที่เอกสารท้ายบทสรุปไว้ให้ กลับไปดูวิดีโออีกรอบ ครั้งนี้ให้พุ่งความสนใจเฉพาะส่วนที่เน้นในเอกสารสรุปท้ายบท ทำแบบฝึกหัดท้ายบทส่งภายในระยะเวลาที่กำหนด ทิ้งคำถามที่สงสัยไว้ในกระดานสนทนา เมื่อผู้เรียนเสียเงินแล้วผู้สอนอยากให้ผู้เรียนตักตวงทุกสิ่งไปให้มากที่สุด อย่าอายที่จะถามและอย่าอายที่จะเถียงถ้าคิดว่าสิ่งที่สอนไปนั้นผิดหรือไม่สมเหตุสมผล

คอร์สนี้เหมาะกับใคร

  • ผู้เรียนควรเป็นผู้ใช้งาน JavaScript ได้ในระดับ B+ (ใช้งานได้ดี)
  • ผู้เรียนที่ต้องการเรียนรู้ Angular2 อย่างลึกซึ้งและเข้าใจอย่างถ่องแท้

คอร์สนี้ไม่เหมาะกับใคร

  • ผู้ที่ไม่เคยใช้ JavaScript หรือเขียน JavaScript ไม่คล่อง
  • ผู้เรียนที่ต้องการเรียนรู้ Angular2 อย่างรวดเร็ว

คอร์สทั้งหมดของ Angular 2

Instant Angular2 เหมาะสำหรับผู้เริ่มต้นที่อยากเรียนรู้ Angular2 อย่างรวดเร็วและทำโปรเจคได้จริง Simplify Angular2 เหมาะกับผู้เรียนระดับกลางที่ต้องการเนื้อหาเชิงลึก แต่ยังคงความง่ายในการเรียนรู้ Universal Angular2 เหมาะกับผู้เรียนที่ต้องการเจาะลึกใน Angular2 และคอนเซปต์อื่นๆในเชิงการออกแบบระดับลึก

บทเรียนในคอร์สนี้

Unit1: Introduction to Angular2

  • Angular2 Architecture
  • Angular Modules
  • Bootstrapping
  • Components
  • Change Detection
  • Templates
  • Metadata
  • Data Binding
  • Directives
  • Services
  • Dependency Injection
  • อื่นๆ

Unit2: ES2015 and Basic Functional Programming

  • Basic Types and Variable Declarations
  • Destructuring, Rest and Spread Operator
  • Classes
  • Modules
  • Promise
  • อื่นๆ

Unit3: TypeScript

  • Interfaces
  • Enum
  • Generics
  • Type Inference
  • Decorators
  • Namespaces
  • อื่นๆ

Unit4: Angular CLI

  • การติดตั้งและใช้งาน angular-cli
  • การใช้งาน SCSS และ Webpack กับ angular-cli
  • อื่นๆ

Unit5: Component, Templates and Data binding

  • data binding
  • Component Interactions
  • Component Styles และ View Encapsulation
  • Multiple Components
  • Sharable Component
  • Smart Component และ Presentation Component
  • ng-content
  • Events
  • Access DOM Elements
  • Renderer
  • Custom Properties
  • Dynamic Components
  • Template Context
  • Lifecycle Hooks
  • อื่นๆ

Unit6: Directives

  • Attribute Directive
  • HostListener
  • Structural Directive
  • *ngIf
  • *ngFor
  • The asterisk (*) effect
  • ngSwitch
  • อื่นๆ

Unit7: Services and Dependency Injection

  • Dependency Injection คืออะไร
  • Providers
  • Factory Providers
  • Injectable
  • Hierarchical Injectors
  • อื่นๆ

Unit8: Routing & Navigation

  • Route และ Router
  • Router Outlet
  • Router Links
  • routerLinkActive
  • Router State
  • Route Params
  • Redirecting Request
  • Child Routes
  • CanActivate
  • CanDeactivate
  • Lazy Load Modules
  • อื่นๆ

Unit9: Pipes

  • Pipes คืออะไรและวิธีการใช้งาน Pipes
  • uppercase, lowercase
  • json
  • replace
  • slice
  • number
  • percent
  • currency
  • date
  • Parametrizing Pipes
  • Chaining Pipes
  • Custom Pipes
  • Async Pipes

Unit10: Angular Modules

  • Angular Modularity
  • Root Module และ Bootstrapping
  • Declarations
  • Providers
  • Imports
  • Shared Modules
  • Lazy Loaded Modules
  • อื่นๆ

Unit11: Workshop I

Unit12: Angular Material

  • Introduction to Material Design
  • Theming
  • Layout
  • Meterial Directive
  • อื่นๆ

Unit13: Forms

  • FormsModule
  • Form Properties
  • Form State
  • Form Controls
  • Two-Way Binding
  • Reactive Approach
  • Dynamic Forms
  • Form Validation
  • อื่นๆ

Unit14: Restful API

  • Rest API Design
  • Authentication และ Authorization
  • JWT
  • การติดตั้งและใช้งาน Express.js เพื่อทำ API Server
  • อื่นๆ

Unit15: HTTP Client

Unit16: Firebase

Unit17: Reactive Programming

  • Reactive Programming คืออะไร
  • รู้จัก RxJS
  • การใช้งาน RxJS กับการทำงานแบบ Asynchronous
  • Observables
  • RxJS Operators
  • อื่นๆ

Unit18: Workshop II

Unit19: Debugging

  • Google Chrome Console
  • Augury

Unit20: Webpack 2

  • Entries
  • Output
  • Loaders และ Plugins
  • Tree Shaking
  • อื่นๆ

Unit21: Optimizations and Performance Improvements

  • Lazy Loading
  • Shared Modules
  • Ahead-of-time Compilation
  • อื่นๆ

Unit22: Security

  • Reporting vulnerabilities
  • Preventing cross-site scripting (XSS)
  • Trusting safe values
  • HTTP-Level vulnerabilities
  • Auditing Angular applications
  • อื่นๆ

Unit23: Style Guide

  • Single Responsibility
  • Naming
  • Coding Conventions
  • Application Structure
  • Components
  • Directives
  • Services
  • Data Services
  • Lifecycle Hooks
  • อื่นๆ

Unit24: NgZone

Unit25: Universal Angular2

  • Server-side rendering คืออะไร
  • Use Cases
  • ServerDomRenderer
  • preboot.js
  • Search Engine Optimization
  • SSR Optimizations
  • อื่นๆ

Unit26: Deployment

  • การปรับแต่ง Application ก่อนใช้งานจริงบน Production
  • Introduction to Docker
  • Deploying to Github Pages
  • Deploying to Heroku
  • Deploying to Digital Ocean

Unit27: Workshop III

ระยะเวลาศึกษา

หลักสูตรนี้ใช้เวลาเรียน 3 เดือน เริ่ม 1 พฤศจิกายนนี้

ปฏิทินการศึกษา

บทที่ วันออกบทเรียน กำหนดส่งงาน จำนวนข้อ สัดส่วนคะแนน (%)
1 1 พย 7 พย 2 1
2 - 3 8 พย 14 พย 30 7
4 - 6 15 พย 21 พย 10 3
7 - 10 22 พย 28 พย 20 4
11 29 พย 12 ธค 1 15
12 - 13 6 ธค 12 ธค 5 1
14 - 16 13 ธค 19 ธค 20 3
17 20 ธค 26 ธค 10 6
18 27 ธค 2 มค 1 25
19 - 21 3 มค 9 มค 10 2
22 - 24 10 มค 16 มค 10 1
25 17 มค 23 มค 5 1
26 24 มค 30 มค 5 1
27 31 มค - 1 30
รวม 138 100

หมายเหตุ เวลาออกบทเรียนคือ 23.00 น GMT + 7

ลงทะเบียนเรียน

ติดต่อ https://www.facebook.com/babelcoder/

บทเรียน
Level 1
Introduction to Angular2
แนะนำ Angular 2 โครงสร้างของแอพพลิเคชันและตัวอย่างโปรแกรมที่จะพัฒนาในคอร์สนี้
  • Gold
    1. แนะนำ Angular 2
    1.24
  • Gold
    2. Component-based UI
    8.58
  • Gold
    3. Directive
    1.53
  • Gold
    4. Service
    4.53
  • Gold
    5. Module
    4.4
  • Gold
    6. Data Flow
    6.4
  • Gold
    7. โปรแกรมค้นหาบทความ
    11.32
  • Gold
    8. แนะนำการเรียน
    3.16
  • Gold
    9. สรุป
    4.59
  • Gold
    10. แบบฝึกหัด
Level 2
2. ES2015 and Basic Functional Programming
ทบทวนพื้นฐาน JavaScript, ES2015 และ พื้นฐานของ Functional Programming ใน JavaScript
  • Gold
    1. ECMAScript
    3.32
  • Gold
    2. Execution Context
    7.34
  • Gold
    3. Scope Chain
    4.39
  • Gold
    4. Closure
    6.57
  • Gold
    5. Variable Scope
    8.29
  • Gold
    6. Keyword this
    9.51
  • Gold
    7. Lexical this
    3.43
  • Gold
    8. Arrow Function
    2.48
  • Gold
    9. Lab 1
    3.02
  • Gold
    10. ทบทวนไวยากรณ์ 1
    3.13
  • Gold
    11. Asynchronous Programming
    6.08
  • Gold
    12. Promise
    4.1
  • Gold
    13. ทบทวนความเข้าใจ 1
  • Gold
    14. เฉลยทบทวนความเข้าใจ 1 ข้อ 1
    1.05
  • Gold
    15. เฉลยทบทวนความเข้าใจ 1 ข้อ 2
    1.33
  • Gold
    16. เฉลยทบทวนความเข้าใจ 1 ข้อ 3
    2.2
  • Gold
    17. เฉลยทบทวนความเข้าใจ 1 ข้อ 4
    1.02
  • Gold
    18. เฉลยทบทวนความเข้าใจ 1 ข้อ 5
    2.24
  • Gold
    19. เฉลยทบทวนความเข้าใจ 1 ข้อ 6
    2.36
  • Gold
    20. Object
    2.26
  • Gold
    21. Array
    5.57
  • Gold
    22. String
    3.57
  • Gold
    23. Spread and Rest Operators
    3.55
  • Gold
    24. Destructuring
    4.59
  • Gold
    25. Class
    2.55
  • Gold
    26. Composition over Inheritance
    6.07
  • Gold
    27. Module
    5.33
  • Gold
    28. Functional Programming
    6
  • Gold
    29. Immutability
    4.42
  • Gold
    30. Pure Function
    2.06
  • Gold
    31. Data Transformation
    8.17
  • Gold
    32. Higher Order Functions
    2.56
  • Gold
    33. Composition
    3.19
  • Gold
    34. Recursion
    2.48
  • Gold
    35. Tail Call Optimization
    3.04
  • Gold
    36. Tail Call Position
    4.4
  • Gold
    37. Lab2
    6.34
  • Gold
    38. ทบทวนความเข้าใจ 2
  • Gold
    39. เฉลยทบทวนความเข้าใจ 2 ข้อ 1
    4.13
  • Gold
    40. เฉลยทบทวนความเข้าใจ 2 ข้อ 2
    3.15
  • Gold
    41. เฉลยทบทวนความเข้าใจ 2 ข้อ 3
    4.26
  • Gold
    42. เฉลยทบทวนความเข้าใจ 2 ข้อ 4
    3.09
  • Gold
    43. สรุป
    3.31
  • Gold
    44. แบบฝึกหัด
  • Gold
    45. เฉลยแบบฝึกหัดข้อ 1
    8.21
  • Gold
    46. เฉลยแบบฝึกหัดข้อ 2
    1.58
  • Gold
    47. เฉลยแบบฝึกหัดข้อ 3
    1.18
  • Gold
    48. เฉลยแบบฝึกหัดข้อ 4
    1.51
  • Gold
    49. เฉลยแบบฝึกหัดข้อ 5
    6.28
Level 3
TypeScript
แนะนำพื้นฐานการใช้งาน TypeScript
  • Gold
    1. แนะนำ TypeScript
    3.24
  • Gold
    2. Setup Project
    3.25
  • Gold
    3. tsconfig.json
    0.42
  • Gold
    4. ชนิดข้อมูลพื้นฐาน
    2.58
  • Gold
    5. Literal Types
    1.09
  • Gold
    6. Enum
    2
  • Gold
    7. Type Assertion
    1.14
  • Gold
    8. Interface
    3.09
  • Gold
    9. Optional Properties
    2.04
  • Gold
    10. Type Freshness
    1.53
  • Gold
    11. Intersection Types
    1.48
  • Gold
    12. Union Types
    1.34
  • Gold
    13. Type Guards
    1.33
  • Gold
    14. Discriminated Unions
    2.1
  • Gold
    15. Index Signatures
    1.06
  • Gold
    16. Type Inference
    2.12
  • Gold
    17. ทบทวนไวยากรณ์ 1
    3.01
  • Gold
    18. OOP Concept
    2.37
  • Gold
    19. Parameter Properties
    1.01
  • Gold
    20. readonly
    1.53
  • Gold
    21. Accessors
    3.06
  • Gold
    22. Inheritance
    0.57
  • Gold
    23. Public Modifiers
    1.45
  • Gold
    24. Private Modifiers
    1.58
  • Gold
    25. Protected Modifiers
    1.2
  • Gold
    26. Static Properties
    1.4
  • Gold
    27. Abstract Classes
    2.3
  • Gold
    28. Generic Types
    3.03
  • Gold
    29. สรุป OOP
    3.27
  • Gold
    30. Property Descriptor
    4.42
  • Gold
    31. Class Decorators
    3.55
  • Gold
    32. Property Decorators
    2.18
  • Gold
    33. Decorator Composition
    0.57
  • Gold
    34. Ambient Declarations
    2.3
  • Gold
    35. Style guide
    2.06
  • Gold
    36. สรุป
    2.31
Level 4
Component, Template และ Data Binding
รู้จัก Component และ Template การใช้งาน Property Binding และ Event Binding รวมไปถึง Two-Way Binding
  • Gold
    1. รู้จัก Component
    2.03
  • Gold
    2. การสร้าง Component
    2.11
  • Gold
    3. ลำดับชั้นของ Component
    1.39
  • Gold
    4. Bootstrap Process
    5.16
  • Gold
    5. แนะนำแอพพลิเคชันสมุดจดบันทึก
    7.59
  • Gold
    6. Input Decorator
    5.02
  • Gold
    7. Event Binding
    4.16
  • Gold
    8. ViewChild
    2.09
  • Gold
    9. Property Binding
    2.24
  • Gold
    10. Two Ways Binding
    2.23
  • Gold
    11. Output Decorator
    4.28
  • Gold
    12. โปรแกรมสมุดจดบันทึก
    4.27
  • Gold
    13. บันทึกย่อ 1
    5.17
  • Gold
    14. ทบทวนความเข้าใจ 1
  • Gold
    15. เฉลยทบทวนความเข้าใจ 1 ข้อ 1
    4.11
  • Gold
    16. เฉลยทบทวนความเข้าใจ 1 ข้อ 2
    14.36
  • Gold
    17. Property Binding syntax
    3.2
  • Gold
    18. Safe Navigation Operator
    1.2
  • Gold
    19. ng-content
    1.3
  • Gold
    20. Lifecycle Hooks
    2.17
  • Gold
    21. ngOnInit
    2.35
  • Gold
    22. ngOnChanges
    0.55
  • Gold
    23. แอพพลิเคชัน Blog
    0.57
  • Gold
    24. ติดตั้งแอพพลิเคชัน Blog
    1.05
  • Gold
    25. คอมโพแนนท์ในแอพพลิเคชัน Blog
    1.43
  • Gold
    26. ng serve
    2.36
  • Gold
    27. การสร้างคอมโพแนนท์
    2.55
  • Gold
    28. แอพพลิเคชัน Blog: PostForm Component
    9.51
  • Gold
    29. แอพพลิเคชัน Blog: PostFormImage Component
    9.52
  • Gold
    30. แอพพลิเคชัน Blog: Posts และ Post Components
    7.54
  • Gold
    31. แอพพลิเคชัน Blog: การล้างค่า Image
    6.29
  • Gold
    32. แอพพลิเคชัน Blog: สรุป
    4.55
  • Gold
    32. สรุป
    1.58
Level 5
Directives
เรียนรู้ความหมายของ Directives ประเภทของ Directives และการใช้งานทั้ง Structural Directives และ Attribute Directives
  • Gold
    1. รู้จักกับ Directives
    1.21
  • Gold
    2. ngFor
    2.05
  • Gold
    3. ngIf
    1.34
  • Gold
    4. ngSwitch
    1.49
  • Gold
    5. ngStyle
    3.43
  • Gold
    6. style
    0.56
  • Gold
    7. ngClass
    2.37
  • Gold
    8. ทบทวนไวยากรณ์ 1
    5.55
  • Gold
    9. แอพพลิเคชัน Blog: การจัดการ View
    7.51
  • Gold
    10. แอพพลิเคชัน Blog: การใช้งาน Enum
    5.12
  • Gold
    11. แอพพลิเคชัน Blog: ngSwitch
    1.1
  • Gold
    12. สรุป
    1.11
Level 6
Advance Component and Directives
ศึกษาการสร้าง Attribute และ Structural Directives รู้จักการทำงานของ Template, TemplateRef, Renderer และอื่นๆที่มีส่วนสำคัญต่อการสร้าง Directives
  • Gold
    1. แนะนำบทเรียน
    1
  • Gold
    2. View Encapsulation
    7.45
  • Gold
    3. Content Projection
    5.09
  • Gold
    4. ViewChild และ ViewChildren
    3.4
  • Gold
    5. ContentChild และ ContentChildren
    2.55
  • Gold
    6. ข้อแตกต่างของ ViewChild และ ContentChild
    1.37
  • Gold
    7. ngAfterViewInit
    3.21
  • Gold
    8. ngAfterContentInit
    1.19
  • Gold
    9. Syntax Exercise 1
    1.57
  • Gold
    10. Lab 1
    12.41
  • Gold
    11. QueryList
    3.49
  • Gold
    12. ทบทวนความเข้าใจ 1
  • Gold
    13. เฉลยทบทวนความเข้าใจ 1 ข้อ 1
    10.02
  • Gold
    14. Attribute Binding
    3.11
  • Gold
    15. Custom Two-Ways Binding
    4.3
  • Gold
    16. Host Element
    2.32
  • Gold
    17. :host
    1.39
  • Gold
    18. Template Reference Variables
    0.42
  • Gold
    19. HostBinding
    2.33
  • Gold
    20. HostListener
    1.45
  • Gold
    21. ElementRef
    3.35
  • Gold
    22. Renderer
    4.01
  • Gold
    23. การกำหนดค่าให้ Attribute Directives
    2.5
  • Gold
    24. Syntax Exercise 2
    2.39
  • Gold
    25. Template
    0.56
  • Gold
    26. Template และ Structural Directives
    4.25
  • Gold
    27. Microsyntax
    2.52
  • Gold
    28. TrackBy
    5.38
  • Gold
    29. Template และ Microsyntax
    1.12
  • Gold
    30. Syntax Exercise 3
    2.14
  • Gold
    31. TemplateRef
    3.46
  • Gold
    32. ViewContainerRef
    2.09
  • Gold
    33. createEmbeddedView
    1.26
  • Gold
    34. การกำหนดค่าให้ Structural Directives
    1.17
  • Gold
    35. $implicit
    4.03
  • Gold
    36. Context Variables
    1.32
  • Gold
    37. Syntax Exercise 4
    1.04
  • Gold
    38. ข้อหลีกเลี่ยงเกี่ยวกับ Components และ Directives
    3.04
  • Gold
    39. ทบทวนความเข้าใจ 2
  • Gold
    40. เฉลยทบทวนความเข้าใจ 2 ข้อ 1
    5.09
  • Gold
    41. เฉลยทบทวนความเข้าใจ 2 ข้อ 2
    3.47
  • Gold
    42. เฉลยทบทวนความเข้าใจ 2 ข้อ 3
    5.59
  • Gold
    43. สรุป
    1.44

แสดงความคิดเห็นของคุณ


No any discussions