100-days-of-angular

October 21, 2023 · View on GitHub

English translation for this series is available at ./translations/EN folder

Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày.

Ủng hộ/ Support

Bọn mình chân thành cảm ơn sự ủng hộ và đóng góp của các bạn!

Dự án thực tế để tham khảo

Dự ánNội dungTừ khóaVideo (nếu có)
SpotifySpotify được thiết kế với Nx workspace với một kiến trúc hoàn chỉnh tối ưu hóa Single Component Per Module (SCAM). ngrx và ngrx/component-store để quản lý dữ liệu giữa các component. TailwindCSS và ng-zorro cho phần UI.Nx, ngrx, TailwindCSS, ng-zorroYoutube
Jira CloneJira clone có sử dụng Akita state management để quản lý data giữa các thành phần trong ứng dụng. Ngoài ra có dùng thêm TailwindCSS cho styling và ng-zorro để sử dụng các component có sẵn như modal, tooltipTailwindCSS, ng-zorro, AkitaYoutube
TetrisTetris là ví dụ về game đơn giản viết bằng Angular có sử dụng Akita làm state management. Trông đơn giản thôi nhưng nếu bạn mở React Devtools lên thì sẽ thấy rất nhiều data được cập nhật với mỗi chuyển động trên màn hìnhAkitaYoutube
Authentication FlowAnh Châu có chia sẻ về Authentication Flow, Permission-based FlowAuthentication Flow, Permission-based FlowYoutube
MEAN - NestJSAnh Châu có chia sẻ về MEAN stack - MongoDB, Express, Angular and NodeJSNestJS, MongoDBYoutube

Các chia sẻ tâm huyết của ban quản trị Angular Việt Nam và những khách mời

#TitleNội dung
1Cơ hội việc làm tại Singapore trong ngành ITProcess phỏng vấn ở Sing trong các công ty công nghệ như thế nào, Điểm mạnh điểm yếu của ứng viên đến từ Việt Nam. Cách phát huy điểm mạnh và khắc phục
2Giá như mình biết - Những chia sẻ của một Senior Software EngineerVới thâm niên 10 năm làm việc trong ngành lĩnh vực tech qua nhiều vị trí, anh Bill Nguyễn sẽ quay trở lại chia sẻ với chúng ta những điều mà như anh nói là "giá như mình biết". Từ đó hy vọng các bạn rút ra được những bài học nhất định để trở thành một Software Engineer tốt hơn ngày hôm qua :)

Các bài viết

Bài viếtTranslationsVideo
Day 1: Prepare The Working EnvironmentENGYoutube
Day 2: Explore Angular AppENGYoutube
Day 3: Angular Data BindingENGYoutube
Day 4: Angular Structure Directive - NgIfYoutube
Day 5: Angular Structure Directive - NgForOfYoutube
Day 6: Attribute Directive - Class and StyleYoutube
Day 7: Component Interaction - Pass data from parent to child with input bindingYoutube
Day 8: Component Interaction - Parent listens for child eventYoutube
Day 9: Custom Two-way BindingYoutube
Day 10: Template Variable và ViewChild/ViewChildrenYoutube
Day 11: TypeScript Data TypeYoutube
Day 12: TypeScript Advanced TypeYoutube
Day 13: Content Projection Trong AngularYoutube
Day 14: ng-template, ngTemplateOutlet và ng-container trong AngularYoutube
Day 15: Introduction to Dependency Injection in AngularYoutube
Day 16: Dependency Injection trong Ứng Dụng Angular Part 2Youtube
Day 17: ContentChild và ContentChildren trong AngularYoutube
Day 18: Pipes trong AngularYoutube
Day 19: Giới thiệu Reactive Programming, RxJS và ObservableYoutube
Day 20: RxJS Creation OperatorsYoutube
Day 21: RxJS Transformation OperatorsYoutube
Day 22: RxJS Filtering OperatorsYoutube
Day 23: RxJS Combination OperatorsYoutube
Day 24: RxJS Error Handling and Conditional OperatorsYoutube
Day 25: RxJS Higher Order Observables and Utility OperatorsYoutube
Day 26: RxJS Subject and MulticastingYoutube
Day 27: RouterYoutube
Day 28: Angular Router - Feature Modules, Child Routes and Servicespart of 27 video, part of 29 video
Day 29: Angular Router - Lazy Loading ModulesYoutube
Day 30: Angular Router - Guards and Resolvers Part 1Youtube
Day 31: Angular Router - Guards and Resolvers Part 2Youtube
Day 32: Angular Router - Guards and Resolvers Part 3Youtube
Day 33: Template-driven Forms Trong AngularYoutube
Day 34: Template-driven Forms Trong Angular Part 2Youtube
Day 35: Reactive Forms Trong AngularYoutube
Day 36: Reactive Forms Trong Angular Part 2Youtube
Day 37: Angular Form Async ValidatorYoutube
Day 38: Dynamic Component
Day 39: Thực Hành Micro Frontends
Day 40: Jira Clone 01 - Lên kế hoạch và cài cắm dự án AngularENG
Day 41: Jira Clone 02 - Dựng layout với flexbox và TailwindCSSENG
Day 42: Angular CDK Coercion
Day 43: DisabledControlDirective to disable Reactive Form controlENG
Day 44: Observable for @OutputENG
Day 45: RxJS Trong Angular - Unsubscribe Một Subscription
Day 46: JavaScript Widget và Embedded Script
Day 47: Composition form datasource with Directive
Day 48: Using dependency injection to get data from ActivatedRoute

Youtube Playlist

https://www.youtube.com/playlist?list=PLMTyi4Bfd5pW73uXw-6jgRxDwdPYqwk0r

Tác giả