Take a brief look at the example application used in this course to demonstrate migrating your Angular 2 application to a widget-based architecture.
- Throughout this course, we'll use this application as our sample. It's a simple app that displays a list of available users that are online right now. I've opened the source code here in Visual Studio code. Our list of users is displayed using the user list component and user list template. When the component is initialized on page load, it requests the user list from our custom user list service inside the ngOnInit method and attaches the response to our user variable in the component.
In our user list template, we iterate over each user using the ngFor directive displaying each result as its own unordered list item. When our app loads in the browser, users have the ability to filter the list of users by name and the UI updates accordingly, thanks to the on filter method in our component. Our job in this course will be to rewrite our Angular application to work inside Laravel, a popular server side framework written in PHP. We're using Laravel for this course because I'm familiar with PHP and the Laravel framework.
But the strategies and techniques we'll look at work with other popular server side frameworks as well. Transforming your Angular 2 single page application into a widget based application takes time and careful planning. Every server side framework is unique and I encourage to coordinate with your team to create a detailed game plan before rewriting your Angular code. Our user list service is currently receiving information about the user list from a static file called mock users, located in the mock folder in our app directory.
We're using a static file to keep this course focused on the transition from a single page application to widget based architecture.
- Single-page applications and widget-based applications
- Creating a new Laravel project
- Moving Angular files into Laravel
- Migrating Angular routing and Angular modules
- Using global variables
- Adding stateless API routes
- Using basic REST requests
- Using route parameters in controllers