How to Build a Simple AngularJS Project [Tutorial]

So you want to start building your first AngularJS app, but you don’t know where to start. AngularJS is notorious for being difficult to learn. Most “AngularJS for beginners” manuals get insanely complicated very quickly. Add to this the the annoying Jargon words that get thrown in as if they are common knowledge, and you have what might seem like an insurmountable challenge.

In this guide, I’ll make getting started as simple as possible. First I’ll go through some of the difficulties of building web applications, and how AngularJS helps us solve some of those problems.

Then, we’ll look at some AngularJS examples, and how to create an AngularJS project from scratch.

If you’re only interested in building the project, you can skip ahead to the coding section.

Web App Challenges

Every website uses a client-server architecture. This means there are two main parts – your web browser, and the server that hosts the website. You go to a URL (the location of the server), and the server hands your browser the information it needs – the HTML, CSS, and Javascript – to display the web page.

screen-shot-2017-02-27-at-10-54-04-am-min

Pretty simple so far. You can interact with the page by clicking buttons and links on the page. When you do, you are basically requesting a whole new page from the server.

This used to be fine when web pages were mainly static documents. Nowadays, web pages can be full applications, with interactive user interfaces.

This is where our traditional model runs into problems. Every time you click a button, the whole page is reloaded. Even the parts that don’t need to change. This makes a page seem slow and unresponsive to the user.

Therefore, we need a different way of building web applications. One where each time a user interacts with a page, only new information is requested from our server. The rest of the page is left untouched.

Single Page Web Applications

The solution is to build a Single Page Application (SPA). When you visit a SPA website, your browser is sent only a single page. Then, only parts of the page are dynamically updated and manipulated in real time. This results in a much faster and nicer feeling web app.

screen-shot-2017-02-27-at-10-54-18-am-min

Download Our Project Specification Template

Many businesses use this approach for their web app projects, including large companies and startups. An example of a Single Page Application is the USA today website. Go there and try to guess which parts are being reloaded when you click around.

Who Does AngularJS Fit In?

AngularJS is a front-end framework for building these Single Page Applications. It helps extend our HTML to be more dynamic, and suitable for building these sorts of applications. It’s open source and was built by independent developers, with support from Google.

By using Angular, we get a whole framework of tools to help us build better web applications.

For example, by separating the views from the logic of your application, it helps us build more maintainable and testable code.

What You Should Know For This Tutorial

Before we start coding, I’m assuming you know a little bit about each of the following

  • HTML
  • CSS
  • Javascript Frameworks such as jQuery

AngularJS Important Concepts

There are a few important concepts you need to understand before you build your own AngularJS app. I’ll give a brief overview and some links to more detailed information.

Model-View-Controller (MVC)

mvc-basic-svg-min

MVC is a design pattern for implementing user interfaces. It helps us separate the logic in our code from how it is displayed. By doing this, we end up with a much neater, more testable application. If you aren’t familiar with MVC, check out this interesting explanation using lego.

2-Way Data Binding

With jQuery, making parts of our page to automatically update when other information is changed can be a hassle. AngularJS has an awesome feature called 2-way data binding. It allows you to bind things together, so that when one thing updates the other one does too – instantly.

We’ll be using this concept in our application.

Directives

I said before that AngularJS extends HTML. It does this through directives.

AngularJS directives are HTML attributes that start with ng-. These tell Angular to attach a specific behavior to that HTML element. For example, our app is going to have

<html ng-app>

This is a directive that tells Angular to treat our HTML page as an application.

Building a Sample AngularJS Project

Now, we are ready to learn how to build a first AngularJS app. We are going build probably the most simple AngularJS project possible.

All it is going to do is ask for your name. Then, as you type your name, it is going to display what you write on a different line.

Sounds super simple right? Yes. But, it does introduce us to some of the important AngularJS basics such as 2-way data binding and directives.

Setting Up

Our project is going to be about as simple as you can get in AngularJS. We are only going to have one file called index.html.

Because we aren’t going to be using a server or any other Javascript or CSS files, you can just create this file anywhere on your computer, then open it in a web browser to test it out.

index.html

Firstly, to get our bearings, let’s set up a very basic HTML structure for our page. I’m going to call mine index.html. Here is the code.

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" placeholder="Enter a name here">
      <hr>
      <h1>Hello! Your Name</h1>
    </div>
  </body>
</html>

 

screen-shot-2017-02-27-at-3-20-18-pm-min

This doesn’t do anything interesting (yet), but it gives us an idea of the structure of our page. Next, we need to add some functionality using AngularJS.

Read How We Helped a Marketing Company to Build a Back-Office Custom Ads Dashboard

Adding in AngularJS

Now, we can start adding some AngularJS into our HTML. Firstly we’ll need to get the AngularJS framework into our project.

The easiest way to do this is to use the hosted version. All you need to do is include these script tags between your head tags like so.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>

 

Now we’ve got AngularJS installed in our app, we’ll need to start adding in some Directives to let Angular know what to do. Remember those are ng- tags I was talking about before.

Adding Directives

In the <html> tag, simply add ng-app.

<html ng-app>

 

This is a directive (as I explained before) that tells AngularJS to be active on this section of our html. In our case, it’s the whole html document.

Binding Data Together

Here’s where we get a glimpse at the power of the AngularJS framework.

We want our “Hello! Your Name” text to actually display the name we type, as we type it. With jQuery, we would have to set up some all sorts of functions and listeners. Luckily, this is exactly where AngularJS makes things super simple.

What we need to do is bind the data from our text input field to the text in the “Hello! Your Name” field. This will mean one automatically updates when the other is changed.

To do this, first we add the ng-model="yourName" to our <input> tag. This tells AngularJS that the data we type is called “yourName” and we want to bind it to something else.

<input type="text" ng-model="yourName" placeholder="Enter a name here">

 

Next, we need to tell Angular what to bind it to. Replace the “Your Name” text in the <h1> tags with {{yourName}} like so.

<h1>Hello! {{yourName}}!</h1>

 

The {{ }} are how you declare where to bind something in AngularJS. Now, rather than just displaying hard coded text, Angular will automatically update this text whenever yourName changes. Awesome.

Test It Out

That’s it! You’ve just created your first AngularJS project, including 2-way data binding, directives, and even using a simple MVP architecture. Congratulations.

Whatever you type into the name field should automatically be displayed below.

When you put it all together, it should look something like this.

screen-shot-2017-02-27-at-3-20-43-pm-min

And the complete code:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello! {{yourName}}!</h1>
    </div>
  </body>
</html>

 

What Next

You know how to develop a simple AngularJS application. All you need to do now is step up the complexity a little bit. Check out the AngularJS.org for a couple more simple apps like this. They also have some video tutorials on how to build them.

Other than that, just start experimenting making your own custom web apps!

Getting an AngularJS application developed

If you’ve gone through the tutorial and learning AngularJS seems a little too much for you, don’t worry. There are plenty of developers around that can develop your app for you.

AngularJS is very popular, so you can usually find great developers for a good price. If you need a functioning web app, the cost of hiring developers might easier than learning the process of building one yourself.

Sam Palmer

Sam Palmer

Web Developer and Tech Writer
Sam Palmer

Latest posts by Sam Palmer (see all)