AngularJS* Tutorial

superA

By Tyler Smith

If you haven’t heard of Angular before, you’re in for a treat. AngularJS* is a structural framework for creating dynamic web content. It allows you to simply bind data together without the need for dependency injection and in a lot less code. For a longer, in-depth background in Angular, check out their docs here: http://docs.angularjs.org/guide/concepts

This tutorial is going to go over how you can bind an HTML5 slider to dynamically update the style of a div in real time. Some best practices will be deferred for ease of learning, so I do suggest taking a look at the doc links I’ll post throughout the tutorial. At the bottom of the page there is a link to the full demo source code for tinkering. So let’s get started. First, we’ll setup the page for Angular by including the JavaScript file.

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>

Now we’ll start setting up the angular module. Let’s open a script tag and set the module to a variable. Some info on modules: http://docs.angularjs.org/guide/module.

<script type="text/javascript">
 
var app = angular.module('app', []);
 
app.controller("MyController", function($scope){
 
                    $scope.user = {
 
                        diameter: 200,
 
                            style:{},
 
                     };
 
});
 
</script>

We’ve also created a controller above. A controller let’s Angular know what section of your code to look at for manipulations of the variables and functions that are set inside that controller. To use the variables you set in the controller, you wrap them in parenthesis like this {{variable}}. So the HTML code to display “200” would look like this:

<body ng-app=”app”>
 
                  <div ng-controller=”MyController”>
 
                  <p>{{user.diameter}}</p>
 
                  </div>
 
</body>

Notice that we also declared the body with ng-app=”app”. This allows Angular to know that this section is where all controllers and calls will be placed. All of this may not seem worth the effort, but now anytime that user.diameter is updated, what is displayed to the user will automatically update as well. To see this in action, just add a range input box above that span that looks like this:

Diameter: <input type="range" ng-model="user.diameter” min="1" max="400" />

The ng-model=”user.diameter” tells Angular to update the user.diameter variable to the contents of that input box. Since that variable is also displayed to the user, they will see the changes in real time.  A little more in depth explanation of controllers can be found here: http://docs.angularjs.org/guide/concepts#controller We can also setup functions in our controller to be executed when a variable is changed. We’d construct those like so:

app.controller("MyController", function($scope){
 
                    $scope.user = {
 
                        diameter : 200,
 
                            style:{},
 
                     };
 
                    $scope.calcStyle = function(user){
 
                       user.style = {'width':user.diameter+'px','height':user.diameter+'px'}
 
                    };
 
                });

We now have a function we can call that will update our user.style with the new changed value in user.diameter. To call this function, we place ng-change=”calcStyle(user)” on the input box that was previously added. It should look something like this:

Diameter: <input type="range" ng-model="user.diameter” ng-change="calcStyle(user)" min="1" max="400" />

Now that we are updating our style, let’s tie it to a div. I have some CSS for a red circle that we’ll update. Just place this into the head of the doc.

<style type="text/css">
 
            #circle {
 
                    border-radius: 50%;
 
                    width: 200px;
 
                    height: 200px;
 
                    top:200px;
 
                    left:0px;
 
                    background:red;
 
                    position:absolute;
 
                    transition:1s;
 
                    max-width:400px;
 
                    max-height:400px;
 
                }
 
          </style>

Now we can create a div with the id of “circle” and we can use the ng-style attribute to assign it to update. To inject the updated style, we’ll have to create another function in our controller. Place this function right below our $scope.calcStyle function.

$scope.style = function(user) {
 
                        return user.style;
 
                    }

Then the HTML code should look like this:

<div id=”circle” ng-style=”style(user)”>

For more info on ng-style, check here: http://docs.angularjs.org/api/ng.directive:ngStyle

Now every time the input is moved, user.diameter changes, $scope.calcStyle is called and updates user.style with the new updated user.diameter, and the “circle” div also injects the new style every change. All instantly without management and in a lot less code! This is the promise of Angular. Less code, faster results.

Here is some code to a fuller demo of Angular for your tweaking: DEMO

For more complete information about compiler optimizations, see our Optimization Notice.