<h2>Overview</h2>
<p>The Angular Component Architecture app serves as an excellent guide for developers looking to master the art of building Angular applications. Utilizing Angular, Angular Material, and the Angular CLI, this app provides a hands-on experience for working with a REST API through the effective use of json-server. By structuring and facilitating communication between components, it empowers users to adopt best practices in Angular application design and development.</p>
<p>With a focus on ease of use and clear instructions, this application allows users to set up their environment and get started quickly, making it ideal for both beginners and seasoned developers. From generating custom elements to running unit tests, this app covers a range of essential functionality within the Angular ecosystem, providing valuable insights along the way.</p>
<h2>Features</h2>
<ul>
<li><strong>Component Communication</strong>: Demonstrates effective strategies for managing communication between various components within the Angular framework.</li>
<li><strong>Custom Elements Generation</strong>: Allows components to be transformed into standalone custom elements, ready to be embedded within any HTML document.</li>
<li><strong>Code Scaffolding</strong>: Simplifies the creation of new components using straightforward commands, enhancing development efficiency with commands like <code>ng generate component</code>.</li>
<li><strong>REST API Integration</strong>: Utilizes json-server to provide a seamless and user-friendly method for working with RESTful services.</li>
<li><strong>Build Commands</strong>: Facilitates project compiling with <code>ng build</code>, storing build artifacts in the <code>dist/</code> directory for easy production deployments.</li>
<li><strong>Testing Capabilities</strong>: Supports running unit tests with Karma and end-to-end tests with Protractor, ensuring a thorough examination of application functionality.</li>
<li><strong>Server Launch</strong>: Offers easy project servicing with <code>ng serve</code>, allowing developers to run their application locally and see changes in real-time.</li>
<li><strong>Cross-platform Compatibility</strong>: Commands given for Mac can be easily translated to other operating systems, ensuring accessibility for all users.</li>
</ul>


<h2>Overview:</h2>
<p>The Angular Core Workshop focuses on using Angular CLI and NRWL Extensions to enhance development processes. The workshop emphasizes streamlining development tasks and allowing participants to concentrate on core concepts. By following the provided steps, individuals can easily get started in the workshop. The workshop involves utilizing NRWL Workspace, Angular Material, and JSON Server to create a comprehensive development environment.</p>
<h2>Features:</h2>
<ul>
<li><strong>NRWL Workspace:</strong> Creates a monorepo for Angular projects and libraries, allowing for the efficient management of enterprise applications.</li>
<li><strong>Angular Material:</strong> Offers a modern UI library for Angular that is adaptable across web, mobile, and desktop applications with minimal custom CSS requirements.</li>
<li><strong>JSON Server:</strong> Facilitates the quick and straightforward mocking of a backend REST service, enabling the testing of application functionalities with mocked data.</li>
</ul>
<h2>Summary:</h2>
<p>The Angular Core Workshop leverages tools like Angular CLI, NRWL Extensions, Angular Material, and JSON Server to simplify development workflows and enhance productivity. By following the installation steps, users can set up the workshop environment and start exploring core Angular concepts. The combination of these tools enables developers to focus on building robust applications efficiently.</p>


<h2>Overview:</h2>
<p>The Angular Reactive Workshop offers an immersive experience designed to enhance your skills in managing application states using Redux principles with NGRX. It focuses on building a strong foundational knowledge while working on real-world Angular projects. The workshop utilizes the NRWL workspace to create a structured monorepo environment, ensuring seamless management of applications across various domains.</p>
<p>Participants will leverage Angular Material for a modern UI experience and JSON Server to create a mock backend service, enabling efficient testing and development. This workshop is an excellent opportunity for developers looking to advance their Angular expertise and learn best practices in state management.</p>
<h2>Features:</h2>
<ul>
<li><strong>NGRX Integration</strong>: Learn the principles of Redux state management specifically tailored for Angular applications, ensuring efficient state handling.</li>
<li><strong>NRWL Workspace</strong>: Utilize a powerful monorepo setup that organizes multiple Angular projects and libraries under a single repository for streamlined development.</li>
<li><strong>Angular Material</strong>: Access a well-designed UI component library that promotes a consistent and modern look across web and mobile applications with minimal setup.</li>
<li><strong>JSON Server</strong>: Quickly set up a mock backend REST service to simulate real backend interactions, allowing you to work with data in a controlled environment.</li>
<li><strong>Local Development</strong>: Easy setup with local servers running on ports 3000 and 4200, providing both backend data and a responsive frontend experience for testing.</li>
<li><strong>Hands-On Learning</strong>: Engage in practical, hands-on exercises that solidify theoretical knowledge by applying it to real application scenarios.</li>
</ul>


