Angular

About Angular

Angular is a front-end development framework that is maintained by Google. It is very up-to-date, and the most recent major release was on November 4th, 2021.I have been using it a lot lately while on my second MECOP internship. It has a command line interface that is extremely helpful for development. Creating new components becomes a breeze because it sets up everything for you. Other similar tools include Vue.js and React.

Why I like Angular

Initially, I found Angular to be difficult to work with because there were many files to keep track of. It has a steep learning curve, but now it might be my favorite front-end development framework. Angular’s documentation is stellar, which makes it easy to get a project going. I have also become a huge fan of TypeScript. It is way easier to debug my code and maintain good organization with a strongly typed language. The large number of files that initially overwhelmed me are now appreciated because they help me maintain good objected oriented programming. Overall, this framework simply feels professional and robust. I also enjoy how many community tools people have made for it. Angular relies on Node.js, so you have access to a plethora of NPM packages. Some of the ones I have used with Angular are ng-select, chart.js, and ag-grid.

Highlighted Feature: Angular Routing

Angular routing allows for a user to experience different content based on the url they are at without actually serving them a new page. This is because the Angular router relies on updating the view. The way I have used this is to have components for the header and footer that are always rendered, then the Angular Router determines what content is rendered in the middle. The HTML structure for this can be seen below. Essentially, the component that replaces the <router-outlet></router-outlet> depends on what the url is.

HTML Structure

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Leave a comment

Your email address will not be published. Required fields are marked *