ianlnf
commented
1 year ago Welcome to the Angular Learning Path!
This path is designed to help you build and test an Angular application from scratch.
After completing the path, you will be able to:
- Set up an Angular development environment with Nx
- Understand reactive development with RxJS
- Learn about the options for managing state in Angular
- Develop forms using out of the box solutions or Formly
- Write integration tests with Angular Testing Library
- Master practices for migration of Angular.js to Angular
This is a self-learning pathway. You are expected to do your own investigation and research along the way. Links to resources are provided, but if you feel lost at any point, you can reach out for support on Slack through the #angular-upskilling channel.
The choice of project is up to you, but you can find a list of project ideas (either for inspiration or to take as-is) on the Project Ideas page.
You should consider aspects such as performance, accessibility, and testing along the way.
We recommend reading the entire guide once to get a full understanding of the content before you start your learning journey!
Creating an Angular application with Nx
Angular projects can be managed with the Angular CLI or via Nx. Nx is an open source build system heavily inspired by the Angular CLI, but with additional features.
Some of the benefits of Nx over the Angular CLI include:
- Unit/Integration testing with Jest
- Out of the box E2E testing with Cypress
- Micro Frontend Support
- Custom Webpack configuration support
- Caching of custom commands including distributed caching
- Generators for integration with other tools including Storybook, Tailwind, NgRx etc
See https://blog.nrwl.io/angular-cli-and-nx-why-df160946888f for more information about the Angular CLI vs Nx.
To create an Angular application with Nx:
npx create-nx-workspace@latest- Select ‘Integrated Monorepo’
- Select ‘angular’
- Give the repository a name
- Give the application a name
- Select a styling solution (CSS is sufficient)
- Select ‘No’ for the distributed caching option
Note that you can also create a ‘standalone application’ as an alternative to a monorepo if you don’t wish to support multiple applications or need support for the Nx Angular application generator
By default, the Nx workspace will create an Angular application with non-standalone components. When you have a monorepo setup, you can add an additional Angular application that uses standalone components with:
npx nx g @nrwl/angular:app myapp --standalone --routingIt is recommended that you use standalone Angular application due to the reduced boilerplate, see https://angular.io/guide/standalone-components for more information
Change to your application folder and run npm start. You should have a new Angular application running at http://localhost:4200/
Note we will use Node >= 18 and npm as the package manager within this learning path, but you can also use Yarn or pnpm
Slide 2 - Angular standalone components and applications (bootstrapping, routes etc) Slide 3 - Templates, property and event binding, interpolation etc. Slide 4 - Styling options, CSS files, material, CDK, tailwind etc. Slide 5 - RxJS Slide 6 - HTTP service and unsubscribing patterns and async pipe Slide 7 - Angular Query and NgRx state management options Slide 8 - Forms options, reactive vs template driven vs Formly Slide 9 - Mutations with Angular Query Slide 10 - Testing options OOTB vs Angular Testing Library Slide 11 - Writing integration tests with ATL Slide 12 - Angular.js migration practices and considerations
This is an example of a full Angular Learning Path within Leapsome, using the same format as the existing React Native Learning Path.
This includes high level summaries of Angular fundamentals and more advanced topics, and would also include a project based assignment of the user's choosing, and question slides along the way to test progress.