Category Archives: angularjs

DEBUGGING BOOKS 2

So I slacked off a little on my reading Pro AngularJS and also detoured a bit into reading up on Bootstrap since I am relatively inexperienced with it and the book more or less assumes you know it (or will at least ignore it 🙂 ).

I started reading through Chapter 7 and encountered some issues with the following code:

angular.module("sportsStore")
    .constant("dataUrl", "http://localhost:5500/products")
    .controller("sportsStoreCtrl", function ($scope, $http, dataUrl) {

        $scope.data = {};

        $http.get(dataUrl)
            .success(function (data) {
                $scope.data.products = data;
            })
            .error(function (error) {
                $scope.data.error = error;
            });
    });

In the section “Handling Ajax Errors” the author states “The object passed to the error function defines status and message properties.”.  Actually this is not the case, the error function should have the signature

.error(function (data, status, headers, config) {

Also, the first parameter is not an error object, it is the response data. For example in the case of a 404 error it would be the returned HTML 404 page.

The following code should make the example work


            .error(function (data, status, headers, config) {
                $scope.data.error = {};
                $scope.data.error.data = data;
                $scope.data.error.status = status;
            });

Secondly to test the error handling and achieve a 404 error, the author states in a tip to change the URL to something like ‘http://localhost:5500/doesNotExist’. This will most likely not work , as the site is running under nodejs on port 5000, and Deployd is hosting under port 5500, the browser will see this as a CORS request and most likely not return any error information, similar to the angular issue described in the link below. If you want to get a 404 error change the URL to a non-existent relative URL something like ‘/doesNotExist’, this will be relative to the site URL and be a non-CORS request.

CORS Error Response Status = 0

https://github.com/angular/angular.js/issues/2798

PACE OF CHANGE AND DEBUGGING BOOKS

I started reading the book “Pro AngularJS” written by Adam Freeman.  This book was published on April 1st 2014.  I’ve read Freeman’s books before (Pro ASP.NET MVC X) and found them to be informative.

I followed the instructions in Chapter 1 for “How Do You Set Up Your Development Environment”, which basically entails using nodejs as a simple web server for hosting your angular and bootstrap files.

So I install node, install the connect module,  copy in the simple server.js code shown here:

var connect = require('connect');

connect.createServer(
    connect.static("../angularjs")

).listen(5000);

I  run node server.js and I get  “TypeError: Object function createServer(), has no method ‘static’”

TypeError

Well, after a bit of investigation, it appears that the connect module has been reorganized, the author most likely used version 2.x, but looking at the connect module release history, version 3.0 was released on 5/29/2014. In fact the release candidate for 3.0 first appeared to be published in March, so that explains why the book doesn’t use the newer version.

To fix so it works with v3.0 of the connect module, also install the module ‘serve-static’ using the command

npm install serve-static

The replacement code that works is as follows:

var connect = require('connect')
var serveStatic = require('serve-static')

var app = connect();

app.use(serveStatic('../angularjs'));

app.listen(5000);

Alternatively, you can install an older version of connect. Looking over the history indicates that 2.13.0 would most likely be the best choice.

npm install connect@2.13.0

So far I’ve learned a bit about node, installing older versions of packages and the changes to the connect module without even reading much of the book 🙂

Hopefully the rest of the examples in the book run with less research!