Angularjs Tutorial Step by Step in 30 minutes

This tutorial introduces about AngularJS tutorial step by step and bring to you full of AngularJS knowledge. When you walk through all steps in this tutorial you can create quickly AngularJS web applications.

Angularjs Tutorial Step by Step

Table of contents:
1. Getting started with AngularJS
2. Create AngularJS application
3. Create AngularJS controller
4. AngularJS scope
5. AngularJs data binding
6. AngularJS filter
7. AngularJS hidding and showing
8. AngulaJS event

Getting started with AngularJS
First of all, we start to create a simple HTML page for my AngularJS web application. This file is named with index.html and contains the following code:

Next, we have to add AngularJS library into the above index.html. We will use the latest version of AngularJS. Simply, we include it (https://code.angularjs.org/1.5.8/angular.min.js) within the head tags of HTML page as follows

We have already created HTML page with AngularJS library successfuly. Let’s going on.

Create AngularJS application
We need to initialize the AngularJS framework by declaring ng-app directive. When a HTML document i loaded, AngularJS framework will first check for ng-app directive and if this directive is found it initializes itself and compiles the HTML template. Here we add ng-app=”myAngularJSTutorial” to the content DIV as follows:

This code means that we declare the div tag like an AngularJS application.
Create AngularJS controller
Next step, we declare controller to add behavior or maintain the data in our AngularJS application, by using ng-controller directive, as follows:

Now, we can control anything in this div tag with myController. Actually, the myAngularJSTutorial is only a name and nothing else. So we have to implement it using AngularJS in a javascript file. Here, we create a file named myapp.js that contains the following code:

The above code creates AngularJS application called myAngularJSTutorial. Next, we implement myController by creating a file named mycontroller.js like this:

Notices that all these javascript code could be put into the same file but we recommend you separating them out to keep our code easier to understand. Now we include both files within HTML document as follows:

Now, we already have the page and AngularJS application.

AngularJS scope

The $scope is a built-in object in AngularJS, which contains application data and methods. We can create properties to a $scope object and assign a value or function to it. Please look at the following code to get this concept:

Now, we show the message property within HTML document using {{variable}} syntax like the following code:

Live demo

AngularJS data binding

Data binding in AngularJS is the synchronization between the model and the view. To understand this concept, we declare a model variable like this:

and add the model variable into our HTML page

In the above html, we use ng-model to bind text input to the model variable inputText. It means that when you change the text input, this variable will be updated too.

Live demo

One more example about data binding that uses ng-repeat directive.

We update mycontroller.js like this

Here, we declare two scope variables, selectedFruit and selectedCountry which is bound with model variables in HTML document. We also update HTML page like this:

Let’s dig deeper:
The ng-options directive is used to populate the select input with values from the fruit scope variable. It uses the name attribute within the fruit objects as the label.
The ng-repeat directive allows us to replicate HTML elements based on an array or set of objects. In the HTML above, ng-repeat will create an option for each of the country within the fruit.country array based on the selectedFruit.id value. This vlaue is determined by the selected input above.

Live demo

Thus, we have shown you more about data-binding via ng-repeat and ng-options. These directives are two powerful features of AngularJS.

AngularJS filter
We introduce continuously one more powerful feature which is AngularJS Filters. The filter allows us to filter an array, and return an array containing only the matching items. Here is filter syntax

Here, we reuses the fruit array from the above section and update HTML document with a searchText model and a filter which get searchText value like a parameter. HTML document looks like below:

Here, we have added a text input and assigned it with the searchText model. It is enough for filter and we don’t need to declare this in the scope within mycontroller.js.

Live demo

Filtering is as simple as that. Of course, that’s not all about AngularJS filter. We will introduce more advance filtering or custom filters on other tutorial.

AngularJS hiding and showing

Next, we introduce you how to hide and show elements using ng-show and ng-hide directives. We are going to reuse the fruit array from the above section. We are going to hide and show list elements based on the available property. HTML document looks like this:

In the above HTML document, ng-show and ng-hide refer to the obj variable like parameters and evaluate them with true or false.

Live demo

AngularJS event
AngularJS includes certain directives which can be used to provide custom behavior on various DOM events, such as click, dblclick, mouseenter etc. There are many AngularJS event directives but we will demonstrate ng-click directive in this tutorial scope. We need to add another text input with a model newFruit and a button with ng-click which will call addFruit function to HTML document as below:

We need to declare the newFruit variable and a scope function addFruit which is setup for ng-click event directive. Our mycontroller.js is updated like this:

we have declared the newPerson scope variable and a scope function addNew which will be called on the button click thanks to the ng-click we added to the button

Live demo

In the above code, addFruit function is responsible to check the vaule of newFruit scope variable is not null or empty then add it into the fruit array. This is simple example about click event and how it works in AngularJS.

This AngularJS tutorial step by step helps you have a quick look and understand how AngularJS works in application.


Download source code angularjs-tutorial-step-by-step.zip (63 downloads)

2 thoughts on “Angularjs Tutorial Step by Step in 30 minutes

Leave a Comment

*

Please share it if you found this useful
Hide Buttons