AngularJS (v1). Beginners Guide

Artem Diashkin
Mar 12 · 7 min read

This article is for those who need to understand how AngularJS (version 1.x) works.

You might ask: “Story about AngularJS (v1.x)’ in 2021, really?”.

I would say that this story is not for those who are looking for modern FE Frameworks 😉. Because there are a lot of legacy projects that need to be migrated to the new version of Angular, or to another Framework like ReactJS or VueJS → this story is for those developers who need to understand the main features of AngularJS. So let’s begin…

What will be covered in this article?

  • Creating simplest project
  • Data binding expressions
  • Controllers
  • Directives
  • Filters
  • Fragments/Components
  • Services
  • Routing

What we will be implementing (gif):

1. Creating simplest project

We will start by creating an empty project without any NPM packages, just an empty folder:

Screenshot of an empty project

Next, we will add an index.html file

Next, we will update our index.html file with the <script> tag with src to the angular library and simple <body> content:

Let’s open this HTML file (gif):

Hmm, why this Angular app isn’t working?

To “activate” AngularJS library we need to add ng-app directive:

Let’s run our app again:

🎉 Great! We have created our first AngularJS application.

2. Data binding expressions

Because we are using the AngularJS library, this expression {{ 345 / 123 }} will be “evaluated” by it. Let me show you what will happen:

3. Controllers

If you were working with ReactJS you know that you can define logic inside your components, but in AngularJS you will create Controllers — separate functions with app logic.

You can check more here:

I think that it is better to show you…

We will add a script.js file with the MyController functions. But in this case, AngularJS will not know that it should use this function as Controller. For that, we need to “register” it in applications.

  1. At code line 1 we are “registering” our module/application with a custom name and dependencies. But we don’t have any dependencies yet, so the dependency array will be empty.
  2. What are $scope and $http ? Those are Angular’s services available for us from the AngularJS library. We can create our own services and pass them to Controller. We will talk about them later in this story.
  3. At code line 12 we are “registering” our controller.

Update index.html file:

Result:

4. Directives

You already saw some Angular directives like ng-app and ng-controller and ng-model and I think that you already have the main idea of them. In simple words, they are telling Angular what needs to be done or what needs to be used in the app.

ng-model=”valuename” → will update $scope.valuename in the Controller;

ng-click="myFunction()" → will execute $scope.myFunction() in the Controller;

ng-if="isTrue" → will render dom-element only if isTrue === true ;

Most of available directives can be found here:

If you want to know more about Directives, you can check here:

Let’s register another FormController inside the script.js file:

Update index.html file:

Result (gif):

⚠️ NOTE: You can change ng-click to ng-submit. The result will be the same:

ng-repeat → will go through the array and create a dom element for each element in that array. Let’s take a closer look at how it works with a simple example:

Result:

5. Filters

Filters format the value of an expression for display to the user. They can be used in view templates, controllers, or services. AngularJS comes with a collection of built-in filters, but it is easy to define your own as well.

Some examples:

  • {{ expression | filter }}$12.00
  • {{ 1234 | number:2 }}1,234.00

You can check more about Filters here:

6. Fragments/Components

ng-Include → it fetches, compiles and includes an external HTML fragment. By using this directive you can split your html page into separate components. Let’s take a look a bit closer…

We will copy-paste all previous code fragmets into a separate HTML files. There are three different way of how you can use ng-include, all will work the same way:

7. Services

Now we will take a closer look at the Services.

Remebrer we used Angular's$http service? And now we will create our custom one. At first we will create a apiService.js file and import in into our index.html file:

Remeber when we declared new angular module we passed an empty dependency array? That time we created a module. But here we are using that created module, so no array required (it will be an issue if we do):

And after that we will update our Controllers in the script.js file by changing $http to our custom apiService:

If you would like to know more about Services:

8. Routing

Do you remember our first Controller?

At code line 1 we declared a new angular module with an empty dependency array. Here we will talk about one of those dependencies → ngRoute.

First, we will need to impoort angular-route package into our app:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>

After that we will update <body> with new directive → ng-view . This is kind of a point that tells AngularJS “This is were my routes should be placed”

⚠️ NOTE: We will need to split our script.js file to a separate JS files:

  • app.js will be responsible for the routing and must be loaded first:
  • controllers.js → this is were we will place our page controllers;
  • apiService.js → without any changes;

This is how app.js will look like:

To make our project clearer we will need to do some refactor:

  1. set ng-view
  2. Move and merge all our controllers into one PreviousController
  3. remove ng-controller=”...” from the fragments, we will use PreviousController to control the whole page

This is how our controllers.js file will look like:

If you would like to know more about AngularJS Routing, you can check by this link:

LITSLINK

LITSLINK’s team is sharing their experience

Sign up for LITSLINK Newsletter

By LITSLINK

It's a test newsletter! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store