JQuery-Mobile with AngularJS and Angular-Route (ngRoute)

Introduction

The following details how JQuery-Mobile and AngularJS can play together seamlessly. Angular-Route (ngRoute) is used for navigation. A simple Angular directive invokes JQuery-Mobile styling and enhancements as each page is loaded. This includes pages loaded via  ng-include

A working example is available here as a Plunker http://plnkr.co/edit/RPbJfWX84XkzWlvPFMvX?p=info

Continue reading “JQuery-Mobile with AngularJS and Angular-Route (ngRoute)”

Spring 4 Web MVC with AngularJS

Introduction

The project downloadable below is an answer to a question repeated in this blog (Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method))

“How can I submit nested lists of objects?”

The answer is AJAX and JSON.

A very good approach to this is with AngularJS and Spring as demonstrated here.

When the page loads it makes an AJAX call to the server to fetch the model.

The model is bound on the page using AngularJS.

The controls (buttons and input fields) on the page allow the model to be edited.

The model can then be sent to the server via AJAX where it can be persisted. The updated model is returned to the client where it is again bound using angularJS.

The application looks like this

adding_elements_to_nested_list_angularJS_style

Download

This is a Maven project so just navigate to it using your IDE, open it and run it.

Spring4JSONAddingElementToNestedList

 

 

 

Spring 4 Web MVC – JSON Handling

Introduction

This blog demonstrates how to process JSON using Spring 4 Web MVC.

The JavaScript AJAX call is described in terms of request headers and request data formatting.

Spring uses Jackson for JSON parsing. Jackson is configured to ignore extra JSON properties that do not match properties of the bean being populated at the @Controller request end-point method.

This blog demonstrates populating complex objects n levels deep thus overcoming some difficulties encountered as per many of the comments in this blog.

Unlike Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method) a generic JavaScript library is not provided. Populating JSON objects is easily achieved with JavaScript. For that reason, the difficulties of the HTML form implementation described (and partially solved) in that blog do not arise in the first place. Therefore it is hugely favorable to use JSON over conventional HTML forms for complex objects (and in general).

This demonstration conforms to a useful and popular design pattern. Specifically, the form is submitted asynchronously, the response is handled by the client JavaScript.

This provides for:

  • A far better user experience as there is no page load. Feedback is immediate.
  • Ease of development
  • Ease of validation handling
  • Support for complex forms
  • Code portability (think HTML5 clients and single page applications)

Continue reading “Spring 4 Web MVC – JSON Handling”

AngularJS – Radio Buttons – Three Scenarios

Introduction

This post will detail how to AngularJS can enhance the usage and functionality of Radio Buttons.

Three scenarios are covered.

  1. Each radio button represents an object. For example, there may be a radio button for each element of an array. When one of the radio buttons is selected, a variable is assigned the corresponding array element. So, a variable called $scope.selectedPerson can be automatically assigned to the selected ‘person’ in an array of ‘person’ objects.
  2. Similar to ‘1’ except instead of selecting a complete object, it’s possible to select just a property of an object. E.g. instead of $scope.selectedPerson, the variable can be $scope.selectedPersonName. This is a simple elaboration on the first scenario purely for emphasis.
  3. This scenario is considerably different. Take elements being added to an array dynamically through a UI, the user adding the elements needs to assign one of them as the default element. This is achieved by setting a property (isDefault = true for example) in the array element object. The other array elements have their isDefault property set to false. Unlike the previous two examples, an external variable is not being set, the elements of the array themselves are being manipulated.

Continue reading “AngularJS – Radio Buttons – Three Scenarios”

AngularJS – isolate scope – ‘&’ (function reference)

Introduction

This blog demonstrates how to pass a reference to a function to an angular directive/template.

The way in which the child directive/template calls the parent is also demonstrated.

The example is available as a working JSFiddle here.

This tutorial details creating directive/templates in general (without an isolated scope).

This tutorial demonstrates passing values by value to angular directives/templates (@).

This tutorial demonstrates passing values by reference to angular directives/templates (=).

Continue reading “AngularJS – isolate scope – ‘&’ (function reference)”

AngularJS – isolate scope – ‘=’ (pass by reference)

Introduction

This blog will explore the concept of passing object to angularJS directives / templates using by reference.
When an object is passed by reference both the parent (controller or parent directive) and the child directive/template have access to the object. The relationship is bidirectional.

This tutorial details creating directive/templates in general (without an isolated scope).
This tutorial demonstrates passing values by value to angular directives/templates (@).

Continue reading “AngularJS – isolate scope – ‘=’ (pass by reference)”

AngularJS – isolate scope – ‘@’ (pass by value)

Introduction

Objects can be passed into an angularJS directive in any one of the following ways:
By value using ‘@’
By reference using ‘=’
As a reference to a function in the parent controller using ‘&’

The next few blogs will detail each of these techniques.

This blog will detail the ‘@’ (by value technique).
For detail on creating an angularJS template via a directive please see this blog http://outbottle.com/using-templates-with-angularjs/

Continue reading “AngularJS – isolate scope – ‘@’ (pass by value)”

Using templates with AngularJs

The purpose of this blog is to demonstrate how to use templates in AngularJS. A fully worked example is provided via jsFiddle. The example is simple and easy to follow. A detailed but succinct explanation of the code is provided.

The template is “complex html” that we’ll want to reuse. The directive will allow this complex html to be delivered anywhere without code duplication. This obviously has advantages in terms of code reuse and maintainability.

Continue reading “Using templates with AngularJs”

AngularJS – Permitting AngularJS templates in IE8

So, you’ve got something like this:

But you find that in IE8 the directive that populates the <mytemplate/> element is not working at all in IE8. IE8 will not initialise the controller and hence your $scope is null.

Continue reading “AngularJS – Permitting AngularJS templates in IE8”

Resolving AngularJS minimization / obfuscation issues

AngularJs uses Dependency Injection (DI) to supply objects/variables during configuration.
Variables that begin with the $ character tend to be injected, therefore if a minimizor and/or obfuscater changes the variable name, the DI will not be performed.

This Angular Crash Course provides a detailed intro on AngularJS.

This blog details a common solution to the problems arising from minimization / obfuscation.

Continue reading “Resolving AngularJS minimization / obfuscation issues”

AngularJS – A crash course – in processing AJAX JSON

I’ve recently started using AngularJS http://angularjs.org/ . It’s very impressive. It’s extremely useful for handling/processing AJAX JSON results.

This blog demonstrates the following:

  1. Setting up an AngularJS “application”.
  2. Binding (dynamic) JSON data to the view. I.e. processing an AJAX callback.
  3. Invoking an AngularJS Controller function externally from outside the AngularJS scope.

 

  1. The above is demonstrated with a simple html page that loads some JSON asynchronously (using AJAX). The code is available for download below.
  2. The result is something of a crash course on AngularJS.

Continue reading “AngularJS – A crash course – in processing AJAX JSON”