My Learning Angular as a Backend Engineer - first time

Recently I wanted to try hot new framework called AngularJS. As someone who's spent years writing backend APIs, I thought - hey, maybe it's time to see whateveryone is talking about (in Frontend)  So I decided to write down some key points and insights from my experience of learnig into AngularJS.

Coming from a backend world where everything is neat code and database queries, my first reaction was like "Whoo, what's all this DOM manipulation stuff?!" Before AngularJS, I had used some jQuery and writing tons of JavaScript to update few webpages. But then AngularJS comes along and changes everything we did.

Some cool things I found while learning:

  1. Two-way data binding is amaaazing! Just add ng-model to an input and boom - my JavaScript object updates automatically. No more manual DOM updates! When I first saw this working I was like "why didn't we have this before?!"
  2. Directives are pretty neat. At first they looked scary (what's all this $scope stuff?), but then I realised - hey, this is just like writing small, reusable components. As a backend dev who loves clean code, this made me happy!
  3. Services are familiar territory, Finally something I understand! Used them to organise all my API calls like:
app.service('UserService', function($http) { this.getUsers = function() { return $http.get('/api/users'); }; });

Things That Made Me Go "Hmmm..."

  1. The learning curve is STEEP! Like, climbing-Mount-Everest steep. The concepts of dependency injection and scope inheritance had me scratching my head for days.
  2. Don't even get me started on debugging. When something goes wrong, the error messages can be... interesting. Had to learn browser dev tools pretty quick!
  3. Performance issues hit me when I started building bigger apps. Two-way data binding is cool until you have too many watchers on the page.

Tips for Other Backend Devs

  1. Start small! Don't try to build a complex app right away. I made this mistake and got overwhelmed fast.
  2. Keep your backend hat on - organizing code well is still super important. Break things into services just like you would with backend code.
  3. Use the official tutorial. I tried jumping straight into coding and that was... not smart. The official docs are actually pretty good!
  4. Take breaks! When you're stuck on a concept, step away. I solved so many problems during coffee breaks.

What I Love About AngularJS Now

The best part? As a backend dev, I finally feel like I can build complete applications! The way AngularJS handles API integration is just NICE. No more feeling lost in frontend land.

Here's what I especially enjoy:

  • Writing clean, organized code (just like in backend!)
  • Easy API integration with $http service
  • Building reusable components with directives
  • Not having to write jQuery anymore (seriously, this is huge)

I'm not going to lie - there are still lot to learn to be better at Angular, you might find millions of good learning resources(free) online..  I think AngularJS has opened up a whole new world of possibilities. Now when frontend devs talk about scope inheritance or digest cycles, I can actually contribute to the conversation ;) 

Next up, I'm planning to build a small project to practice more. Nothing too fancy - just a simple dashboard that uses our company's APIs. Hope I can write something about it too

Remember friends - if a backend dev like me can learn AngularJS, you can too! Just take it step by step, one step at a time :D 

Comments

Post a Comment

Popular posts from this blog

MDK Hospital opened in Horana

Image
Horana is getting a brand new private hospital! The M.D.K Healthcare Center & Hospital has just opened its doors on Anguruwathota Road, right next to the HNB bank branch. For years, many had to travel to Colombo for certain medical treatments, but hopes with new private hospital this will change. This new hospital, built by local businessman Mr. M.D. Piyananda Kularathna, comes with all the modern medical equipment we've been hoping for. It's wonderful to see such a major investment in Horana community's health. To makes this even better, I hope they have brought in highly skilled doctors and medical staff. No more long trips to Colombo for routine treatments! The hospital looks quite impressive too - modern and clean, just what you'd expect from a proper healthcare centre. The location is perfect as well. Being on Anguruwathota Road means it's easy to find and get to, whether you're coming from the town centre or surrounding areas. I've already notice...
Read more

Disable single quote Within Forms

This is a good method taught to me by my friend to disable any character in the keyboard Within Forms in your web page/ web application. A simple and effective method to disable specific characters (like single quotes) within form inputs on your webpage or web application. The Code <!DOCTYPE html> <html> <head> <script type="text/javascript"> function stopRKey(evt) { // Normalize the event object evt = evt || window.event; // For debugging - shows the keyCode console.log(evt.keyCode); // Block single quote (39 or 222 depending on browser) if (evt.keyCode == 39 || evt.keyCode == 222) { return false; } } // Attach the event handler to the document document.onkeypress = stopRKey; </script> </head> <body> <h3>Test Area</h3> <textarea rows="5"></text...
Read more

My Docker learning short notes

I had this note from long time in my Evernotes, I thought I should have post it here, so someone might find it useful. This is just Docker basics and commonly used commands that I've collected over time. Why Docker? Docker enables containerization - running applications in containers instead of virtual machines. Important notes: Containers are not VMs - they have different benefits Provides standardization across environments Enables continuous deployment from development to production Ensures consistency using the same container image throughout the deployment process Key Benefits: Self-contained environments Isolated from other applications Runs almost everywhere (especially in the Cloud) Small and lightweight Highly scalable Fast deployment Core Concepts Images An image is an executable package containing everything needed to run an application: ...
Read more