AngularJS for Absolute Beginners

Let's face it, writing web applications is hard. Battling to make a functional front-end is one of the biggest pain points. AngularJS eases this pain. The learning curve may be steep, but we'll break down the complexities in plain English to get you up and running in no time. By the end of this tutorial you'll be armed with all of reasons to use Angular and have built an Angular app in around 20 lines of JavaScript code.

Prerequisites

The only requirement for this tutorial is a basic understanding of front-end languages such as HTML, CSS, and JavaScript. If you've worked with jQuery before then you should be able to following along with ease.

It's all about structure

Before we get into the nitty-gritty, let's take a look at why we would want to use Angular and some of the problems it solves.

If you've ever worked on the front-end of a web app before, you've probably written code that looks like this:

$('#btAdd').on('click', function() {

  var $txtNewTodo = $('#txtNewTodo'),

      newTodo = $txtNewTodo.val(),

      $todoList = $('#todoList');

  $todoList.append('<li>' + newTodo + '</li>');

});

In the snippet above we are just simply adding a click handler to a button that just handles adding a new todo to a todo list. Even though this is just a simple example it's soaked with bad practices.

Imperative

The good news is that our JavaScript (using jQuery in this case) is unobtrusive. This means that it's separated from our HTML. The bad part is, without looking at the JavaScript code we have no idea that the button has a click handler attached to it.

This is referred to as imperative programming. The statement (the click handler) changes the state web application by creating a flow that appends new elements to a list.

In web development this can be seen as a negative because it can hide important functionality.

Direct DOM manipulation

Every time you directly insert a HTML element into a page, an angel loses its wings. The DOM is a fickle creature. Manually inserting elements like the list item, can easily be broken. If we just change one element's ID, we are completely hosed.

Global Scope

The click handler is declared on global scope. This means whenever it is referenced in any page it will try to add this event to an element with the id of "#btAdd". As the app grows this can be difficult to maintain and cause a lot of confusion.

Lack of organization

Most importantly of all, this code snippet has no meaningful structure. As we add more functionality to the app the file will just become more cluttered and confusing.

So what can we do? We need to create some meaningful and reusable structure for application. Since we are sane people, we won't implement our own framework, we'll use AngularJS.[Source]- https://medialoot.com/blog/angularjs-for-absolute-beginners/

62 Hours AngularJs Training includes MongoDB, JavaScript, A62 angularJS Training, MongoDB, Node JS and live Project Development. Demo Mean Stack Training available. For more details, visit : http://www.asterixsolution.com/mean-stack-training.html