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

Gullele's Corner

introduction to Angular js for usage of node js

introduction to Angular js for usage of node js

Angular basics

Leave a Reply Cancel reply