node js mongo db and angular js tutorial for beginners from scratch

node js beginner guide with mongo and angular

node js step by step tutorial showing you how to create a full fledged node js angular js and mongo db for beginners who have never played with these technologies or played partially independently but not all those technologies together.

I assume installing nodejs to your computer can be found easily and I will not go through that.

Starting with a simple Hello world display with webserver

Node js is a fully functional webserver and processor that is created off of Googles V8 engine. It is very light weight and the syntax is javascript syntax.

Unlike other languages where you have to setup and configure a different independent webserver, node js, comes with a total self contained web server serving at ports that you can assign. Which makes it a full one stop web application.

For comparison, when working on php might require you to setup a different webserver like Apache or IIS.

In this part, I will show a very simple old school hello world example to be done in node js.

In the upcoming tutorials, you will see how to change those step by step.

Hello world in node js

1. Create a folder in your computer and name it as node-tutorial

2. in the node-tutorial folder create hello.js file

3 on hello.js add the following code in it.

console.log("Hello World");

Then save the above file and run the file as

node hello.js

This will print Hello World in the CONSOLE.

What did happen

The above code is running from the node js as a command line code. There is no any web server, that making it available through browsers per se, this time, it will just print that on right on the terminal you are running it.

You might know console.log() from your javascript coding and it is doing the same task here in node as well.

Next: Run Hello World using http through browser

Browser shows the same image after the update

If there is an image change on the same file name, say logo.png or front.jpeg, the change won’t happen right away unless you force refresh it on browser to clear the cache.
The problem with this one is when you have dynamic updates and your users couldn’t see the change right away b/c of the cache.

The simple fix for this would be appending version at the end of the file name. Like your original html would look like:

img height="200" src="/path/to/image/file.ext" 

Then appending the version at the end

img height="200" src="/path/to/image/file.ext?v=someVersionGoesHere" 

For any backend it would be easy to append the versioning when the image is presented. It could be random number or unix timestamp would work in this case too..

If you are generating the images from javascript, say based on the json response, you can do

var version = new Date()->getTime(); //get the unix timestamp
var path = "/path/to/image/file.ext?v="+version;

$('#image_id').attr('src', path);

Shall do the trick. I used jQuery her but, it is not limited to it..

Select an element with multiple classes jQuery

CSS Classes, as we know are the main drivers in the UI. Since we have only one id per element, our arena or tweak on that area is almost limited.
But classes are possible to be deployed multiple times per element and we can apply independent actions per classes..
Now, when you have two classes assigned and you want to single out that element having two classes in jQuery you would do

$('.class1.class2')

Without any space in between.
Common usage would be with javascript where you would take and put classes based on actions.

Yup!

Mommy look.. Upgrading jQuery breaks live :(

If you have upgraded jQuery to 1.9 then you would have dreaded Uncaught TypeError: undefined is not a function would be barking at you on your javascript console.

The fix
According to the jQuery site, you would need to replace live with on

Say if you have:

$('.selector-class-name').live('click', function(){console.log('
Applications programming is a race between software engineers, who strive to produce idiot-proof programs, and the universe which strives to produce bigger idiots. So far the Universe is winning.
Rick Cook
')});

Then you would have to change this to the new version using on as follows.
*The current on will be passed the event owner as a parameter so, we have to have a way to know the parent of the event owner, in this case the object with class selector-class-name.
If we don’t know the parent we can implement body tag

$('parent-of-object').on('click', '.selector-class-name', function(){
Applications programming is a race between software engineers, who strive to produce idiot-proof programs, and the universe which strives to produce bigger idiots. So far the Universe is winning.
Rick Cook
});

This shall take care of the problem.

How to dynamically construct Backbone js collection url

Constructing Dynamic URL in backboneJS Tutorial with Example

Working on Backbone js and wanted to pass the url dynamically?

Say you want to fetch the data based on the url


url: someurl/{dynamic-value}/content/{dynamic-value}

Here are some steps to accomplish constructing backboneJS url dynamically based on runtime values.

How to select element with multiple class

Solution

Lets assume your collection looks like this


var Members=Backbone.Collection.extend({
	url: function(){
		return url+'attendees/'+this.options.group;
	},
	initialize: function(models, options){
		this.options=options;
	}
});

On the above example your dynamic url might look like
http://somethingsomething.com/attendees/presenters – where presenters is something you added dynamically

and on your view


var Attendees=Backbone.View.extend({
	el: 'YOUR VIEW',
	render: function(){
		var view=this;
		var member=new Members([], {group: 'presenters'});
		member.fetch({
			success: function(members){
				var template= ...YOUR STUFF GOES HERE
		});
	},
	events: {
		'click #activities': 'membersByActivity'
	},
	membersByActivity: function(){
                YOUR LOGIC..
		return false;
	}
});

The important part for creating dynamic url in backbone js is:


var member=new Members([], {group: 'presenters'});

where you can change the presenters part as you like dynamically

node js server downloads text/html as file on browser

Those of you who work with webserver, like apache, might already have seen that problem – like the php file that was intended to display content would be downloaded as file.. this has some fix on configuration right..
Now coming to node js, once you install the server like

  1 var http_server=require("http");
  2 http_server.createServer(function(request, response){
  3     response.writeHead(200, {'Content-Type': "text/html"});
  4     response.write("I am listening @port 8896");
  5     response.end();
  6 }).listen(8896);

This should run fine once you run node filename.js where filename.js is the file containing the above code.
but, when you try to run by going to localhost:8896 and in place of seeing the text on your browser, if the browser decided to download the file, give a a careful look at line number 3 to be sure that you have specified correct content type..

Browser automatically sorting json object based on key problem..

Json data got sorted on browser by its key

This a problem where the browser decides to sort the json you provided its own way rather than the one you sorted.

And it happens especially if you have key value pair in json payload you are passing.

So the scenario would be, there JSON data you are sending from the backend is sorted and you displayed it on front end with some javascript, but the result you are showing is not sorted with the original sorting order you set.

Solution

I observed that some browsers, at least Chrome, is doing the sorting in the situation that is discussed above.

For the fix: make the key of the json values you are passing string format rather than number

like

in place of using:
{1:"one", 4:"four"}

use

{"1":"one", "4":"four"}

Convert list tag li to horizontal links using CSS

Anybody involved on the front part of the web would be using it since s/he is 3 or something..
but if your programming time logs heavily show you are working much on the backend stuff.. this might help a bit..

here is the given list
<pre>
<ul>
<li>link1</li>
<li>link2</li>
</li>http://gullele.wordpress.com</li>
</ul>
</pre>

do the following css and it would take of making it horizontal

<pre>

ul{

margin:0;

padding:0;

}

li{

display: inline;

padding: 0 0 0 0 – give appropriate values here based on your chice

}

</pre>

This shall produce a li tag being on the horizontal..