Getting Started with AngularJS

The primary reason for posting this blog is to help beginners to follow a step by step guide (with links as guidance) to learn and develop skills necessary to code applications with AngularJS.

Developers are constantly challenged by new technologies. Being a developer, one has to upgrade his/her skills and work on technology that suits the industry needs. There exist tons of tutorials, code samples and video’s about AngularJS; with the vast resources, one can easily get lost and have several confusions and difficulties in learning.

In today’s world, one can follow various paths to learn and use a framework or technology. That’s because of the tremendous resources available in internet. But the key challenge is, technologies upgrade every now and then. A year back, developers used to code with Angular 1.*, now peoples are moving towards Angular 2.0. Here’s the key thing, how can a beginner of AngularJS can learn and understand the core concepts so she/he can easily maintain or develop applications using AngularJS is a challenging question for all. Unfortunately there is no easy way for beginners to learn AngularJS. In reality, one has to put all effort in learning the basics and deep dive into the inner working of AngularJS to get some confidence in developing apps.

I highly recommend beginners to take a look into the AngularJS documentation first as it’s the source of truth. This is the link for the same.

Once you have some understanding about the AngularJS, one would be interested in learning AngularJS with a step by step code sample. Again, I request beginners to follow the below link to learn with code snippets.

When I was learning AngularJS, just like every beginner, I happened to face lots of challenges in learning the basics. I was constantly searching for numerous tutorials, and trying to understand AngularJS through GitHub code samples. Until one day, when I came across the below “Step by Step guide to your first AngularJS app”, I thought that’s what a beginner should read and learn from code sample. The author purposely split up the articles into two parts. I would recommend the beginners to take a look into and spent an hour for each to understand AngularJS at high level. Note – The demo code which is available in GitHub.

Once you have an understanding about AngularJS, it’s time to brush up the concepts with tiny code snippets. It’s time to take a look into the W3 schools link, walks you through the AngularJS concepts with a demo code.

I would also recommend beginners to take a look into TechFunda and Csharpcorner AngularJS tutorial posts to have some more understanding about the same.

Let us learn AngularJS with code snippets. Here’s a link to learn with 50 code samples. I highly recommend this one.

Developer Tools

There’s always a question comes to developers on using the IDE or editor for developing AngularJS apps. There are several tools exist, some are paid while others are open source.

Here’s the link for 15 useful AngularJS tools for developers.

Video Tutorials

Below are some of the free video tutorials that one can go through in learning AngularJS.

AngularJS Fundamentals in 60-ish Minutes

Introduction to Angular.js in 50 Examples (part 1)

Introduction to Angular.js in 50 Examples (part 2)

AngularJS Style Guide

Once you are comfortable with the AngularJS, there’s something a beginner should and must understand, i.e. how to write a clean AngularJS code. It’s always good to learn and follow the good practices and patterns so one can enhance and maintain the application with ease. Here’s the AngularJS style guide by John Papa.

GitHub code samples

I have listed few AngularJS GitHub code samples that a beginner can download and understand on how to develop a single page application (SPA) using AngularJS.

Below are the links to get started in coding the AngularJS app. These are boiler plate or kick start code, help one to get started with ease by simply following the application structure.