Post
Ask Question

Getting Started Learning AngularJS

Introduction

This is a step-by-step learning series of tutorials. In this we will start from the very basic and slowly reach the expert level. This series contains small demo examples.

In this very first series, we will learn a few basic terms of AngularJS.

AngularJS

So, AngularJS is a JavaScript framework developed by Google based on the MVC framework like other frameworks. Example: BackboneJS and EmberJS and so on. Most important is that it is open source. If you want to add some new exciting features you're welcome to do so.

It gives developers a highly structured approach to develop rich web applications.

Whom this tutorial is for

For all who want to get started with this great framework and want to learn.

Where to get AngularJS

You can download the AngularJS complete source code from: https://angularjs.org/.

How AngularJS interacts with web pages

AngularJS reads HTML with additional tags and attributes that provide great interactions within pages. This is very good for Single Page Apps (SPA). For more details of these additional things just visit: AngularJS API Docs.

Let's start with a simple AngularJS App

Here we will discuss AngularJS by creating a simple Web project. Use the following procedure:

  1. Download AngularJS from: https://angularjs.org/.

  2. Download Bootstrap from: Download Bootstrap.

  3. Create a view (for convenience I used a simple HTML page).

  4. Create a Service and Controller using JavaScript.

Here is the folder structure

index

We will discuss complex code later in this tutorial.

How to use AngularJS in a page

After following all the preceding procedure, we just need to let our web page know about AngularJS.

use AngularJS

In the preceding snippet we added ng-app. This is nothing but a root element of our AngularJS page. We can put this directive anywhere but mostly we put this with the <html> or <body>. Here, we use this directive with a <div> that makes it a root level container. The curly braces {} tells angular to compile the things. The output of the preceding will be as:

sample angularJS

Let's have a look into the following snippet, where we just removed the ngApp directive:

code

What will be the output of this? Yes, you are right; angular will not compile the things within curly braces {}. It will produce the following:

anjularJS page

Let's add ngAPP back to the above snippet.

jumbotron

It will produce the following:

demo app

The following is the complete code:

complete code

Getting user input

AngularJS provides us many great directives and one of these is ng-model. This is a magic directive, it get the input and bind it to its own expression.

Let's discuss the following snippet:

course

Here, we are telling AngularJS that "course" is bound with the input box and the ohter things will be taken care of by AngularJS, it will automatically assign the values of Input to "course". It will work as:

new cource

Whatever you enter, it will display immediately.

Working depending on user input

The most useful and great directive is ng-click. See the following snippet:

Working as per user input

Here we defined “MyApp” and a controller “MyCtrl”. “ng-click” triggers the “show()” function and produces output as:

MyApp

Take the following snippet and understand how it works:

function

In the above, we defined $scope that is nothing but a container.

Using Services and Controllers

Let's think of a scenario where we need to separate our controller from its implementations, here we use a controller and services. See the following snippet:

Services and Controllers

The following are the service/controller classes:

controller classes

Here is the output:

list of authors

Conclusion

In this tutorial we learned the basics of AngularJS, what the basic directives are and how to create a simple web page.

In future tutorials, we will see more advanced stuff with more examples. A complete source code of the simple angular stuff is available here: https://github.com/garora/angularjsstuff/tree/master/simpleangularjs.


Similar Articles