So, you’ve looked around, looking for a new role and most of them seem to mention Angular.
Wherever you turn, whatever ad you read, it mentions Angular, it’s right there in your face.
You’ve never touched it so you decide its time to do that to keep your skills up to date. But where do you start ?
Let’s see if it’s really as bad as it seems.
First of all what is Angular ? A good starting point is to check out the angular website: https://angularjs.org/
If you are just starting out we can think of it simply as a binding framework. It will help you bind your JavaScript to your front end. Of course this is a very limited definition, but for now it will suffice. All we want really is to see how we can build something very simple with it so we get the idea of how it works.
We clearly need our nerdy Hello World application. Wait, no, let’s make it do something more interesting. I mean we don’t need Angular to display a little text, what we want is to see how we can write some JavaScript code and make it do something.
We will be building an application which adds 2 numbers and shows the result in a label. Pretty simple but let’s see how we can do that with Angular.
Step 1.
We go to Angular’s site and get a link to the js file. That’s all we need really.
Click on the download button and choose version 1.3. That will give us the CDN link that we need.
Step 2.
Create a simple HTML page with this code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="AngularBasicTutorial.js"></script>
</head>
<body ng-app=”simple” ng-controller=”simpleController”>
<input type=”text” ng-model=”val1″ />
<input type=”text” ng-model=”val2″ />
<button ng-click=”calcSum()”>Sum</button>
<input type=”text” ng-model=”sum”/>
<div>
<button ng-click=”testFrontEndBinding()”>Front End – BackEnd Binding test</button>
<button ng-click=”testBackEndBinding()”>BackEnd – Front End Binding test</button>
</div>
</body>
</html>
Now, let’s see what’s going on here.
You can see we added a few extra things on the body tag. For Angular to run and interpret code we need to create an Angular app and a controller. An app is the main container and a controller is a specific section of the code.
Everything inside will be interpreted by Angular. All we had to do was add an ng-app tag and give it a name and then an ng-controller and give it a name.
We can see we also added a reference to an AngularBasicTutorial.js file. Let’s see what this file looks like :
(function () {
var app = angular.module('simple', []);
app.controller(‘simpleController’, [‘$scope’, function ($scope) {
$scope.val1 = 1;
$scope.val2 = 2;
$scope.sum = 3;
$scope.calcSum = function ()
{
$scope.sum = parseInt($scope.val1,10) + parseInt($scope.val2,10);
}
$scope.testFrontEndBinding = function()
{
alert($scope.val1);
}
$scope.testBackEndBinding = function()
{
$scope.val2 = 1000;
}
}]);
})();
This is using the module pattern and we basically create a function expression ( for some details please visit this link : JavaScript Module Pattern)
You can see how we hooked up the app name and the controller name between JavaScript and Html.
Angular is very good on the two-way binding side. This means that once we’ve done the connection between code and front end, any changes we do in the code reflect on the UI straight away. When we change something on the front end the value of the linked JavaScript model also changes. As you can see this is all very simple and it didn’t take much code to write.
So what we expect is that we run our web page we will see the textboxes already pre-populated with the default values we assigned in JavaScript. The 2 way binding works because we marked input fields with the ng-model directive. if you’re interested to read a bit more about it please go here : ng-model explained
To demonstrate the 2 way binding I added a couple buttons, one which shows the frontend – backend connection and a second one which shows the backend – frontend connection.
Let’s take the first one and let’s look at the JavaScript as well. Here we will type a new number in the first textbox and then we will alert the value in $scope.val1. Go ahead and type let’s say 7 in the first textbox, then click the FrontEnd – BackEnd Binding test. You should get an alert with the number 7.
Now, press the second button and you should see 1000 in the second textbox. Feel free to experiment and change to other value in the JavaScript method and you should see your change straight away.
Hopefully at this point you understand a little bit about Angular and a little bit about how the 2 way binding works.
Now, don’t get too hung up on a framework. This is about Angular but if you look at other frameworks you will notice they work pretty much the same way. Yes there be naming differences but the idea remains the same. Learning one MVVM framework will make it easy to pick up others.
If you’d like to download the code for this tutorial, you can do it here : Angular Tutorial code
In the coming weeks I will publish more an this subject so stay tuned.
The code is released under the MIT License
Have fun and see you later !
Andrei's web corner 