https://github.com/hbweb/talk-angular-pro
Angular Advanced Topics
https://github.com/hbweb/talk-angular-pro
advanced-angular angular angular-signals
Last synced: about 1 month ago
JSON representation
Angular Advanced Topics
- Host: GitHub
- URL: https://github.com/hbweb/talk-angular-pro
- Owner: hbweb
- Created: 2023-08-28T01:15:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T08:46:52.000Z (over 1 year ago)
- Last Synced: 2025-01-29T20:37:58.820Z (over 1 year ago)
- Topics: advanced-angular, angular, angular-signals
- Language: TypeScript
- Homepage: https://angular-pro-talk.web.app
- Size: 1.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Pro
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
Live site is on [Angular Pro](https://angular-pro-talk.web.app/).
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Topic Discussion
### Content Projection:
Undertand of Content Projection with
Viewchild, ContentChild and how to creat/destroy a component dynamically.
### Advanced Dependency Injection
Hierarchical Injectors
Custom Providers and Injection Tokens
Dependency Injection Scopes
Resolution modifiers
### RxJS Mastery
In-depth understanding of RxJS operators and patterns.
Handling complex asynchronous scenarios using switchMap, mergeMap, concatMap, etc.
Combining streams, error handling, and advanced transformation techniques.
### Advanced State Management
Deep dive into NgRx for reactive state management.
Implementing NgRx effects, selectors, and entity patterns.
Structuring large NgRx applications with feature modules.
If possible, please do a quick research on other State Management built on top of NgRx
and how Angular Signal would change this.
### Performance Optimization
Advanced AOT (Ahead-of-Time) compilation techniques.
Lazy loading and optimizing initial bundle size.
Efficient change detection strategies (OnPush) and performance profiling.
Using Angular Signal
### Server-Side Rendering (SSR)
Understanding Angular Universal for SSR.
Implementing server-side rendering for better SEO and performance.
### Advanced Routing Techniques
Route resolvers for fetching data before route activation.
Custom route guards with complex conditions.
Route animations and advanced navigation techniques.
### Testing at Scale
Advanced unit testing with TestBed, mocking, and spies.
E2E testing with Protractor or Cypress for complex scenarios.
Test-driven development (TDD) methodologies and best practices.
Marble Testing for NgRx.
### Advanced Directives and Pipes
Creating reusable custom directives.
Building complex structural and attribute directives.
Creating advanced custom pipes and understanding pure vs. impure pipes.
### Optimal Component Architecture
Applying SOLID principles to Angular components.
Advanced component communication techniques (RxJS subjects, services).
Smart vs. dumb component patterns and best practices.
### Custom Angular Schematics
Creating custom schematics for generating code.
Automating repetitive tasks and enforcing best practices.
### Continuous Integration & Deployment
Implementing CI/CD pipelines for Angular applications.
Deployment strategies, Dockerization, and progressive web apps (PWAs).
### Security Best Practices
Cross-Site Scripting (XSS) prevention techniques.
Securing RESTful API calls and handling authentication/authorization.
### Internationalization and Accessibility (i18n/a11y)
Implementing localization and translation with Angular i18n.
Ensuring web accessibility with ARIA roles and attributes.
### Deep Dive into Angular CLI
Advanced CLI commands and configuration.
Customizing build processes and optimizing performance.
### Advanced Debugging and Profiling
Using Chrome DevTools for Angular debugging.
Identifying memory leaks and optimizing performance bottlenecks.
Keep Up with Latest Updates:
Stay current with Angular updates, best practices, and emerging technologies.
Becoming an Angular expert involves not only mastering these technical topics but also continuously practicing, learning from real-world projects, and contributing to the Angular community.
### Few other things you could also take a look at
- NX Monorepos by Nxwl
- Publish Angular library
- Share your knowledge to others