Top Features From My First Adventure With Angular
Date: Friday, February 9, 2018
Modularising a Website
In order to demonstrate the usefulness and modular-style of Angular, take the example of a standard Google Calendar below:
Traditionally for the large grid, you would write the HTML for each individual cell, leading to a lot of duplicate code, but with Angular, you would create a generic cell component that reads data from a source (say appointments, the date etc.) and would insert ‘x’ number of this component based on the source data available. This offers a huge advantage over a standard, static HTML page which would have the markup code for each and every cell, then each cell would need to have a specific reference to specific data. Approaching the creation of pages in this fashion reduces the development time necessary and promotes future readability, as it will be easier to read through much shorter code to see the flow of data, than the equivalent HTML which may be up to 31 times longer in our calendar example.
At the start of my first client project, we discussed which HTML elements should be modularised into components from some website design mock-ups and the advantages and disadvantages of doing this to each. For example, if two elements needed to interact and rely on each other’s data, then it would make more sense to make them either into one component or abstract the data/ data-transfer out through a service/ parent component.
Some components included a calendar-like page that required many similar cards each with its own modal comment and file upload system and also simpler implementation of modularity for table rows. For the table, rather than typing the markup, styling and content for each cell, I was able to define one row and then include a reference to data in an array, and with the respective Angular notation, it would insert the rest of the rows for me from my row ‘template’. Later, when I had to modify the table and shake the data and format up a little, I was able to just edit the one row to propagate my changes throughout the whole table rather than many, many rows. Needless to say, features like this made me very fond of Angular.
Components & TypeScript
I have found that Angular offers of a range of great features that have both sped up and made it easier to develop my first Village Software project, it provides great support for various design patterns such as single-page applications where parts of the page are dynamically loaded in rather than serving a whole HTML page to change the content. In the future, I would like to further experiment with, and become more familiar with, Angular to use it to its fullest potential.