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/
$scope.messageText = “Hello friends !”; should be $scope.greeting = “Hello friends !”;
LikeLiked by 1 person
Thanks chloraphil – good spotting ! I’ve updated it now.
LikeLike