FAQs Angular Maximilian Schwarzmuller

Summary

This video answers common Angular questions around versioning, project setup, debugging techniques, component communication, state management with Redux, deployment, and more. It provides an overview of the Angular framework evolution from AngularJS to modern Angular, recommending using the Angular CLI for project scaffolding. It stresses the importance of reading error messages and using browser developer tools for debugging. For passing data between components, it discusses property binding and RxJS subjects. It also covers persisting state with local storage vs databases and hosting considerations.

Takeaways

• 😊 Angular 2+ is a complete rewrite of AngularJS 1.x with a different architecture focused on components.
• 👍 Use the Angular CLI to set up projects - it provides a flexible workflow and optimizations.
• 💡 Read error messages carefully - they often provide useful hints on fixes.
• 🔎 Use source maps and tools like Augury to debug Angular apps.
• 🚀 You can use Angular with any backend language like PHP, Node.js etc. through REST APIs.
• 🔀 Use services like RxJS Subjects to communicate between components.
• 📥 Persist state across page reloads with local storage or a server database.
• ☁️ Angular apps can be hosted on static hosts like AWS S3 or Firebase.
• ⚙️ Configure your server to return index.html for 404s so client-side routing works.
• 🌐 Anyone can view client-side JS code, so don't put sensitive data there.

Q & A

What was the major reason the Angular team decided to do a complete rewrite and release Angular 2?

One of the major reasons was performance issues that could happen in bigger AngularJS apps. Angular 2 focused more on creating single page applications and is highly component driven to address these performance challenges.

Why do we have version numbers higher than Angular 2 like Angular 4, 5, etc.?

The Angular team adopted semantic versioning which has major releases, minor releases and patch releases. So the version number indicates if there are major new features introduced or just bug fixes.

Is it possible to use Angular without the Angular CLI?

While theoretically you could do the compilation and bundling in the browser, it is not recommended for performance reasons. The Angular CLI gives a really good and flexible workflow so it is highly recommended to use it.

How can data be passed between non-parent/child components in Angular?

Services like ones using RxJS Subjects are commonly used to pass data between non-parent/child components. The data can be emitted through the Subject in one component and subscribed to in another component.

How can state be persisted across page reloads in Angular apps?

Local storage and server-side databases are two main ways. Local storage stores data in the browser across page reloads. A database persists data on a server that the client can access.

Can Angular be used with server-side languages like PHP and Node.js?

Yes, Angular can be used with any server-side language or framework. Angular runs in the browser and the server provides a REST API that Angular sends requests to and receives responses from.

Why do my routes break when deploying an Angular app?

The server needs to always return the index.html file for routes to work on refresh and navigate. So the index.html needs to be configured as the 404 document on the server.

Can my Angular app code be protected from being visible to users?

Unfortunately no. Since the JavaScript code runs in the browser, anyone can view the sources. Information that should not be visible should not be included in the code.

How are third-party CSS and JavaScript libraries used in Angular apps?

They can be imported via index.html links/scripts or installed via NPM and imported into TypeScript. For JS libraries without types, declare var or declare module can allow use.

Why was Angular 2 a complete rewrite and not an update to Angular 1?

Angular 2 was built with a different focus on building single page applications and a component driven architecture. It inherited some concepts but is almost entirely new compared to Angular 1.