introduction to Angular js for usage of node js

This is a continuation of the tutorial started on node js angular and mongo db shown on
node js console tutorial

I might not go over the basics of angular js here except what is needed for the tutorial.

The main idea in using Angular js would be to make sure the front end and back end are completely separated and they would be talking each other through end points that are designated through node js.

Angular basics

Angular is an MVC architecture oriented javascript framework. I will have some example that would illustrate that as a basic introduction.


<html>
	<head><title>Testing angular</title></head>
	<body ng-app="HelloTest">
        
		<div ng-controller="HelloController">
			<p>{{concat}}</p>
		
            <div> <input type="text" ng-model="color" ng-keyup="updateColor()" name="color" /></div>
            <div> The selected color is {{current_color}} </div>
        </div>

	    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>  
        <script>
		    angular.module("HelloTest", []).controller("HelloController", function($scope){
                $scope.concat = "Whatever goes here";    
                $scope.updateColor = function () {
                    $scope.current_color = $scope.color;
                };
            });
	    </script>
    </body>
</html>

Save the above code in a file angular.html and just double click on it to see it running.

The above simple example shows a basic usage of events in Angular js. All it does is printing whatever you put in the text box as color.

Basic points in the Angular application

ng-app="HelloApp" : this would be assigned usually on the root of the html dom. It tells that pages is under the given ng-app. See how that name aligns with the name angular.module("HelloApp")

ng-controller The app can contain a number of controllers under it. A controller is the one that sits between the view and logic that would fill up the view. in this example, the ng-controller="HelloController" will be used for the directive it has been defined. In this example for the whole element of the div it has been declared for.

You can have as many controller as you want in the given app


//create the application here
var app = angular.module("HelloTest", []);

//create the controller.
app.controller("HelloController", function($scope){
                $scope.concat = "Whatever goes here";    
                $scope.updateColor = function () {
                    $scope.current_color = $scope.color;
                };
            });

//create another controller.
app.controller("AnotherController", function($scope){
                $scope.concat = "In another controller";    
            });

The above shows how you can have more than one controller in the app.

$scope is the special variable passed around that would give the whole scope that the controller has authority of.

the {{ }} is the place holder that would be assigned the value from the controller. In the example above, concat and current_color are the ones to be assigned from the controller and get their values being assigned where ever they are.

Angular has lots and lots of directives for the condition, loop and the like

Next: get the list of countries from node and showing them using Angular example

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