This is not about the technicalities of Angular, Typescript or JavaScript. This blog is about the Basic view of working with Angular and some resources to implement tasks saving your time.
Working with Angular may seem quite complex for someone who has worked a lot on React or someone accustomed to using JavaScript.
This whole experience is nothing but just an transition which developers face while using typescript after using a lot of JavaScript.
Remember:-
-->Typescript basically is like sorted books in a bookshelf
and
-->JavaScript is a big pile of books unsorted.
But, the core concepts of JavaScript does not change anyways. One advantage of typescript over JavaScript is that your time in debugging the code or resolving errors is little bit less in typescript compared to JavaScript because of it's sorted and well structured architecture.
I have used angular for a while now, and I can say this that:
"as much as I thought in beginning about angular being a less developer friendly (that's a word I like to use, inspired from the word "not user-friendly") than React it is much better than I expected it to be".
Angular provides a lot of liberty in terms of handling the variables and it's dynamic nature (thanks to TypeScript). Now this may very well vary for people according to their requirements. The more specific and clear your vision are regarding what functionalities you want to integrate and what type of platform you might want to create, the more you will be able to have clear picture of what you want to use for your project.
Some advice I would like to give if you want to learn angular:-
A lot of times we tend to follow official documentation, but those who have done hands on and used the frameworks in projects know very well that, it is not a good advice to refer official documentation of libraries example: React and Angular both have documentation which is not suitable for beginners to read. A short length Youtube tutorial may be better for starting and you can transition to documentation after having your basic concepts clear.
Try to make small projects (covering all basic concepts) as much as you can
(Note: You need to finish all the small projects that you do, do not just start and stop in between and say this is simple I don't need it.
Finishing up things is what gives confidence to start something new)
, and I know people out there who consider small projects which are very basic as some form of time-waste. But trust me, doing more small projects of Angular, React, BootstrapCSS, JavaScript, Typescript, or any language/library/framework is not about making a great project they are about making one go through the process so that the repetition would make you know the basics learn by heart, it is not mugging up it is just making the mind used to the basic tools which are available to us in using these huge libraries.
Some Reference material for implementation purpose in angular is something I have shared down below, Remember, these materials are not for Learning Angular as I mentioned they are for implementation purpose
1) Convert CSS angular app to SCSS angular app
The above plugin npm schematics-scss-migrate will change your already created CSS-based Angular project into SCSS-based Angular project by just few commands.
2) Server Side Pagination implementation in Angular -1
3) Server Side Pagination implementation in Angular -2
You can implement server side pagination while dealing with the data rendering from API's that send huge amount of data and we want to render only few amount of that data. In this case you can modify your API's to send limited amount of data and server side pagination will handle the front-end to render limited part.
4) Export and Download the table list data in CSV format in Angular
You can export and download your "whole list of the data rendered on the website" and also "all the data from the records coming from API response" into CSV/Excel/PDF format using above reference in Angular.
5) Apex Charts implementation in Angular
When you want to use the numbers and showcase them in form of visuals, charts, dashboards and statistics, you can use the very well know JavaScript library ApexCharts for that.
6) SyncFusion Essential JS 2
Angular possesses a lot of different form of library installation options. You can use normal Bootstrap-CSS or you can use Ng-Bootstrap. In the same way, SyncFusion is collection of typescript based components which can be used in angular by there installation.
Note: Do not use multiple libraries that are used for same functionalities. example: do not try using bootstrap-CSS and Ng-bootstrap both at the same time on your components in angular, it may contradict or override each other unexpectedly.
7) Bulona Dashboard theme Angular
8) Modern-Admin Dashboard theme Angular
The collection of Pure BootstrapCSS and Angular in above mentioned dashboard theme is an excellent source to use as reference for your projects. They are basically an angular app with almost all Bootstrap-CSS functionalities used in it visible on dashboards.
9) This-is-Angular DEV
While facing issues in learning about concepts you can refer the community work of the above mentioned DEV account.
If you want me to share more insights about angular or typescript do ask it in the comments, and if you have some more things to share go ahead and help the community grow.
One bonus resource, Recently, I loved watching the conversation of Lex Friedman podcast with
1) Guido van Rossum (creator of Python):- https://youtu.be/DibH4GRRWQU
2) John Carmack (co-founder of id Software):- https://youtu.be/rczu8kc8JZA
Do watch the podcast, it's really insightful.
Website: Jimmy Taravia
Twitter: @Jimee_himself
Github: Jimmy-Taravia2001
Credits for the Cover Photo by Brett Jordan from Unsplash
Top comments (2)
I should consider to learn angular after reading this is ... 😃
Sure. I would be waiting to know your experience.