/, Software Development, Web, Web Apps/Building Single Page Applications with Angular 4 and beyond

Building Single Page Applications with Angular 4 and beyond

This article takes you through my experiences of building an Angular 4 single page application. Some familiarity with javascript, node and REST based APIs might help but is not required for this introduction.

Why should I use Angular?

Angular is a wonderful framework for building modern, single page web apps where you want a short as possible semantic path between the data source and browser screen. Having this ‘short path’ makes it easier for a developer to make the necessary changes to bring functionality and data into the right parts of your application.  ‘Single page apps’ or SPAs are can be built upon a node framework (javascript app server) and Angular is typescript driven (superset of javascript) so these two make for an excellent choice for full-stack developers who are often working on several parts of the app at the same time – database, API as well as front-end.

Angular (also known as Angular 4 or soon Angular 5) replaces a previous incarnation of itself now known as Angular 1.x or AngularJS. AngularJS did a good job of separating the functionalities of the backend interaction from the user facing pages and Angular takes this a step further by cutting down on a lot of needless boiler-plate code, adding support for Typescript (and therefore proper classes which provide better encapsulation for features) and improving code organisation and management with clearer structure along with a really useful command line tool for getting you up and running.

The Angular-CLI

The Angular command line interface (angular-cli) allows simple scaffolding (initialisation) of Angular apps and also lets you add more features to your app in the way of components and services with simple commands. This means you won’t need to spend your time copying and pasting files to add new services and components. If there was one criticism of AngularJS was that it could be very complicated to hook up the services and the front-end so we’ll see in this article how the visual components interact with the backend through use of the app Module, Components and Services.

Modules

Every Angular app needs at least one module and it’s usually found in a file called:

app.module.ts

Among other things this file is where you define what your application needs to import to make available to its Services and Components.  When you add a new piece of library functionality to your application make sure it gets added in your application module as well.

Services

These are where you make your connections to remote APIs (or mock data) and return an object or set of objects that the front end can utilise.  Additionally you can store application state and provide helper routines. Typically services provide the data or the management routines (or both) in order for you to present and work with the data in your app.  Services make it easy for the developer to abstract functional requirements into a reusable piece which can be used by Components.

Components

Components are sections of the screen where you can embed your data.  A component comes with a typescript file which defines the interactions and the services that this component interfaces with, an HTML file to define the markup and usually also a CSS file to style this HTML.  A component is also associated with a specific HTML anchor therefore you can easily embed your components in a top level or other template files.   Components can be nested and play together nicely in applications especially if the data model and your accessing services are well designed.

Recommended Components

When you’re starting it’s often daunting to jump straight in with an empty app.  The Angular CLI makes it simple to scaffold a brand new Angular app however you’ll want to build it out with some useful features.

One great first step is to integrate angular-bootstrap for some of your visual component needs such as buttons, accordions, date picker controls, tabs, tooltips and many more.  There’s also a very useful copy and paste demo of the Angular bootstrap components.

Additionally one of the go-to visual frameworks for more advanced features is Angular Material. Material includes tab views, tables views, lists, buttons, paginates – all sorts of wonderful goodies for making beautiful looking applications all built on top of Angular.

Next steps

There are many resources out there that will help you get started with Angular. For a full run-down of the features you’ve probably ended up at this page however it can be a little intimidating and seem overly complicated so I would suggest looking at some example apps and some Plunkers of features that are already working.

It’s also good to know that Angular is still evolving and changing and although is now more than ready for the prime time you will find that the documentation is still a little lagging in some areas – particularly during the recent large changes to Angular Material namespaces for example.   Angular is always moving on and while this will have limited impact on application developers in the short term it’s good to remember that like all of the node-associated world it’s a moving target!  When you build your apps remember you also need to support them in the future so it’s best to stay aware of the latest changes.

Angular is a wonderful framework – the lessons of AngularJS have been learnt and distilled into a new shorthand way of integrating data and visual components ready for the web and mobile and beyond.  The addition of typescript as the main language for Angular also means that the codebase is cleaner, more modular and easier to support than ever before.  The layout of code components is also much cleaner and easier to maintain through the angular command like API.

Above everything else Angular is a fun way to build SPA applications. If you’d like to see some examples then please have a look at the upcoming administration dashboard for our IoT portal. We’re writing this right now completely in Angular 4/5 and it will feature many of the components and features mentioned above.

For the moment, have fun with Angular and let us know your experiences in the comment below.

By |2017-10-21T11:59:59+00:00October 21st, 2017|Angular, Software Development, Web, Web Apps|

About the Author:

Richard Bown is owner of Xyglo BV - a small software business located in Amsterdam, NL. Xyglo specialises in building software solutions for clients of all sizes - in particular for IoT, (big) data and database integrations, API design and deliver, front-end and mobile apps. Richard is also an IT consultant specialising in coaching and mentoring continuous integration and delivery and development best practice.