Using Webstorm with Udemy AngularJS course by Dan Wahlin

I recently took the course AngularJS Jumpstart with Dan Wahlin on Udemy. Dan does a great job and I highly recommend it. In the course Dan uses the Brackets editor which has the advantage of being able to set your project as the root of the server. This results in addresses such as:

“localhost:8080/index.html”

I use Webstorm for Angular and JavaScript development. I could not find any way to get it to do this and ended up addresses like:

“localhost:63342/Angular/index.html”

The problem comes in when you use the node.js server for the course application. Changing the server port to use 63342 causes a cross domain load error. To get the application to work with Webstorm first modify the server.js node/Express file:

var allowedOrigin = 'http://localhost:63342';

app.get('/customers', function(req, res) {
    // Add the following line to fix cross domain errors
    res.header('Access-Control-Allow-Origin', allowedOrigin);
    res.json(customers);
});

Then for each app.get in the file add the res.header line. There are other ways to do this such as using a router or a specialized middleware routine but this is the most straightforward way.

Next modify the customerFactory.js file to retrieve data from the 8080 port instead of defaulting to the application 63342 port:

(function() {
    var customersFactory = function($http) {

        var urlBase = 'http://localhost:8080';
        var factory = {};

        factory.getCustomers = function() {
            return $http.get(urlBase + '/customers');
        };

        factory.getCustomer = function(customerId) {
            return $http.get(urlBase + '/customers/' + customerId);
        };

        factory.getOrders = function() {
            return $http.get(urlBase + '/orders');
        }

        factory.deleteCustomer = function(customerId) {
            return $http.delete(urlBase + '/customers/' + customerId);
        }

        return factory;
    };

    customersFactory.$inject = ['$http'];

    angular.module('customersApp').factory('customersFactory', 
                                           customersFactory);

}());