Angular Learning Course

Angular Learning Course in Org-Mode

A comprehensive, interactive Angular framework course designed for navigation in Emacs org-mode. This course assumes knowledge of JavaScript, CSS, and HTML, focusing exclusively on teaching Angular concepts, patterns, and best practices.

🎯 Course Overview

This repository contains a complete Angular learning path structured as an org-mode document, making it perfect for developers who prefer learning within their Emacs environment.

📚 What’s Included

Main Course Content

• angular-course.org - The complete 8-module Angular course
• Progressive learning path from fundamentals to advanced topics
• Interactive TODO items for tracking progress
• Code examples with syntax highlighting

Learning Modules

1. Angular Fundamentals - Components, templates, data binding, directives, pipes
2. Component Architecture - Lifecycle hooks, component communication, content projection
3. Services & Dependency Injection - DI hierarchy, providers, injection tokens
4. Routing & Navigation - Route configuration, guards, lazy loading
5. Forms - Template-driven and reactive forms, validation
6. HTTP & Observables - HttpClient, RxJS operators, interceptors
7. State Management - Component state, signals, NgRx basics
8. Advanced Topics - Performance optimization, testing, build configuration

Exercises Directory

• Hands-on exercises for each module
• Progressive difficulty
• Complete solutions included
• Final project specification for a task management system

Examples Directory

• component-example.ts - Basic component patterns
• service-example.ts - Service with HTTP operations
• reactive-form-example.ts - Advanced form with validation
• directive-example.ts - Custom directive implementations

🚀 Getting Started

Prerequisites

• Emacs with org-mode
• Node.js and npm installed
• Angular CLI (install with npm install -g @angular/cli)
• Basic knowledge of JavaScript, HTML, and CSS

Setup

# Clone the repository
git clone https://github.com/cloudstreet-dev/Angular-Learning.git
cd Angular-Learning

# Open the course in Emacs
emacs angular-course.org

Creating Your Practice Project

# Create a new Angular project for exercises
ng new angular-practice
cd angular-practice
ng serve

📖 How to Use This Course

Navigation in Emacs Org-Mode

Key Binding	Action
TAB	Fold/unfold section
S-TAB	Cycle global visibility
C-c C-n	Next heading
C-c C-p	Previous heading
C-c C-o	Follow link
C-c C-t	Toggle TODO state
C-c C-c	Execute code block

Learning Path

1. Start with the Course Introduction
2. Work through each module sequentially
3. Complete exercises after each concept
4. Mark TODO items as DONE as you progress
5. Build the final project to consolidate learning

Code Execution

• Code blocks can be executed directly in org-mode
• TypeScript examples are for reference and should be implemented in your Angular project
• Use ng generate commands to create components/services as you learn

🎓 Learning Approach

For Each Module:

1. Read the concept explanations
2. Study the code examples
3. Practice with the provided exercises
4. Build something using the concepts
5. Review by teaching someone else

Best Practices Emphasized:

• Component-based architecture
• Reactive programming with RxJS
• Type safety with TypeScript
• Performance optimization
• Testing strategies
• Clean code principles

🛠️ Tools & Technologies Covered

• Angular 16+ features including signals
• RxJS for reactive programming
• TypeScript advanced features
• Angular CLI
• NgRx for state management
• Testing with Jasmine/Karma
• Build optimization techniques

📝 Course Features

Interactive Learning

• TODO items for tracking progress
• Exercises with solutions
• Real-world examples
• Progressive complexity

Emacs Integration

• Full org-mode support
• Collapsible sections
• Internal navigation links
• Syntax highlighted code blocks
• Export capabilities (HTML, PDF, etc.)

🤝 Contributing

Contributions are welcome! Feel free to:

• Add more exercises
• Improve explanations
• Fix errors
• Add real-world examples
• Translate to other languages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Angular team for the excellent framework
• Emacs org-mode community
• All contributors and learners

📬 Support

If you find any issues or have suggestions:

• Open an issue on GitHub
• Submit a pull request
• Contact through GitHub

🚦 Quick Start Checklist

• [ ] Install Node.js and npm
• [ ] Install Angular CLI globally
• [ ] Clone this repository
• [ ] Open angular-course.org in Emacs
• [ ] Create a practice Angular project
• [ ] Start with Module 1
• [ ] Complete exercises as you progress
• [ ] Build the final project

Happy Learning! Start your Angular journey by opening angular-course.org in Emacs and diving into Module 1! 🚀