AngularJS collaboration board with

  • Knowledge needed: Intermediate JavaScript
  • Requires: Node.js, NPM
  • Project Time: 2 hours

AngularJS is particularly well-suited for creating rich client-side applications in the browser and, when you add in a little into the mix, things get really interesting. In this article we are going to build a real-time collaboration board that uses AngularJS for the client-side application and to share state between all connected clients.

Let's cover a bit of housekeeping before we get started. I'm going to presume that you have a fundamental grasp of HTML and JavaScript as I'm not going to cover every little corner of the code. For instance, I'm not going to call out the CSS and JavaScript files I've included in the head of the HTML file as there is no new information there.

Also, I encourage you to grab the code from my GitHub account to follow along. My good friend Brian Ford also has an excellent seed, which I based some of my original ideas on.

The four main features we want in the collaboration board is the ability to create a note, read the notes, update a note, delete a note and, for fun, move a note on the board. Yes, that's correct, we're focusing on standard CRUD features. I believe that by focusing on these fundamental features, we will have covered enough code for patterns to emerge so that you can take them and apply them elsewhere.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.