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)”

Rounding a number up to it’s nearest order of ten

I’m hopeless at math, this is just for future reference as it really bugged me. How to round a number up to it’s upper order of 10. Not a simple as it may seem.

Examples:

800 -> 1000
125 -> 1000
80 -> 100
43 -> 100
8 -> 10
9 -> 10
0.8 -> 1
0.23 -> 1
.08 -> 0.1
(consider -> to be “goes-to” or “rounds-up-to”)

 

The solution Continue reading “Rounding a number up to it’s nearest order of ten”

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”

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”

CSS – Removing the (new-line) spaces between inline elements

image

Observe the gap between the checkbox and the label on the second instance!

This is a “feature” with inline (or inline-block) elements on a page. A new-line /carriage-return in the code is treated as white space between inline elements.

While good advice would be to work with this rather than against it as someone mentioned on stackoverflow; there are still times when you need to get rid of the spaces.

Continue reading “CSS – Removing the (new-line) spaces between inline elements”

jQuery-UI : change the color of a button using CSS classes

In many web applications it’s necessary to have more than one color button, primary and secondary for example.

Changing the color of jQuery-UI buttons using CSS
Changing the color of jQuery-UI buttons using CSS

This tutorial demonstrates how to achieve this using only CSS.

Continue reading “jQuery-UI : change the color of a button using CSS classes”

jQuery-UI : Specifying different Button Icon colors using only CSS classes

Doing this:

Results in

Specifying Button Icon colors using CSS only rather than using custom JavaScript
Specifying Button Icon colors using CSS only rather than using custom JavaScript

This tutorial demonstrates how changing the icon color can  be achieved.

Continue reading “jQuery-UI : Specifying different Button Icon colors using only CSS classes”

jQuery-UI : Applying an Icon to a button using CSS classes

This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.

Adding icons to buttons using CSS only
Adding icons to buttons using CSS classes in the same way as using icons in general

Continue reading “jQuery-UI : Applying an Icon to a button using CSS classes”

jQuery-UI : Changing the color of an icon

This quick tutorial demonstrates how to change the color of jQuery UI icons.

e.g.

changing the color of jQuery-UI icons
different colored jQuery-UI icons

will result in red and blue icons respectively

Continue reading “jQuery-UI : Changing the color of an icon”

Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)

Edit 10-Feb-2015

A much better approach to this problem is simply to use JSON. A number of comments below are in regard to nested lists. The solution detailed here does not readily facilitate nested lists. The solution outlined in this blog does: http://outbottle.com/spring-4-web-mvc-json-handling/. JSON is the recommended way of achieving “Adding Objects to a List element on the fly”

End Edit

Edit 12-Feb-2015

Alternatively, this blog also demonstrates the solution:

Spring 4 Web MVC with AngularJS

Abstract

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.

End Edit

 

ok, hard to describe this one and hard to find stuff on google so here’s an image explaining.

Add and Remove Items from List Dynamically in Spring 3 Web MVC
Add and Remove Items from List Dynamically in Spring 3 Web MVC

When clicked, the ‘Add’ and ‘Remove’ links in the image generate JavaScript events which add and remove the HTML elements dynamically client-side. The idea is to allow a Java List Object to have elements added and removed dynamically on form submission.

A Generic JavaScript library is provided. It makes the process of dynamically adding List elements (rows or Person objects in this example) effortless for any situation. The JavaScript library provides callabacks thus facilitating an AJAX implementation with little effort.

The Netbeans project and the JavaScript file are available for download at the bottom of the page.

Continue reading “Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)”

Useful Regex (Regular Expressions)

Description JavaScript Java or C#
Integer No Spaces (anywhere) /^([\d]+)$|^$/g ^([\\d]+)$|^$
Empty String or Integer No Spaces (anywhere) /^([\d]+)$/g ^([\\d]+)$
Alfa or Numeric Characters Only /^[A-Za-z0-9]+$/ ^[A-Za-z0-9]+$
Alfa or Numeric Characters Plus listed Other Chars /^[A-Za-z0-9#!]+$/ ^[A-Za-z0-9#!]+$ Matches alpha or numeric or # or !

 

Spring 3 Web MVC – Exception Handling – incorporating AJAX

Spring 3 Web MVC Exception Handling with AJAX
Spring 3 Web MVC Exception Handling

This tutorial demonstrates how to handle exceptions in Spring 3 Web MCV.
Emphasis is given to Handling  exceptions that occur during AJAX requests. I.e. in the event of an exception during an AJAX request,  it is not desirable to redirect to an error page, instead JavaScript error handling code should be invoked with relevant information passed in.

 

A Netbeans project is available for download at the bottom of this page.

Continue reading “Spring 3 Web MVC – Exception Handling – incorporating AJAX”