AngularJS

Functional Reactive Programming with Angular and Sodium

| tnfink

Functional reactive programming (FRP) is a variant of reactive programming for the development of user interfaces based on the functional paradigm and a strict set of basic operators. In contrast to reactive frameworks, such as RxJs, using FRP enables a developer to define a pure area in her code in which some error classes, typical for event-based architectures, do not occur. Sodium is an FRP-framework, which is independent of a specific GUI-framwork and supports several different programming languages. Here, we describe how to use Sodium together with Angular.
Continue reading →

Interactive SVG with AngularJS – Part 2

| Karsten Otto

When developing mobile web applications with responsive design, SVG are a viable solution for flexible images.
AngularJS in turn enables the wrapping of complex UI logic into custom HTML directives, resulting in clean and maintainable modules.
The combination of these technologies provides a good basis for interactive control and status elements. It is suitable both for building highly complex custom controls, as well as covering simple use cases in a generic manner.

Part 1 of this article explores several methods of employing SVG as flexible images in a cross-browser compatible manner.

Part 2 describes the use of AngularJS to construct custom control and status elements by manipulating SVG images.
Continue reading →

Interactive SVG with AngularJS – Part 1

| Karsten Otto

When developing mobile web applications with responsive design, flexible images for interactive control and status elements pose a particular problem.
SVG offer a viable solution: They are much smaller than bitmaps of comparable size, and can be manipulated through their DOM API.
AngularJS in turn is well suited to wrap complex UI element logic in custom HTML directives, resulting in clean and maintainable modules.
Combining the two sounds attractive, but involves a couple of stumbling blocks to avoid.

Part 1 of this article explores several methods of employing SVG as flexible images in a cross-browser compatible manner.

Part 2 describes the use of AngularJS to construct custom control and status elements by manipulating SVG images.

Continue reading →

Maintainable Rich Web Applications with AngularJS – Part 2

|

In the last post we used a demo application to discuss the development of maintainable Rich Web Applications with AngularJS. We introduced the most important concepts: The Model View Controller pattern and its application, the extension of HTML using directives and the routing concept to define the navigation between views.

This post explains how to integrate AngularJS into a build process based on Maven and shows how to develop automated unit tests and end-to-end tests for AngularJS applications.

Continue reading →

Maintainable Rich Web Applications with AngularJS – Part 1

|

Compared to Thin Web Applications, Rich Web Applications imply a higher grade of client-side functionality and complexity as opposed to the server-side. The user interface of a typical Thin Client architecture is server-generated (per page), while rich clients are complete applications running in a web browser. This allows for user interfaces that are more user-friendly, more performant and offline-enabled. Such characteristics, offline capability in particular, are especially important for mobile applications.

HTML5 has established itself as an alternative to solutions like Flash, Java Applets and Silverlight. Compared to proprietary products it offers an open and platform-independent technology standard. Here, HTML and CSS describe the static structure as well as the design of the user interface, while the client-side dynamics is implemented using new HTML5-APIs and JavaScript.

The development of Rich Web Clients using HTML and JavaScript is complicated by maintainability problems though, as the combination of HTML and JavaScript alone offers no possibility to modularize and test the client in a clean fashion. AngularJS considers itself to be an HTML extension dealing with this problem in order to enable the development of maintainable JavaScript-/HTML based Rich Web Applications.

This blog post series introduces the JavaScript framework AngularJS. This first post explains the essential concepts of AngularJS, like the application of the Model View Controller pattern, the extension of HTML by so-called directives as well as the routing concept. In the second post, we will show the integration of unit and end-to-end tests as well as embedding those into a Maven build process.
Continue reading →