Simple AngularJS – getting started

With the buzz around AngularJS, I’ve kinda missed the boat on some of it – and getting started ‘late’.

Then again, I’m a ‘fashionably late’ kinda person – and that’s A-OK with me !


In order to get started, I thought I’d share some observations and ideas.

YES – it’s a big topic – and this first post is a ‘hello world’ style mini-app.

To get it working, just save the content to a separate file – one for the HTML and one for the JavaScript (app.js).

(1) The HTML

The following HTML is as basic as you can get – explanation below.

<!DOCTYPE html>
<html ng-app=”testApp”>
<body ng-controller=”testCtrl”>
<h3>{{ greeting }}</h3>

The main pieces are highlighted :

  • testApp is the name of the ‘program’ like and is a container holder, for the whole page
  • testCtrl is the name of the ‘controller’ which is the portion of the app, and used for the model/controller execution.

You’ll note that these have special Angular attributes >  ng-app and ng-controller.

There are also a few JavaScript references – for the AngularJS code (include) – and our code (app.js).

(2) The JavaScript

Again, to keep it simple, this is pretty much the only bits you need.

var app = angular.module(‘testApp‘, []);

app.controller(‘testCtrl‘, [‘$scope‘, function ($scope) {
$scope.greeting = “Hello friends !”;

This does the following logic :

  • Get a reference to the ‘program’ – ie. testApp – into a variable called ‘app’.
  • Use the ‘app’ variable and define the ‘controller’ – ie. testCtrl
  • Define a function to set the property (element) of ‘greeting’.

The key piece here is the thing called “$scope”.   This is a variable passed into the function – and thus you can do >  $scope.messageText.

This is because the value in HTML has {{braces}} around it.

Hope that’s enough to get a quick 101 jump start – the journey of a thousand miles begins with a single step…!


Here’s a cool sample that builds upon the above – with more fields :

2 thoughts on “Simple AngularJS – getting started

  1. chloraphil November 13, 2015 / 4:43 pm

    $scope.messageText = “Hello friends !”; should be $scope.greeting = “Hello friends !”;

    Liked by 1 person

  2. Chris O'Connor November 15, 2015 / 11:33 pm

    Thanks chloraphil – good spotting ! I’ve updated it now.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s