Angular, Unit Testing, and Figma

“Every web developer relies heavily on one web framework or another

(sometimes more if their services have different requirements) and

companies will rely on many frameworks, but each has its own pros and

cons.” Jay Bell, Greg Magolan, David Guijarro, Adrien de Peretti, Patrick Housley talking about NestJS

Angular is a Google framework: it is a Single Application Page (SPA) generator.

With Angular, you can build apps that runs on browsers (frontend), no need of backend frameworks/libraries such as Express/Node.js/NestJS. With current achievements by the Angular community, you can now do essentially anything on the frontend. Recently, Firebase, also from Google, was integrated into Angular: Firebase provides several nice features, e.g., machine learning and Google based login.

Some strong points of Angular:

1. Was designed to be tested (i.e., ideal for unit testing-based apps; e.g., Test Driven Development), the Angular creators created standard tests, and constantly release new ways of easily testing apps using their libraries. With Jasmine/Karma, you can do essentially all kinds of unit tests;

2. It goes well with other technologies also from Google, see my articles on Medium “Firebase and Angular: connect your frontend app to a noSQL database” and “Meet my project “TensorFlow.js in Angular”: working on Angular based machine learning apps“;

See my article on Medium “Does Angular really suck: why I have to disagree!“.

This is a several volumes course. On this volume, you shall learn how to build a simple dashboard, to be continued in future volumes: we are going to cover the logged-out user version. The full app is already available on GitHub, under MIT license. As a result, this course can be followed by anyone wanting to learn Angular.

This volume is quite generic, and can be followed by anyone wanting to learn Angular focused on unit testing with Jasmine/Karma.

We are going to build a page on this volume, with a footer and header, with a background. The header has an Angular Material menu. We used Figma to draw the page before it was built, and borrowed CSS codes from the Figma project.

Even though the app we built here is simple, we cover several topics:

1. Unit testing Angular components;

2. Creating Angular components;

3. Using Angular Material;

4. Using Figma alongside Angular, not just as a visual aid, but also as a CSS code provider;

Resource that comes alongside the course:

· GitHub repository with all codes divided by modules;

· GitBook with extra explanations;

· Newsletter from time to time, delivered to your e-mail box;

· Q&A section, inside the platform;

· Constant upgrades on the course, no need to buy again!

· And more, check it out!

See that the full app is already available, including the numerical part, and you can after completing the course, just go on studying the codes already on GitHub. I have published a NPM library for this app called ngx-mat-miyagi-dolab. Just give it a try: npm i ngx-mat-miyagi-dolab

Join me on this endeavor!

Would you like to know more about my thinking patterns? now my e-book is on Amazon! Look for “My selected assays from Medium on Computer programming: Angular, JavaScript, Machine Learning, TensorFlow.js and more!”

Good studies! Learning is a journey that starts with wanting to learn!