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”>
/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 :

  • 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 :

http://blogs.msmvps.com/deborahk/angularjs-101-ways-to-create-a-controller-actually-8/

Advertisements

2 thoughts on “Simple AngularJS – getting started

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s