Building Booky SPA - A quick tour of AngularJS and Booky Angular Design

In this post I give a quick tour of AngularJS concepts and touch on some of the AngularJS Design for Booky.

What is AngularJS?

"AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript, while shoring up some of its glaring deficiencies. It is what HTML would have been, had it been built for dynamic content." - Reference

Two way Data Binding

Besides being the coolest feature to come out of AngularJS, two way data binding provides us with:

• Any changes to the view update the model
• Any changes to the model update the view

Time saving benefits:

• Saves us from writing boiler plate code that is typically written to traverse, manipulate and listing to the DOM.

Two Way Data Binding Plunker Sample

Model

In AngularJS, the model contains plain old javascript objects such as string, booleans, arrays that represent the objects viewable in the view and those which are manipulated in AngularJS controller. The model is contained in AngularJS scope.

View

In AngularJS, the view is the HTML that is rendered after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.

Controller

In AngularJS, a Controller is the glue between an the view and model. A controller contains the business logic for the view. For example, if you had search form with a search box and search button, you could have a function in your controller that handles executing a call to a search service each time the search button is clicked.

There is one cardinal rule with an AngularJS Controller:

- The controller does not manipulate the DOM. Directives should be created to manipulate the DOM.

Controller Plunker Sample

Filters

In AngularJS, Filters allow us to format data in some way. For example, a built in Filter from AngularJS called uppercase would make all characters UPPERCASE. Filters cleanup our HTML code by removing the formatting from the view. A filter is created in AngularJS Module much like the other AngularJS concepts such as controllers, directives, etc.

Filter Plunker Sample

Boolean Yes/No Custom Filter Plunker Sample

Directives

AngularJS Directives are the core functions that get run when the DOM is compiled by the AngularJS compiler.

In AngularJS, Directives allow us to build reusable UI components by creating new directives that encapsulate the different application UI aspects such as logo, navigation, etc. With this concept each Directive encapsulate a single UI component, and provide simple DOM manipulation that modify or even create totally new behavior in HTML.

Custom Directive Plunker Sample

Modules

In AngularJS, Modules are the main way to define our AngularJS app. Each application can have multiple modules.

There are different modules in an app such as:
main app module
controller module
directive module
filter module
service module

We logically organize each area of the app into a module. For example, we create a module for controllers and all individual controllers go in the controller module.

Booky AngularJS Design

• booky has the following modules:
• booky app module - booky main ng-app 
• booky filter module - booky.filters - contains all Angular filters
• book directive module - booky.directives - contains all Angular directives
• booky controller module - booky.controllers - contains all Angular controllers
• booky authentication factory - authservice - Angular factory for communicating
• booky restservice - Angular factory for communicating with booky WebAPI REST service
• booky bkyviewmodel - Angular factory that is a layer of abstraction between the booky viewmodel and booky server side MS Web API REST service. All booky controllers work with the bky viewmodel factory rather than directly communicating with the booky restservice.
• booky scrnur rest factory - scrnurservice - Screen Shot service for communicating with Scrnur