When Google launched the “new” Angular (formerly Angular 2+), the naming convention caused some initial confusion. To clarify: “AngularJS” refers strictly to the legacy 1.x framework. Modern Angular supports TypeScript, JavaScript, and Dart—though TypeScript is the industry standard and my personal choice.
Here is the learning path I recommend for anyone starting with modern Angular:
1. Start with the “Why”
Before diving into code, read the introductory sections of the official documentation. Understand what problems Angular is designed to solve (e.g., enterprise-scale SPA development) and how it integrates with TypeScript.
2. Learn the Language: TypeScript
Since Angular is built on TypeScript, familiarity with the language is non-negotiable. Skim the TypeScript Handbook. Focus on its object-oriented features, interfaces, and how it acts as a superset of JavaScript.
3. The “Tour of Heroes” Tutorial
The official tutorial is excellent. It walks you through building a real application, covering routing, services, and data binding in a logical flow.
4. Fundamentals and Beyond
Once you’ve finished the tutorial, dive deeper into the “Fundamentals” and “Advanced” sections of the documentation. After completing the basics, you’ll have enough knowledge to start contributing to real-world projects.
5. Internalize the Core Pillars
Keep these five concepts in your mind as you build:
- Modules: Organization and lazy loading.
- Components: The building blocks of your UI.
- Pipes: Data transformation.
- Directives: Adding behavior to the DOM.
- Services: Handling business logic and data sharing.
Pro-Tip: Revisit the Docs
The official documentation isn’t a “one-and-done” read. It evolves with the framework, and your understanding will deepen as you gain more experience. Revisit it whenever you face a complex architectural decision—it remains the most authoritative source.
Recommended Resources
Websites
- Angular Official: angular.io
- TypeScript Official: typescriptlang.org
Books
- ng-book: Often cited as the “In-depth Bible” for Angular.
- Angular Authoritative Tutorial (Chinese Translation): A great alternative if you prefer reading in Chinese.
Community Projects & Demos
- angular-starter: A great boilerplate for project structure.
- ngx-admin: A sophisticated admin dashboard template that shows what Angular is capable of.
- NiceFish: A well-known Chinese community project for learning Angular.
