Call php scripts from AngularJs running under NodeJs with express

Hi everyone,

Last night I’ve broken my head trying to run a php script from an Angular application running under Nodejs with the excellent “express” http server.

First, let’s go back to the basics, what is NodeJs?
Node.js® is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications” Source: (http://nodejs.org/).

NodeJs is not directly a server, but a platform that can implements a lot of modules, like an http server.
For my project I’m using expressJs web application framework. More documentation about expressJs here: http://nodejs.org/

With expressJs, you can use an http server without having to use an external software like Apache, Lighttpd or Nginx.
it will offer you the opportunity to serve static files (html, js, css…), but not dynamic files like php files.
Give it a try by calling a php file within your angular application only running under NodeJs, you will get a 404 (forbidden error).

To solve this problem, you have multiple issues:
– Try to customize a module that will enable php parsing inside NodeJs
– Use an additional php server like Apache or Nginx

For simplicity reasons, we will choose the second option, it was my case after hours of research.
So, turn on your external http server (if it’s not already the case).

Right, now you have two servers running on different ports (Apache or Nginx, or anything else on port 80, and Node on port 8080 or another).

The solution will be:
1. To call your php files on port 80 served by your php server, inside your ajax call, just like this:

$http({
    method  : 'POST',
    url     : 'http://localhost:80/process.php',
    data    : $.param($scope.formData),
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function(data) {
    console.log(data);
}).error(function(data) {
    console.log(data);
});
  1. Allow CORS within your server side application, as we’re making ajax requests
    header("Access-Control-Allow-Origin: *");
    

And voilà, the job is done.

Call php scripts from AngularJs running under NodeJs with express

AngularJS – your first Hello world tutorial

Hello there, today, we will start a basic entry to the AngularJS framework.

But, before that, I encourage you to learn the origins of the framework on Wikipedia here http://en.wikipedia.org/wiki/AngularJS, the differences between JQuery and AngularJS i have posted here https://creativcoders.wordpress.com/2014/05/11/differences-between-jquery-and-angularjs/.

This first tutorial is very simple and basic, we will just show our first “Hello world” with AngularJS, later I will show you more complex tips.

We will not use css in this example, just create a specific folder in which you will create an index.html file and a simple helloWorld.js file in a directory called “js”, like this.


js/helloWorld.js
index.html

Your index.html template must look like this:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Angular - first hello world</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <section>
        <header id='header'>
            <h1></h1>
        </header>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="js/helloWorld.js"></script>
</body>
</html>

Ok, you see in this example that we already have included angular.js from Google and our helloWorld.js script.
Our job will be to update h1 tag and apply it a dynamic text… “Hello world!”, let’s go!

To tell AngularJS that we will work in the body, we have to decorate it with a directive called ‘ng-app’, let’s name it ‘hello’, just like this:

<body ng-app='hello'>

Then, we have to create in js/helloWorld.js, an empty ‘hello’ Angular module that will initiate angularJSin the body.

var app = angular.module('hello', []);

AngularJS now knows that we will manipulate the body with the hello module, but we want the “Hello world!”text in the h1 tag to be dynamically modified.
We will then target he head tag “section” upon h1, and decorate it with a controller directive we will name ‘helloController’, just like this.

<section ng-controller='helloController'>

Now, we will attach to hello module, a helloController.

var app = angular.module('hello', []);

//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
});

Right! you know how to attach an Angular module to a body and a controller to a tag, now, we need to attach a dynamic data (model) to h1 tag.

To do this, we will work with models, models in AngularJS help you manipulate datas through ng-model directive in the view. You only have to change datas in the specified controller through the scope.

Simple example, if you have to change a tag var or an input value, you have to specified a directive called ng-model to it, and a corresponding var like this “{{myModel}}” in the value field.

Concrete example, we specify a model directive we name “welcome”.

//Like many other templating engines we use double brackets to define vars
//When defined in the controller, the var model "{{welcome}}" will be dynamically replaced
<h1 ng-model='welcome'>{{welcome}}</h1>

In the controller, we simply add this to the scope

var app = angular.module('hello', []);

//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
    $scope.welcome = 'Hello World!';
});

