Learn Angular from start to quit

From the beginning of learning Angular to now, I have come all the way. Although I am not an expert, I still have some personal opinions on how to learn Angular, which I want to share with you.

There are six stages, or levels, in learning Angular from entry to abandonment:

Step 1 Understanding

For those new to Angular, the first and most important step is to lay the groundwork and decide if you want to continue. (Angular has a higher learning barrier, I don’t mean to scare you.)

Here’s what you need to know before you study:

• TypeScript features and syntax. If you’re new to TypeScript, here are some ways to get started:
  • TypeScript Chinese website
  • The TypeScript’s official website
  • TypeScript Github
  • TypeScript @types(Open source library collection for type definitions)
• AngularWhat is?AngularWhat’s the difference from AngularJs?
• AngularVersion differences? How to choose the right version?
• AngularApplicable scenarios?AngularScenarios that are not applicable?
• AngularBasic syntax.
  • AngularFeature:
    • Two-way data binding
    • cross-platform
    • Develop incremental applications
    • Unified platform SSR support
    • Code splits are loaded on demand
    • Increase Productivity Angular CLI
    • VS Code is recommended for various IDE support
    • Test support
    • Embrace W3C standards (animations, components, form validation, etc.)
    • , etc.
  • AngularThe eight main building blocks of:
    • The module
    • component
    • The template
    • metadata
    • Data binding
    • instruction
    • service
    • Dependency injection
• RxJsWhat is?RxJsBasic use of different programming methods
• zone.jsWhat is? toAngularWhat to bring
• flex-layoutWhat is? Are you using Flex
• ngRxWhat the hell is that? Why haven’t you heard of it
• , etc.

Most Angular documentation covers this. With a basic understanding of Angular, we can follow the documentation to get started and write a Hello World application.

• Install the Angular CLI correctly and have fun
• Complete the official website tutorial – Hero guide
• , etc.

PS:

1. Angular relies heavily on and recommends TypeScript. As of today, support for TypeScript is provided by all front-end frameworks and backend NodeJs frameworks.
2. Rx is also heavily relied upon and recommended by Angular. Rx is available in multiple languages, and learning its core ideas and concepts allows you to seamlessly switch languages.

Step 2 Getting Started

You might think that the front end deals most with THE UI and needs a complete library of UI components. Does Angular have one? Don’t worry, Github currently has a large library of UI components. There are a collection of resources on Github’s website, of which UI components I am familiar with are:

• The official presents Material2
• Ali NG – ZORRO
• The bootstrap style NGX – the bootstrap
• Semantic UI style Semantic UI
• PrimeNG Style Prime Faces
• Jigsaw puzzle jigsaw

Github starts with NGX – or (ng2, ng4, etc.) are Angular related resource modules. Pick your favorite and use them.

Flourishing ecology is the vitality of a framework. When you know enough about Angular, you can’t wait to try it. Here’s something fun to do with Angular’s third-party UI components and dependencies:

• Write a TodoList (the first thing I learn a new framework, is to write it, it is a small small everything, looks simple, involves a lot of knowledge, but also can quickly familiar with the simple application of a framework)
• Set up a personal blog website (complete login and registration using form verification system, with routing module, Http module, etc., to make the first complete SPA application)
• Build a complete background management system (background management system involves a lot of content, Ant Design Pro is a good imitation object, it is the current preview version using React, can be used with Ali ng-Zorro (although the function is not as powerful as the React version, but enough)
• Adapt personal blog sites using Angular SSR in conjunction with Universal
• Call some website API to do PWA development
• , etc.

Angular doesn’t have to do all of the above. Angular can do almost anything other frameworks can do, and in some cases better.

Step 3 Mastery

At the moment, learning the Js framework can’t just be used. At this point, we need to go back to the core Angular API usage. In other words, read the Angular API documentation. Document reading is an essential skill.

Step 4 Proficiency

• More practice. Whether it’s a core module or an external module, try to solve problems with Angular and replace code written in other frameworks.
• Read the source code. By reading source code, I don’t mean reading Angular core code. At this time, pick some UI framework source to read, select some specific functions, this module code is usually not much, clear responsibilities, you can also learn the source code, better organization of your code structure, a lot of posture. Such as:
  • CDK (ng-Zorro also relies on CDK, a set of useful functions packaged in Angular Material2 that you can use to build your own wheels)
  • Compare the implementation of one of the UI frameworks I have cited to see how different they are. (See some API practices)
  • , etc.

Step five: Play

Stick to step four. When using Angular, you don’t have the right module options or the modules you choose don’t work as well as you would like, you can create a module or modify the one you don’t like, open source your own module or PR it on Github

Step 6 Give up

• More practice. Three steps to success: stick to it, be shameless, stick to it, be shameless. Code is also practice.
• Read Angular core code, design patterns, object orientation, data structures and algorithms, framework design, etc. Necessary to improve
• Pay more attention to the great people on Github

Write in the last

Learning other technologies, front-end frameworks are similar steps, understand -> get started -> Master -> skilled -> play -> Unknown? Give up: Mastery

Is to give up or master, just depends on how persistent you are, there is no shortcut to success.

Boy come on!