This project is a login page built with Angular, created with the intention of exploring and learning more about the framework.
Angular is an open source, JavaScript framework developed by Google and used to create SPA (Single Page Applications) and extend HTML with powerfull features, uses HTML's syntax to express the application's components clearly. It follows the MVC (Model-View-Controller) design pattern, wich helps to separate business logic, data presentation and user interaction. Angular and JavaScript bring structure and consistency to web application development, and provides scalability and maintainability. Features of Angular:
-
Document Object Model (DOM): Treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document. Angular uses regular DOM. This will update the entire tree structure of HTML tags until it reaches the data to be updated.
-
TypeScript: Angular is written in TypeScript. It's a superset of JavaScript and offers excellent consistency for the code, improves reliability and maintainability of the application. It introduces type checking of variables, function parameters and return values, this helps catch potential errors during development and code navigation.
-
Two-Way Data Binding: One of the key features of Angular is the ability to automatically sync data between the model (JavaScript) and the view (HTML). This means that when data is updated in the model, the view is automatically updated, and vice versa. This simplifies data management in the application and reduces the amount of code required to maintain synchronization. This powerful feature enchances productivity and helps keep the UI and data model in sync, resulting in a more seamless and interactive user exeperience.
-
Directives: They are special markers that allows to extend the HTML with new behaviors and functionalities. They are used to manipulate the DOM, add logic, handle events, and do data binding. Angular provides a rich set of built-in directives such as ng-repeat, ng-show, ng-if that can be used to create dynamic page interactions.
-
Dependency Injection: Is a way of managing dependencies between different components of the application. With dependency injection, the developer can declare the required dependencies for a component and the framework itself takes care of providing them when needed. This facilitates code modularization and component reuse.
-
Routing: The framework has a built-in routing system that allows the creation of an SPA with multiple views. Defining different routes to different URLs and loading the correct components based on the current route. This allows to build apps with smoother page navigation and a more dynamic UI.
-
Testing: Angular was designed with testability in mind. The framework itself provides features to make it easier to write unit tests and to integrate these tests into your code. Ensuring that the application works correctly and behaves as expected in different scenarios.
Both Angular and React are popular JavaScript frameworks used for building web applications. While they have some similarities, they also have distinct features that set them apart. Here are some of this differences:
| AngularJS | ReactJS |
|---|---|
| Open-source JavaScript framework developed by Google | JavaScript library developed by Facebook |
| Follows the MVC (Model-View-Controller) design pattern | Follows a component-based architecture |
| Uses two-way data binding for automatic data synchronization | Utilizes a unidirectional data flow |
| Manipulates regular DOM for updating HTML tags | Utilizes a virtual DOM for efficient updates |
| Provides built-in routing system for single-page applications | Does not have built-in routing (requires third-party libraries like React Router) |
| Emphasizes testability with built-in features for unit testing | Extensive ecosystem of third-party libraries and packages for rapid development |
| Offers directives to extend HTML with additional functionality | Focuses on creating reusable UI components |
| Suitable for building large-scale applications with extensive features | Suitable for building modular and flexible UI's |
| Strong tooling support for development and maintenance | Lightweight and flexible approach |
| Supported by a large community and has extensive documentation | Supported by a large community and has extensive documentation |
Angular is a comprehensive framework that offers a complete solution for building large-scale applications with extensive features and strong tooling support. React, focuses on building reusable UI components and provides a more lightweight and flexible approach.
 Pedro Vinicius Messetti |
|---|