How to get started (Part 1 of the AngularJS - from beginner to expert in 7 steps series)

This is the first post of AngularJS - from beginner to expert in 7 steps series.

AngularJS redefines how to build front-end applications. Instead of being afraid to cross the boundary between HTML and JavaScript, it takes it head-on.

Application frameworks, like Backbone, EmberJS, and others, require developers to extend from JavaScript objects that are specific to their frameworks. Although this approach has its merits, it unnecessarily pollutes your object space and requires you to have intimate knowledge of abstract objects that exist in memory. But we accept it because the web wasn’t originally designed to be as interactive as we expect it to be today, and we need frameworks to help us close the gap between JavaScript and HTML.

AngularJS closes that gap.

Instead of manipulating the DOM “directly,” you annotate your DOM with metadata (directives), and Angular manipulates the DOM for you.

AngularJS also does not depend on (or exclude the use of) any other framework. You can even build AngularJS apps in non-AngularJS frameworks.

It just works.

Sound awesome? It is. In this 7-part series we’re going to walk you through how to get started writing serious apps with AngularJS - even if you’ve never touched it before.

Follow along on this journey, and we’ll teach you how to become an expert AngularJS developer.

First things first: When should you use AngularJS?

AngularJS is an MV* framework that is ideal for use when building client-side single-page apps. It is not a library, but a framework for building dynamic web pages. It focuses on extending HTML and providing dynamic data binding, and it plays well with other frameworks (e.g., jQuery).

If you are building a single-page app, AngularJS will be perfect for you. Gmail, Google Docs, Twitter, and Facebook all fit into the AngularJS sweet spot. Game development and other apps that heavily manipulate the DOM or need pure speed are not good fits for AngularJS.

Now that we’ve gotten through that intro, here is the first topic you need to understand in order to learn AngularJS:

1. How to start writing an app

Throughout this tutorial series, we are going to be building an NPR audio player that will show us the current stories on the show Morning Edition and play them in our browser. To see the fully finished demo, head over here.

When writing an AngularJS app, we write the behavior and interaction together alongside the presentation.

Writing this way can be confusing at first, especially if you have experience with other frameworks where the two are generally separate. Once you get the hang of it, it’ll become second nature.

Let’s look at the simplest app you can build with AngularJS:

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <div> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello, {{ yourName }}!</h1> </div> </body> </html>

Try it

Hello, {{ yourName1 }}!

As you can see, you get bi-directional data binding without any work.

Bi-directional data binding means that if you change data on the back end, your changes will show up in your view automagically (actually, there’s no magic involved; we’ll get into how this works soon).

Similarly, if you change data in your view (e.g., by typing into a text box), it will automagically update your model.

So what did we do in our app?

First, we used our most important (and most easily forgotten) term: the ng-app attribute on the <html> tag. Without this tag, the AngularJS process does not start.

Second, we told AngularJS that we want to set up bi-directional data binding on the yourName model on the page.

Third, we told AngularJS to display the data yourName in the directive template called {{ yourName }}.

That’s it. We’ve created a dynamic app that would ordinarily have taken much longer and many more lines of code to build: We did not have to specify any rules on bi-directional data binding, we didn’t have to write any updating code, we didn’t have to specify any models, and, in fact, we haven’t even touched JavaScript yet. We won’t have to do that until we want to build apps with more customized behavior.

As you’ll see, all of the above just works because of the power of AngularJS’s design.

Building your app

In this section we’ll discuss an app we’ll call myApp. You can follow along with our series by git cloning the repository (instructions below) or by following along with our instructions. Create an index.html file with the following content:

1
2
3
4
5
6
7
8
9
<!doctype html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="js/main.js"></script> </head> <body> </body> </html>

Then, make a directory called js and make a file in that directory called main.js, like so:

1
2
mkdir js touch js/main.js

This HTML page will load both AngularJS and our app that we’ll write in main.js. Almost all of the work that we will do in this section will be in the main.js file.

In order to extend and customize our app, we’ll need to write some JavaScript. All the JavaScript that we will write will go into our main.js file.

angular.module

To define an AngularJS app, we first need to define an angular.module. An Angular module is simply a collection of functions that are run when the application is “booted.” (We’re not going to discuss configuration and run blocks in this series, but we’ll address them in future sections.)

Next, we need to define the module in our main.js file:

1
var app = angular.module('myApp', []);

This line creates the Angular module named myApp. (Don’t worry about the second argument – the empty array, [] – for now. We’ll get to it.)

Now, we want to instantiate our myApp module on our page and tell Angular where in the DOM tree our app lives. To instantiate the module in a page, we’ll be using the ng-app directive, which tells Angular that we want our module to own that part of the DOM tree.

We can instantiate our own app (module) by simply passing the name of our app as the value in our index.html file:

1
<html ng-app="myApp">

When we refresh the page, Angular will bootstrap myApp.

We can set ng-app on any element in the DOM, and that’s where Angular will launch on the page. This step is how we can write an Angular app inside of any web page, even if the rest of the application isn’t written in Angular.

1
2
3
4
<h2>I am not inside an AngularJS app</h2> <div ng-app="embeddedApp"> <h3>Inside an AngularJS app</h3> </div>

For an app that will take over the entire page, you can place the ng-app directive on the html element.

Once we’ve defined our app, we can start building out the rest of the application. We’ll build using $scope, which is one of the most important Angular concepts. We will cover the $scope service in depth in Part 2 of our 7-part series.

So there we have it - the basic structure for an Angular app. We’ll use this as a starting point to build our NPR player.

The official repository for the beginner series is available as a git repo here: https://github.com/auser/ng-newsletter-beginner-series.

To get this repo locally, ensure you have git installed, clone the repo, and check out the part1 branch:

1
2
git clone https://github.com/auser/ng-newsletter-beginner-series.git git checkout part1
Get the weekly email all focused on AngularJS. Sign up below to receive the weekly email and exclusive content.
We will never send you spam and it's a cinch to unsubscribe.

Download a free sample of the ng-book: The Complete Book on AngularJS

ng-book: The Complete Book on AngularJS is the canonical AngularJS book available today.

It's free, so just enter your email address and the PDF will be sent directly to your inbox. Mailchimp can take up to an hour to deliver the free sample chapter, but if you don't receive it within the hour, send us an email and we'll manually send them to you!

We'll send you updates about the book, when it updates and other free content.

We will never send you spam and it's a cinch to unsubscribe.

Comments

comments powered by Disqus