Monthly Archives: April 2013

Angular example

Let’s try some baby AngularJS — our first Angular tutorial. This is to see a “Hello World”-level example at work before we start learning the big picture. Because we likes the instant gratification, precious.

Briefly: AngularJS uses a Model-View-Controller programming concept. This involves separating the:

— Model (the data objects represented in your application), from the

— View (all the stuff the user sees — for example, all the differently tweaked screens and subscreens in Android vs iOS vs desktop browser versions of Chrome/Firefox/IE/Safari, etc), from the

— Controller (the glue code that manages the Model and connects it with the various Views).

That said, a minimally interesting “Hello World” example might look like this:


<html ng-app>   <!-- ng-app is a built-in Angular "directive"
                     which defines the Angular app boundary; 
                     in this case, from the starting <html> 
                     tag to the closing </html> tag -->

  <head>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js">  
        <!-- load the angular javascript code -->
    </script> <!-- and close the script tag! -->
  </head>
  <body>
    <p ng-init=" name='World' ">Hello {{name}}!</p>
       <!-- here ng-init is a convenient "directive" which Angular
            provides to let you run code prior to execution of the
            main Angular template. In this case, we simply initialize
            the variable "name" with the value "World". According to 
            the Angular developers, this is a shortcut for toy/test
            applications. We'll use it for the moment and get a bit
            more professional shortly.
       -->
   
  </body>
</html>

Now run this code in your browser, and you’ll get a nice, simple “Hello World!”

What happened here? We began with bootstrapping the AngularJS system — first we got the ball rolling by loading in AngularJS using the script tag. When that executed, it basically reads through the entire page starting at the top of the DOM (the Document Object Model — basically the html and css elements comprising the page) and pseudo-compiled according to the AngularJS system (a very loose use of terminology indeed, but enough for now). The “ng-app” directive embedded into the tag gave AngularJS the boundary of the code. And we initialized the Model (meaning the AngularJS model, not the DOM model) by assigning the variable “name” the value “World.” And finally, using the double-curly brackets (yet another AngularJS “directive”) around the variable “name”:

{{ name }}

we told AngularJS to look into the Model and substitute the value of the variable “name” in that spot.

The end result — our little Hello World!

Next… we’ll do this whole thing in a less toy-like fasion and build a more formal Model.