Building a simple dashboard using Angular Material
What you’ll learn
- Using Figma as a supporter to Angular, CSS code generator
- Basic unit testing in Angular apps
- Building a basic app in Angular
- Angular Material
- We are going to cover all that is needed, programming skills may be of support
“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
You may want to see the article “Computer programmers behave like drug addicted” Jorge Guerra Pires, PhD Published in Geek Culture, regarding bad reviews here.
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!
Good studies! Learning is a journey that starts with wanting to learn!
About my past experience and expertise
I have done a postdoc where I have developed a platform in Angular from scratch, alone as programmer, on the Angular part. See “Galaxy and MEAN Stack to Create a User-Friendly Workflow for the Rational Optimization of Cancer Chemotherapy, published in Frontiers in Genetics”.
I have a project called IdeaCoding Lab, and write to Medium on Angular.
Feel free to Google me!
Who this course is for:
- Programmers wanting to learn Angular, for building frontend
- Researchers waiting to build apps for their scientific computation
- Angular programmers wanting to learn Figma
- Angular programmers new to unit testing