Setting up for a simple AngularJS web app

AngularJS - what's all that about then?

After checking out the tutorials and examples on the official Google AngularJS site, I started to create some sample web apps for myself.  Mainly to see how things worked, how they performed and how they could be used.

and if you have 60mins spare, have this video on in the background to get a good overview:

(Back in the good old days of working at AvantGo - I once worked with Brad Green...small world)

Right, back to the purpose of this page.  I want to make a simple web app using AngularJS, how do I go about it? Do I need to create Services? Directives? 100's of controllers? someone said I "needed" BackboneJS too..... whoooaaa.... okay, before everyone has their own opinion and distracts you in 100 different directions, politely ignore them.  You want the basics, so stick to it.

For the BASICS, all you need is the AngularJS download zip that you will extract to a folder.  This will contain all of the JS files that you will need.  (We could get into a debate about using CDN references, but as I'm interested in eventually running these web apps "offline" (yes, believe it or not, there are a lot of times and places where you don't have internet connectivity) I will have the raw source files to hand).

There are tools that you can use to generate a skeleton web app folder structure....but really? come on, how hard is it to be consistent yourself? are you genuinely THAT lazy?  Ok, I admit it might save you 1 minute of your life and typos.... in which case create a stubbed out template web app that you can copy/clone from... oh wait a minute, I just fell into that one didn't I :-)
The key here is to split out the services / controllers / directives / views (or partials if you want to call them that) and keep that structure consistent.

I assume you've already got a web server installed? For simplicity, we'll use NGINX.  It's quick, simple and you'll be up and running in 5 minutes.

Once you've install nginx, all you need are the essentials underneath it.


and at the \sampleApp level you will need your index.html file.

The index.html file will be your main container that will always be loaded and it will just load different views within it depending on the routes selected.
Now, I sneakily dropped references to "different views" and "routes" into that last sentence... hopefully, you would have already have stepped through the AngularJS tutorials so I don't have to explain it all here?
Put simply, AngularJS has a module called ngRoute. This is responsible for handling the navigation of your web application.  I'm also assuming you're building this as an SPA (Single Page Application), so that it can run across all devices.  The routing is usually defined within a .js file that you create.  I created one here called app.js that is placed in the \scripts folder.
Within this app.js file I define what the web app should do when it is asked to navigate to different routes.
For instance, if there is a link to '#/customers' then there will be an entry to deal with this.  The entry will tell the web app what view will be needed to be navigated to and what controller to use.

So, there we have an index page that nginx will serve up as a normal web page.  index.html will have links to the \scripts\angular\angular.js and \scripts\angular\angular-route.js files, along with links to the controllers that are required for the views \scripts\controllers\customers.js

The controller is the place where you can create functions that are executed by actions within the matching view.  If you have model data then this allows you to do 2-way data binding.
For instance, if you have a dropdown selection box that you wish to have pre-populated you can define this in the controller (or more ideally you can fetch the data from somewhere else within the controller) and then bind it to a $scope.xxxxx variable that you have then defined within the .html file.

I just noticed there is a lot of text here and not a lot of pictures - which is rare for me - I usually do everything with screenshots!

Here's a great article, that I'm not going to duplicate (you will find that there are 100's of mis-leading and repeated AngularJS articles/tutorials out there - you'll eventually find out what are the good one's) but it explains what I mean and gives you exactly what I'm explaining here:

Why didn't I repeat that?  well, time is always tight and to be honest, I have a full blown MEAN web app that I want to explain in-depth and in-detail rather than worry too much about re-explaining the basics.
I also then want to show how to move that MEAN app to be offline and use Cordova... and then how to port it across with minimal changes to use IBM Worklight...... and to then see how we can get IBM BlueMix into the equation.....

oh and I have to dig out the stuff I did last year in relation to "The Internet of Things", ie. getting an Arduino device to read sensor data, send it across the network using MQTT and push it out to subscribed devices to alert me when the readings get past a certain threshold.... apparently I can now use BlueMix in that equation too...  now, where did I put that code? did I back it up? is it on my "other" laptop?....