<h2>Overview</h2>
<p>The Angular 13 Fundamentals Workshop App is a sample project intended for the Angular 13 Fundamentals Workshop. It consists of an Angular web application generated using Angular CLI version 13.0.3 and a mock RESTful API using json-server.</p>
<h2>Features</h2>
<ul>
<li><strong>Angular Web Application</strong>: Created with Angular CLI version 13.0.3.</li>
<li><strong>Mock RESTful API</strong>: Utilizes json-server to simulate a RESTful API.</li>
<li><strong>Convenient Startup</strong>: npm start runs serve:all command concurrently for easier setup.</li>
<li><strong>Development Server</strong>: Run ng serve for a dev server and access the app at http://localhost:4200.</li>
<li><strong>Code Generation</strong>: Easily generate components, directives, pipes, services, classes, guards, interfaces, enums, and modules using ng generate.</li>
<li><strong>Build Process</strong>: Use ng build to compile the project, storing artifacts in the dist/ directory.</li>
<li><strong>Testing Capabilities</strong>: Execute unit tests with ng test and end-to-end tests with ng e2e.</li>
</ul>
<h2>Summary</h2>
<p>The Angular 13 Fundamentals Workshop App provides a practical sample project for learning Angular fundamentals. With a pre-configured development environment, code generation utilities, and testing capabilities, this project serves as a useful resource for developers looking to enhance their Angular skills.</p>


<h2>Overview</h2>
<p>The Angular 9 Fundamentals Workshop is designed to provide a solid foundation for understanding and working with Angular 9. Through this workshop, participants can gain essential knowledge to start developing web applications using Angular 9.</p>
<h2>Features</h2>
<ul>
<li><strong>Comprehensive Content</strong>: Covers all fundamentals of Angular 9.</li>
<li><strong>Hands-on Experience</strong>: Engage in practical exercises to apply learned concepts.</li>
<li><strong>Interactive Workshops</strong>: Learn through interactive sessions with instructors and peers.</li>
<li><strong>Q&#x26;A Sessions</strong>: Get the opportunity to ask questions and clarify doubts during the workshop.</li>
</ul>
<h2>Summary</h2>
<p>The Angular 9 Fundamentals Workshop offers a comprehensive learning experience for individuals keen on mastering Angular development. With features like hands-on exercises and interactive sessions, participants can enhance their understanding and practical skills in Angular 9. Following the installation guide, users can easily set up and start benefiting from this workshop theme.</p>


<h2>Overview</h2>
<p>Angular Dashing is an innovative stock manager app designed with Angular and @ngrx, showcasing a component-driven architecture that enhances modularity and reusability. By combining the power of Angular Material for styling and a robust state management system with @ngrx/store, this application provides a seamless user experience while managing stock data effectively.</p>
<p>This app stands out for its elegant state management capabilities, efficient handling of side effects, and comprehensive testing strategies, making it an ideal tool for developers looking to enhance their Angular skills while building a reactive application.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Component-driven Architecture:</strong> Modular design that promotes reusability and easier maintenance of components within the application.</p>
</li>
<li>
<p><strong>Routing Support:</strong> Simplified navigation throughout the app, allowing users to access different features without complexity.</p>
</li>
<li>
<p><strong>Elegant State Management:</strong> Utilizes @ngrx/store for robust state management, which facilitates consistent data flow across the application.</p>
</li>
<li>
<p><strong>Side Effects Management:</strong> Leveraging @ngrx/effects for effective handling of asynchronous operations, ensuring a smooth user experience.</p>
</li>
<li>
<p><strong>State Inspection:</strong> In-depth state inspection available through @ngrx/store-devtools, enabling developers to monitor and debug the application's state seamlessly.</p>
</li>
<li>
<p><strong>State Selection with Reselect:</strong> Efficient state selection enhances performance by memoizing and reducing unnecessary computations.</p>
</li>
<li>
<p><strong>Unit Testing Strategies:</strong> Built-in strategies for unit testing Angular components, services, and @ngrx reducers and effects to ensure the reliability of the application.</p>
</li>
<li>
<p><strong>Integration with Redux Devtools:</strong> Easy setup for Redux Devtools browser extension allows for enhanced debugging and monitoring of the application state in real-time.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>The Angular Production Course App is a sample project designed for the Angular Production course at Frontend Masters. This project showcases an Angular web application and a mock RESTful API developed within an Nx workspace by NRWL. The application utilizes state and data libs to manage state and facilitate server communication, with the state lib being centered around NgRx. The entire application is built with a reactive approach, offering a modern development solution for Angular developers.</p>
<h2>Features:</h2>
<ul>
<li><strong>Angular Web Application</strong>: Developed as a sample project for the Angular Production course.</li>
<li><strong>Nx Workspace</strong>: Utilizes the NRWL Nx workspace for efficient development and organization.</li>
<li><strong>State Management with NgRx</strong>: Implements state management using NgRx for a robust and structured application state.</li>
<li><strong>Reactive Design</strong>: Built entirely using reactive programming principles for enhanced performance and scalability.</li>
<li><strong>Mock RESTful API</strong>: Includes a mock RESTful API for simulating server interactions during development.</li>
<li><strong>Convenient Commands</strong>: Provides commands like <code>serve:all</code> for easy concurrent running of API and web server.</li>
</ul>
<h2>Summary:</h2>
<p>The Angular Production Course App is a comprehensive sample project that demonstrates advanced Angular development techniques, such as state management with NgRx and reactive design principles. By utilizing an Nx workspace and including a mock API, developers can explore modern Angular development practices in a structured environment. With convenient commands for running the server and E2E tests, this project offers a practical learning experience for frontend developers looking to enhance their Angular skills.</p>


Onehungrymind

Angular Component Architecture

Angular Core Workshop

Angular Reactive Workshop

Angular13 Fundamentals Workshop

Angular9 Fundamentals Workshop

Dashing Angular

Fem Production Angular