| title | AngularJS to React/Angular | ||||
|---|---|---|---|---|---|
| description | Upgrade AngularJS 1.x SPAs to React 18 or Angular 17 with TypeScript | ||||
| authors |
|
||||
| category | Code Modernization | ||||
| industry | Cross-Industry | ||||
| services |
|
||||
| languages |
|
||||
| frameworks |
|
||||
| modernizationTools | |||||
| agenticTools | |||||
| tags |
|
||||
| extensions |
|
||||
| thumbnail | https://raw.githubusercontent.com/EmeaAppGbb/appmodlab-angularjs-to-react-angular-modern/main/assets/thumbnail-gpt-image.png | ||||
| video | |||||
| version | 1.0.0 |
This lab walks you through modernizing a legacy AngularJS 1.x single-page application into a fully typed, component-driven app built with either React 18 or Angular 17 and TypeScript. You will migrate routing, state management, API integration, and UI components while preserving existing functionality — ultimately producing a maintainable, testable codebase ready for production deployment on Azure Static Web Apps.
The starting point is GlobalTravel Corp — Corporate Travel Portal, a full-featured AngularJS 1.6.x SPA that manages corporate travel workflows. It relies on UI-Router for navigation, Restangular for REST API calls, Bootstrap 3 for styling, and a Bower/Grunt toolchain — all patterns that have since been superseded by modern frameworks and bundlers.
Users are greeted by a simple login screen before being routed to the main dashboard, which serves as the hub for every travel module.
The login screen uses mock authentication, storing a JWT in localStorage to gate access to the portal.
The dashboard links to all five modules — Flights, Hotels, Itinerary, Travel Requests, and Expenses — each implemented as a separate UI-Router state.
The portal includes several data-rich modules with forms, filters, and API-driven result lists that must be faithfully recreated during the migration.
The flight search module features round-trip/one-way toggling, date pickers, cabin class selection, and dynamic search results — showcasing the complexity that must carry over to the modern stack.
Hotel booking combines destination search, date ranges, and guest/room selectors with card-based results, illustrating the rich interactive UI the legacy app provides.
The following screenshots capture the original AngularJS 1.6.x application ("GlobalTravel Corp — Corporate Travel Portal") before modernization. The app uses UI-Router for navigation, Restangular for API calls, Bootstrap 3 for styling, and Bower/Grunt for build tooling.
Simple mock login screen with an "Enter Portal" button. No form validation — authentication stores a JWT in localStorage.
Main portal hub with links to all five modules: Flights, Hotels, Itinerary, Travel Requests, and Expenses.
Round-trip / one-way toggle, origin/destination inputs, date pickers, cabin class selector, and passenger count. Search results populate below the form.
Destination city, check-in/check-out dates, guest and room selectors with a search button. Results display hotel cards with ratings and amenities.
List/Timeline/Print view toggle for managing booked trips. Shows a loading spinner while fetching itinerary data from the API.
Filterable list (All/Pending/Approved/Rejected) with search. Includes a "New Request" button and a "Create Your First Request" empty-state prompt. Shows API error handling when the backend is unreachable.
Status filter tabs (All/Draft/Pending/Approved/Rejected), search bar, date range filter, and a "New Report" button. Displays a loading state while fetching expense reports.