Click here to Skip to main content
15,867,308 members
Articles / AngularJs

Angular.js Example Application

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
3 Mar 2014CPOL3 min read 17.2K   4   4
Angular.js example application

This article is my first one for quite a while, there is a reason for that but I will not bore you all with that. Anyway, I have written this article after a little time off. So what does it do, what is this article about?

I decided to spend a bit of time to learn a bit more about a popular web MVC framework by our friends at Google called Angular.js, which is a JavaScript MVC framework, which is a bit of a departure for me from my usual XAML influenced world. It is however good to try things out to get an appreciation of how you would do things in different languages/environments (my old mentor Fredrik Bornander (AKA the Swede) told me that), so I decided to take Angular.js for a spin.

So I decided to knock up a small demo project. The demo is actually split into 2 pieces.

Publisher

This is a standard WPF project, as such produces a EXE file that can be run. I will not be spending too much time talking about the publisher in this article, as it is not the important part of the article, it is simply a vehicle to demonstrate stuff within the Angular.js web site. Anyway what the publisher does is to allow user to click a image, when the user clicks an image, a message is sent to the Angular.js web site using web sockets (more on this later). In a nutshell, that is all the publisher does.

Website

The Angular.js web site is where the fun stuff happens (at least in my opinion). The Angular.js web site essentially carries out these tasks.

When on the root page, the Angular.js will listen to messages sent via the WPF publisher over a web socket, which then gets broadcast internally using the Reactive Extensions for JavaScript to anyone interested, which in this article is essentially just the root page.

The root page will display an image tile for each allowable message received. The image tile may be resized and dragged around thanks to some jQuery UI love. The user may then choose to save the image tile to their favourites, which will cause ALL the information about the image tile to be saved to HTML 5 local storage. This information includes size, position, etc., so when the user comes back to the root page, their favourites (the ones they saved) should appear exactly as they were before. The user may also decide to remove image tiles from their favourites from the root page.

The user may also choose to navigate to a favourites page that will display some thumbnail images of their HTML 5 local storage persisted favourites. These thumbnails may be clicked on to show a pretty standard ColorBox (Lightbox, etc. type thing) jQuery plug in.

The user may also choose to a view static about page, which I simply added to make enough routes to make things more worthwhile when demonstrating the routing within Angular.js.
So in plain terms, that is all there is to it, this image may help to solidify what I just stated in words, picture says 1000th words and all that:

overview

And this is what the finished application looks like when it is running:

AllBig

Want to know more, well, the full article is available here:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.

Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

 
GeneralMy vote of 5 Pin
Christian Amado18-Mar-14 9:44
professionalChristian Amado18-Mar-14 9:44 
GeneralRe: My vote of 5 Pin
Sacha Barber18-Mar-14 11:54
Sacha Barber18-Mar-14 11:54 
GeneralRe: My vote of 5 Pin
Christian Amado18-Mar-14 14:34
professionalChristian Amado18-Mar-14 14:34 
GeneralRe: My vote of 5 Pin
Sacha Barber18-Mar-14 22:42
Sacha Barber18-Mar-14 22:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.