Simple AngularJS – getting started – Cloud-Developer-Space

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”>
/spana%20href=
http://app.js
<h3>{{ greeting }}</h3>
</body>
</html>

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 :

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 :

Cloud-Developer-Space