Starter Kit for Angular Geeks

Some say developing Angular Material projects is all about wash-rinse-repeat (create àimport à authenticate àconfigure àexport), that’s why you need something that does all the rudimentary steps for you in one go, so you can focus on the more important ones.

For starters, Angular is a popular JavaScript-based, open-source, front-end web framework that enables developers to build powerful, dynamic web applications. Angular Material is a UI component library specifically targeted at Angular developers. Angular Material components are used to build functional yet attractive web pages and web apps while adhering to modern web design principles.

These components can be used across devices, platforms, screen sizes, and resolutions and are fully responsive. The Material UI library eliminates the need for creating multiple style sheets and adding unnecessary code.

Nitor Infotech has built a starter kit for Angular Material projects and it can cut down both your effort and time invested in it by 80%.

The standardized code architecture helps eliminate unnecessary code, improve loading times, and enhance overall functionality. Elimination of the need to write extra code helps improve your developer’s productivity.

Let’s count backwards, no I am not trying to hypnotize you, instead of going the usual way, I am going to name the benefits first and then tell you what we offer, that way you have good news followed by great news.

Benefits

Here’s a look at what boxes Nitor Infotech’s starter kit checks off. It helps you:

1. Reduce initial project setup time by 80%
2. Cut the need to import components explicitly into your modules to ZERO through
3. Integrate with any backend API via data service implementation in the least amount of time
4. Make minimum updates to stylesheets
5. Eliminate the need to restructure the entire code for small fixes

Features

Now that you know the benefits of using Nitor Infotech’s starter kit, let me go ahead and take the liberty to explain the features to you.

1. Built with Angular and Material Components: All the standard components from the Angular material UI component library, are included as part of the starter kit, and integrated with the Shared module . This means that, repetitive work of importing material components in individual modules is avoided and all the imports are at single place. You can change a few lines of the stylesheet to alter the theme, without needing to update the entire stylesheet.

2. Husky Git Hooks Support:Elaborating on it a little further, this template is configured with Husky git hooks, which can be used to avoid bad commits and pushes. On any commits, it validates the application for lint errors. On any push to remote repositories, it validates the application build package. This works as an additional pre-check before running the build via a pull request tool. For example, PR in Azure DevOps.

3. Shared Module Support:I did talk about this briefly on top, but let me tell you a bit more here. You can import common directives and components from one module into another, without needing to rewrite.

Let me explain it a little, this starter kit includes a Shared Module which houses all the common components used across the solution. The common components, part of the shared module, are already exported. Thus, the components need not be imported individually in separate modules. The Shared module is imported in App module, which internally imports all common components, models, services, material imports and directives.

4. Dynamic Configuration Support for CI/CD Pipelines: Pick up individual configurations (such as a username) from a single config file from different environments. Configurations for the application are managed via configs.json file.

These configurations are read via a service at the time when the application loads and is made available to all the modules via Config loader service.

The configuration file can be easily modified by any CI/CD tools and can be released to multiple environments with different configurations. E.g. Using XML variable substitution in the Azure Release pipeline.

5. Shared services Approach: Use common, prebuilt services for authentication, API calls, and project constants. Few of the standard services like authentication, data, and constants service which almost all applications need are already included as part of shared module. Data service is configured to make GET/POST/PUT/DELETE API calls, and is extensible to any other HTTP verbs. Config loader service is injected into the data service to read configuration variables like API URL.

Nitor Infotech’s starter kit was devised after having explored all the proven standards and learnings from various projects. So, it is perhaps the best way for you to skyrocket your productivity.

For any other questions you might have, write to us.

P.S.: Stay home, stay safe. Thank you to all COVID heroes battling it out there. And, on a side note, remember, truth can only be found in one place: the code.