Category: AngularJS

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

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

Spring 4 Web MVC with AngularJS

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 […]

Spring 4 Web MVC – JSON Handling

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 […]

AngularJS – Radio Buttons – Three Scenarios

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. 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 […]

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

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 […]

AngularJS – isolate scope – ‘=’ (pass by 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 […]

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

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 […]

Using templates with AngularJs

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. […]

AngularJS – Permitting AngularJS templates in IE8

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.

Resolving AngularJS minimization / obfuscation issues

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 […]

AngularJS – A crash course – in processing AJAX JSON

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: Setting up an AngularJS “application”. Binding (dynamic) JSON data to the view. I.e. processing an AJAX callback. Invoking an AngularJS Controller function externally from outside the AngularJS […]