Introduction to Angular JS & Single Page Application for beginners

This tutorial is the first in a series of tutorial about Angular JS as a powerful JavaScript Framework.

Let’s talk about what Angular JS is.

Angular JS is a JavaScript framework for creating single page applications. When you hear about it, the concept seems too complex, however if you already familiar with Modal View Controller (MVC) application frameworks it is very easy to learn Angular JS.

Let’s see what are of the main concepts behind Angular JS is.

First of all Angular JS is a framework, that is to create an application you follow a set of standard methods and utilize the code and libraries already provided by the framework and fast track your development by writing less codes.

Angular JS offers templating, two-way bindings, filters and more. If you’re familiar with jQuery you will find Angular JS very easy and useful as they are very compatible to work together, in fact a lite version of jQuery is used within Angular.

Angular JS is designed to allow programmers to create single page application which means regardless of the size of your application, browser will load a single page and additional content is loaded using Ajax or partial templates as needed which means faster loading.

Angular JS has many features and advantages. Some of these features includes:

Templating engine:

The templating engine lets you write any html code as a template where you can place a temporary curly brackets like {{data}} and Angular JS will replace it with data once it is rendered on a browser. Angular JS even lets you to construct a template on the fly in your JavaScript code and use it.

Following is an example of how a Angular JS app is look like in HTML.

This is simple ToDo Application. as you can see the models and objects that are placed between two curly brackets will be replaced by proper data when the page is loaded.

<!DOCTYPE html>
<html ng-app="myApp">
<header>
</header>
<body> 
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1>Todo</h1>
            <div ng-controller="TodoCtrl">
                <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a
                    href="" ng-click="archive()">archive</a> ]
                <ul class="unstyled">
                    <li ng-repeat="todo in todos"><input type="checkbox"
                        ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span>
                    </li>
                </ul>
                <form ng-submit="addTodo()">
                    <div class="col-lg-6">
                        <div class="input-group input-group-lg">
                            <input class="form-control" type="text" ng-model="todoText"
                                size="30" placeholder="add new todo here"> <span
                                class="input-group-btn">
                                <button class="btn btn-primary btn-lg" type="submit">Add</button>
                            </span>
                        </div>
                    </div>
                </form>
 
            </div>
        </div>
    </div>
</body>
</html>

Data Binding and DOM handling

Unlike traditional HTML application you don’t have to listen to event handlers using JavaScript to manipulate DOM on certain events, with Angular JS the DOM is automatically gets updated once the data is updated or new data is loaded using Ajax. This is called two-way bindings which is one the most powerful features of Angular JS. Looking at above example, each object or data between the curly brackets are binding to the models data and if any data is changed the page will be updated automatically.

Built-in AJAX functionality

Angular JS comes with built-in Ajax functionality which helps you easily load data from your server anytime and anywhere on your application.

MVC Architecture

Angular JS is a modern JavaScript framework and like many other modern framework comes with standard features of object-oriented programming and Modal View Controller architecture.

Models

In a MVC architecture your Models are you data represented as an object in your application hence object-oriented programming. Models can have data that comes from database or generated by your application.

Views

Views are how your data are displayed on web page. This is usually done using templates so basically a view is a template that is bounded to one of the models.

Controllers

Controllers are JavaScript functions that controls any interaction between models and views. Basically models are loaded and set to views using controllers.

 

Angular JS comes with some unique features as well that makes it so much more powerful so let’s talk about come core features.

Directives

Directives are custom HTML attributes which are similar to commands that can be used throughout your HTML code. The directives always starts with letter ‘ng’ followed by a hyphen ‘-’ and name of a command. For example to tell Angular JS your HTML is an angular application we need to add a directive to HTML tag like <html ng-app=”myApp”>

Filters

Angular JS has special filtering syntax so you can use it to organize data automatically or easily change, sort and reorder data elements.

Modules

Angular JS lets you break up your JavaScript code into different modules which can be reused in any other Angular application and it will make it easier to manage and test your source code. Each modules can have different configuration and templating which makes it perfect if you have different users or multiple application layers.

Routes

Routes are a must have feature in any single page application.  Angular JS routes lets you to give different url patterns to different templates. It is similar to how browser loaded different pages using URLs but in Angular JS only part of the page gets updated when we change the routes.

In the future tutorials I will discuss each of these features in more depth and details however you can find very detailed documentation here: https://docs.angularjs.org/guide/introduction 

Author: Ali Shirzad

Share This Post On

Trackbacks/Pingbacks

  1. Angular JS & Single Page Application Part 1 - TECHPRD - […] you don’t know what is Angular JS please read my previous tutorial here to learn the basic concept of…

leave a comment

%d bloggers like this: