Client-Side Web Project - Pt 2

Software Development
Written By Justin Beall

This week I started to incorporate AngularJS into the Web Project I have been working on. AngularJS can be classified as a "Single Page Application (SPA) Framework". CodeSchool described it as a client-side JavaScript Framework for adding interactivity to HTML.

AngularJS

I am new to this technology, so I started with a tutorial from CodeSchool and watched an hour-long YouTube video.

Shaping up with AngularJS

AngularJs Fundamentals in 60-ish Minutes

Project Review (Items in Bold Are New With This Post)

The premise of this project is: Zero usage of server-side scriptlets/tags of any form.

You can review the previous blog posts for details about each bullet point:

The technologies/libraries used in the project so far are:

  • CSS
    • Bootstrap
    • Less
  • JS
    • jQuery
    • PreloadJS
    • Less
    • AngularJS

My Thoughts On Angular

Angular is a framework that offers many different features. A key concept of the technology is known as a directive. These are attributes and tags that signal the Angular framework to perform work. In addition to the numerous built-in directives, custom ones can be created. This allows for HTML to be tagged with descriptive qualities. Such as one I created called <headerMenu></headerMenu>.

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Another major part of Angular is Two-way data binding. This allows data from a form (such as a login user_name and user_password) to be automatically bound to a JavaScript model. This model can then be passed through JSON REST service calls. The magic works in the other direction too. When data is returned from a JSON REST service, the model can be bound to the related form elements. In this sense, inputs and expressions are re-evaluated when a property changes.

Data-binding in Angular apps is the automatic synchronization of data between the model and view components.

As I was implementing Angular in my application I found uses for the following Angular concepts. In future posts, I will try to cover them a bit more with examples as I become more comfortable.

-- Angular Directives

  • ng-hide: Hide based upon boolean
  • ng-show: Show based upon boolean
  • ng-repeat: Iterate
  • ng-click: Call functions as click event
  • ng-submit: Call functions as submit event
  • ng-class: Add classes to elements { *class:*conditional }
  • ng-model: Binds the form element to the corresponding property

CUSTOM DIRECTIVES

<product-title></product-title>

app.directive('productTitle', function() {
  return {
    restrict: 'E', // type of directive (E for Element)
    templateUrl: 'product-title.html'
  };
});

The product-title tag would be evaluated to the contents of the 'product-title.html'. These descriptive tags allow abstraction and inline description of the presentation layer. The tag <product-title> is more clear than the 20-30 lines that are involved to display the product title. AngularJS allows behavior from HTML through expressive custom directives.

-- Filters work with | FORMAT: {{ data | filter:options }}

  • currency
  • date:'MM/dd/yyyy @ h:m'
  • uppercase
  • lowercase

Any data can have a filter applied. The above format describes how this can be achieved. I particularly liked the currency and date format. It allows data to be returned in a raw format and lets the presentation layer determine how it should be displayed! Separation of concerns... brilliant.

-- Routes

This is the glue that stitches the single page partial HTML pages together. By having routes defined, we are able to modularize the app and control what content is displayed. I only have some basic routes defined in the app currently, but since this is a core concept of Angular, I will try to provide a good example in future posts.

In addition to the above items, Angular also supports the following items:

  • Validators
  • Services
  • Classes

The app is almost in a stable state to deploy to a server. I will try to get a version of the app up on an OpenShift server next 10-Time.

Get In Touch

We'd love to hear from you! Whether you have a question about our services, need a consultation, or just want to connect, our team is here to help. Reach out to us through the form, or contact us directly via social media.

Justin Beall
Previous

Python for the Java Programmer
Next

What is Hadoop?