AngularJS: A Complete Guide for Beginners

What is AngularJS?

AngularJs is a front-end Javascript framework that helps you to build single page web applications. It is an MV*-style javascript framework mainly maintained by Google. It can be a lot of pain in the butt when it comes to make a functional front-end but AngularJS eases this pain. It is purely front-end, hence, your server only needs to be able to ship out JSON. It provides some great features like data binding and dependency injection, filtering, expressions, HTTP requests and many more. It’s one of the hot and trending Javascript framework. Before getting started, you should at least know bit about Javascript.

angularjs-frameworkWithout further ado, let’s dive deep in it!

Embedding AngularJS in Your Application

Since, It is Javascript framework, you can embed like your simple Javascipt file.

<script src="angular.min.js"></script>

Bootstrapping The App

To bootstrap any Angular app, we need to use ng-app directive to any HTML element, that defines an AngularJS application. The ng-app directive represents the root of the Angular app and this can be used only once per HTML page. The ng-app directive marks the DOM element that contains the AngularJS application. For example,

 <pre class="language-markup"></pre>
 <h3>AngularJS: The Simple App</h3>

AngularJS: The Simple App

Here is a simple and neat example made with AngularJS which shows the model, view and controller.

<!DOCTYPE html>
<html>
<head>
 <script src="angular.min.js"></script>
</head>

<body ng-app="myApp">

 <div ng-controller="myController" >
 <h1>Hello {{ name }}!</h1>
 </div>

</body>

<script>
 // Declaring an App
 var app = angular.module("myApp", []);

 // Creating controller
 app.controller("myController", function( $scope ){
 $scope.name = "Nikul";
 });
</script>
</html>

Hello {{ name }}!

 

 

The ng-model directive binds the value of the input field to an application variable “name”.

The view simply creates a place holder where a corresponding HTML can be placed. In the above example “view” is this:


Hello {{ name }}!

 

Preview

Hello {{name}}!

The ng-controller control the data of AngularJS app. These are actually Javascript objects. The ng-controller tells AngularJS what controller to use with this view. Here we’ve declared “myController” using ng-controller directive. So in this example, we’ve defined the “myController” as follows –


var app = angular.module("myApp", []);
app.controller("myController", function( $scope ){
	$scope.name = "Nikul"; // default initialization
});

$scope refers to an application which is to use “myController” object.

$scope.name is property of “myController” object.

We can also defined the controller object in discrete Javascipt file and embed that file in an HTML page.

Data binding

A data binding can be specified in two different ways:

  • With double curly braces: {{ expression }}
  • With ng-bind directive: ng-bind=”varName”

AngularJS provides two types of data binding:

# One-Time Data-Binding

# Two-Way Data-Binding

One-Time Data-Binding

First of all, note that this is one-time data-binding NOT one-way. We are saying one-time data binding because the model values are automatically assigned to the view only once.

For example:


First name: {{firstName}}

Last name: {{lastName}}

Two-Way Data-Binding

Two-way data binding allows you to take the value of a property on your scope and display it on your view. For example, updating particular element’s value based on text input without any shitty logic.

So how does one use this?


{{ name }}

 


var app = angular.module("myApp", []);
app.controller("myController", function( $scope ){
	$scope.name = "Nikul"; // default initialization
});

Working with JSON, ng-repeat And ng-filter

As we know about arrays in Javascript, one more complicated dataset can be written as an objects. For example,


app.controller("myController", function( $scope ) {
	$scope.names = [
		{
			name: 'Jani',
			country: 'Norway'
		},
		{
			name:'Hege',
			country:'Sweden'
		},
		{
			name:'Kai',
			country:'Denmark'
		}
	];
})

So here, we’ve three records with two fields(name, country) which are stored in “names” property of $scope variable. There can be any kind of data like string, number, boolean etc.

The value of an arrays, dataset can be extracted through the loop. Similarly AngularJS provides ng-repeat directive to loop through the data in HTML. Let’s see the magic of ng-repeat!

 

    • {{ x.name }} is from {{ x.country }}

 

Angular has a capability to filter the data. It has many built in filters that we can apply to our data. For example, here, we’ve try to transform all character to uppercase.

 

    • {{ x.name | uppercase }} is from {{ x.country | uppercase }}

 

ng-show / ng-hide

We can hide and show elements conditionally in DOM. AngularJS provides us the ng-show and ng-hide directives. Actually, these both directives will work by changing display style(CSS property) of DOM element. Let’s have a look!


 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, hic.

 

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, officiis!

When we click on “showMe” checkbox it evaluates to true and hence Angular tells first box to show by evaluating ng-show=”showMe” and same will be done with second checkbox and box.

ng-class

The ng-class directive allow us to add one or more class to an element dynamically. It can be supported by all HTML elements. ng-repeat directive can also add more than one class based on expression just like below –


Lorem ipsum dolor sit amet, consectetur adipisicing.

Wrap Up!

And that’s it! In this article, I tried to discover a lot of basic of AngularJS that should be enough for every newbies. If it’s not enough than don’t worry because there are some links that will probably helpful to you.

12 Replies to “AngularJS: A Complete Guide for Beginners”

  1. Steven

    I believe there is an error in the section introduction “ng-repeat”. Instead of:

    {{ name }} is from {{ country }}

    It should be:

    {{ name.name }} is from {{ name.country }}

    Also, to avoid confusion, you should use something else as the variable holding each instance (first use of “name” here). If you were to change this variable to “person”, it would look like this:

    {{ person.name }} is from {{ person.country }}

Leave a Reply

Your email address will not be published. Required fields are marked *