This is how your complete html code must look like.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Angular - first hello world</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<!-- ng-app is a directive that specifies that we are using angular.js -->
<body ng-app='hello'>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <section ng-controller='helloController'>
        <header id='header'>
            <h1 ng-model='welcome'>{{welcome}}</h1>
        </header>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
     <script src="js/helloWorld.js"></script>
</body>
</html>

Congratulations, you’ve just done with success your first hello world tutorial with AngularJS, wasn’t it so simple?

More tutorials will come soon, keep in touch.

AngularJS – your first Hello world tutorial

AngularJS – Test driven development tutorial

AngularJS is a great framework that allow separation of concerns pattern, if you’re new to AngularJS, maybe you need to learn differences between JQuery and AngularJS i’ve explained here https://creativcoders.wordpress.com/2014/05/11/differences-between-jquery-and-angularjs/.

For this first tdd with Angular, we just want a simple directive to indicate in our menu what our current route is. We can declare what we want in our view:

//View in the html
//<a href="/hello">Hello</a>

//Test begins here:
it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello">Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

If we run our test, it will fail because initial link has no class ‘active’. We can now declare a directive to add a class on urlChange without having to modify the html.

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                } else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

Well done for your first test driven development in AngularJS.

AngularJS – Test driven development tutorial

Differences between JQuery and AngularJS

Firstly you have to know that AngularJS and JQuery are different javascript frameworks, so never, never mixed up AngularJS with JQuery code. If you’re a JQuery magic developer, please invest some times in AngularJS, it will change your life.

Separation of concerns

AngularJS helps you keep your concerns separate with powerful utils (controllers, directives, models and view). The view is like a plasticine formless that you remodel through directives (DOM manipulation abstraction that help you augment your view) and models (that represent your datas), that are encapsulated in a controller linked to a specific html section. Unlike JQuery, this separation of concerns help you have testable code (remember the last time you’ve seen a jQuery plugin with unit tests).

<section id="todoapp" ng-controller='todoController'>
    <header id="header">
        <h1>TODOList</h1>
        <form id="todo-form" action="#" ng-submit='addTodo()'>
            <input id="new-todo" autocomplete="off" type="text" autofocus="" ng-model='newTodo' placeholder="{{placeholder}}" />
        </form>
        </header>
    </section>

In this code, what you see as ng-x is called a directive. ng-controller means that this section of code is related to todoController controller and the input data is specified as newTodo model (ng-model). Use of directives is also called use of decorator pattern.

Bi-directional data binding

In the previous code, modification in the view will affect the controller that can also affects the view. In the following code, when the form will be submitted, the input value will equal “Loader ended” ! it is as simple as that, how do you figure that in JQuery?

var app = angular.module('todo', []);
    app.controller('todoController', function ($scope, filterFilter, $http, $location) {
        $scope.placeholder = 'Loading...';
        $scope.addTodo = function (){
            $scope.newTodo = 'Loader ended';
        };
    };

Dependency injection

One other great tool from AngularJS is dependency injection (DI). Dependency Injection can seem very awful if you’re not familiar with back-end languages like php or Java, but it will become very useful and simple, i promise.
Dependency injection means that you have one service “A” (class that does a specific job) which needs an instance of another service “B” in order to work, we then say that we inject B into A without having to worry about loading order, or file locations, or anything like that.
DI in AngularJS will take all its sense in unit testing.

Test driven development

How many JQuery plugins have you seen, used, or written, which contained test suite? Not very many because you JQuery needs iterative development and doesn’t suit SOLID principle, but AngularJS does.
In jQuery, the only way to test a plugin is to develop a separated component with a demo page to perform DOM manipulation, and then integrate it into our application. Because of that, we opt for iterative instead of test-driven development. How inconvenient!

I’ve written an exemple of unit testing with AngularJS here https://creativcoders.wordpress.com/2014/05/11/angularjs-test-driven-development-tutorial/, have a look to.

Conclusion

Remember, AngularJS is not JQuery, don’t even include JQuery above AngularJS, it will hold you back. When you come to a problem that you think easier to solve with JQuery, try to think about how to do it within the confines the AngularJS before. If you don’t know, ask for, it will save you time, believe me.

Differences between JQuery and AngularJS