Angular Frontend Update

The following information is about our Frontend Migration project.

The frontend migration project is on the branch refactor/update-angularjs-to-angular8, there are also several sub branches that fork off of the aforementioned branch that we have used for development. However, the most stable version of the frontend migration is in this branch.

The frontend migration project had the goal of updating the look and feel of the project to be more modern as well as improve the maintainability of the project as a whole. We have create a framework in which to assist in developing the project and create a good looking and easy to modify project. We have added a service that handles the authentication and route guards to prevent access to the existing pages. We have create a wrapper around the angular material table that allows for more flexibility and selection of items.

All of these features have been added to assist in updating and moving the project from the existing frontend in AngularJS (which will be deprecated on June 30th of 2021) as well as to help any new developers not familiar with Angular to pick up the project and see some of the best practices and systems already in place to use as examples. While they are not perfect, especially when it comes to keeping services as singletons, we did our best to follow the practices out lined in the Angular Style Guide (see below).

This project still has a lot left before it will completely replace the existing AngularJS project but it will be far easier to maintain once it has been completed than the AngularJS project will be. With that being said I would recommend only adding new features to the Angular project and only doing maintenance/minimal features to the AngularJS project. Until the Angular project has reached Feature Parity with the AngularJS project.

System setup

While I could try and explain how to set up your system to work with Angular I feel that the Angular team has done a far better job than I ever could and so will just point you to see their docs. Rather than try and explain how to do what they have already done.

See Links below for a link to the Angular Docs

Why should we Update the front end

1. AngularJS will be deprecated as of June 30, 2021.
2. Angular9 provides strict typing with typescript for both HTML templates and Javascript controllers
3. Typescript is the new defacto standard for Angular/AngularJS and is becoming the standard for others such as Vue.js and React
4. Angular provides best practices out of the box as long as you use the cli... USE THE CLI
5. Angular has an easy and maintainable way to do services and lazy loaded modules
6. Angular has tree shaking for modules (this is still a WIP for the angular team)
7. Angular has tools meant to help keep your angular project up-to-date as long as you don't fall to far behind and follow the best practices
8. Angular has a set of components know as Angular material that help you build a clean UI that follows the best UI practices laid out by the Google Material UI team
9. Angular as easy to use Route Guards that prevent unauthorized access to pages

Best Practices and Documentation

• How to setup your system
• Angular Official Tutorial
• Angular Google Material Design
• Angular Style Guide and Best Practices
• Angular CLI Documentation

Photos of our UI

Dashboard

Add New Course

Course Details

Course List