Off The Ground With AngularJS


By Jarod Kurland


Getting off the ground with AngularJS

Disclaimer

The following post outlines the basics to understanding the AngularJS framework, and acts as a starting point aid to developers new to the framework.

  

Introduction

AngularJS, an open-source framework currently in development by a team at Google (and of course, its large community), enables a Javascript-familiar developer to build marvellous, appealing, functional and high performing user interfaces with minimal effort.

The architecture follows that of the model-view-controller (MVC) flavor, whereby information displayed on the web application (the Models of data) on our frontend (our View) can be manipulated in an isolated or scoped environment (yep, you guessed it, our Controller). 

And did someone say features? AngularJS’ forte lies with high performance DOM manipulation, which is done through a lightweight built in jQuery Lite build included in the framework. For a developer,  this is added with ease to base view code, in a minimal and easy to read syntax.  

 

Term & Concept Glossary

Before diving into some code, here are some common terms and concepts that are used when developing an AngularJS application. Become familiar with them, as they will become your tools to crafting a superheroic app.

The app.js File

Another really important cog in our acute machine is the ‘app.js’ file. Here, it is accustom to declare and define your app, and possibly have routing functions and helpers. 

Controllers & Services

Controllers are isolated/scoped environments whereby code is written to manipulate the view through models, or pass model information to Services. The metaphor ‘controller’ is given to this code, because it is controlling the variables which are shown or linked to your view (called Models). Controllers only exist when the HTML element’s they are bound to are rendered on the DOM. 

One of the handy features of Angular is the two-way data binding, which refers to the following, as an example:

If a variable in your JS code is bound to an input field in your HTML file, there is a direct relation between the value of the input field and the value of the variable. If the variable value is changed, the input field will update to display the new information, and vica versa. Hence, the data is bound in both ways.

Services on the other hand, are not scoped, and cannot directly interface with your view, or the models in your view, unless two way data binding is invoked through object reference. The ‘service’ metaphor is given to these blocks of code as they provide a stateless service to a controller or other service which requests them. 

A good real world example to elaborate the above descriptions would be a login screen. A controller might be applied to the form containing a username and password input field, and a shiney ‘Login’ button. 

A service would be used for session handling even performing the requests to log a user in on the server.  

Reread that, and try and make sense of it. Got it? Good. 

Directives

Another simple, yet powerful feature of the Angular framework is directives. Directives are JS code blocks which take the form of either an HTML element, element attribute or comment which are swapped out for actual HTML code by Angular before the web browser renders the DOM.  

This is useful for creating really dynamic code if custom directives are written, but the concept remains the same, as Angular comes jam packed with many of its own.

 

Onto The Good Stuff Then

As an example, take a look at and experiment with the CodePen below:

 

 

AngularJS & Superheroics

If you haven’t guessed it already, the key to starting an AngularJS framework is to have the framework in the environment you’ll be coding in! You can download it here, unpack the archive and take a look at the files provided.

We’re interested in ‘angular.min.js’, the minified core framework file. In this file, weighing in at just over 150 KBs, the heart of AngularJS lies, which will provide us with all it’s yummy MVC, two-way data binding and DOM manipulation juiciness. Now give Angular a home and import it into your index.html file. In the CodePen above, at the bottom of mytag, you’ll find the