Issues with hosting AngularJS and images

Question

I'd like to preface this question by stating that I am extremely new to development, so apologies in advance.

Essentially, I have deployed my site to Azure -everything worked great on LocalHost, deployed everything works except for the angular and the images.

For my images:

Failed to load resource: the server responded with a status of 404 (Not Found) windmillcontractors.azurewebsites.net/images/windmillFreshCut64.png

I have the incorrect path, but I'm unsure what I'm missing to correct it. I'd also like to note my favicon is not displaying, which I assume is for the same reason as its within the same folder as windmillFreshCut64.png.

For the Angular:

I get an error that leads me to believe upon instantiating, Angular can't find the dependencies. Here it is:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=registrationModule…angularjs.org%2F1.2.16%2F%24injector%2Funpr%3Fp0%3Dn%0A%20%20%20%20at%20Er......1) angular?v=Yj0JoRijZo-WbXksXxT7R8FZxhv6PQ59Vkm83GDIbm41:1

Angular Error Documentation and More Documentation

Here's my registration-module:

var registrationModule = angular.module('registrationModule', ['ngRoute',       'ngResource'])
.config(function ($routeProvider) {
$routeProvider.when('/Estimates', { templateUrl: 'Scripts/templates/estimates.html',     controller: 'EstimatesCtrl' })
 .otherwise('/');
//.when('/Portal/Customers', { templateUrl: 'templates/customers.html', controller:    'CustomersCtrl' })
//$locationProvider.html5mode(true);
});

registrationModule.controller('EstimatesCtrl', function ($scope, $http, $rootScope) {

    $http.get("Portal/Estimates").success(function(data){ $scope.estimates =     data}).error(function(data){console.log(data)});



 $scope.viewEstimate = function (estimate) {
    $rootScope.estimate = estimate;
};


$scope.currentPage = 0;
$scope.pageSize = 20;

$scope.data = $http.get("Portal/Estimates").success(function (data) { $scope.estimates   = data }).error(function (data) { console.log(data) });

//$scope.estimateArray = jQuery.makeArray($scope.data);

//$scope.dataArray = Array.prototype.slice.call($scope.data);
//$scope.newArray = [];

//for (var key in $scope.data) {
//    $scope.newArray.push(key);
//};

//alert(jQuery.makeArray($scope.data));

//Object.keys($scope.data)
$scope.numberOfPages = Math.ceil($scope.data.length / $scope.pageSize);//not working

$scope.resetFilter = function () {
    $route.reload();
}


});

registrationModule.filter('isoToMS', function () {
return function (input) {
    var dateAsFromServerSide = input;

    var parsedDate = new Date(parseInt(dateAsFromServerSide.substring(6)));

    var jsDate = new Date(parsedDate); //Date object

    return jsDate;
};
});

registrationModule.filter('startFrom', function () {
return function (input, start) {
    start = +start; //parse to int
    return input.slice(start);
}
});

Here's my bundle config:

    bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                 "~/Scripts/angular.js",
                 "~/Scripts/angular-resource.js",
                 "~/Scripts/angular-route.js",
                 "~/Scripts/Registration-Module/registration-module.js"
               ));

Thanks

Answer 1

Because you have bundled the javascript and it is minifying your scripts the service names will be mangled and you need to use the following pattern in declaring your controllers

    registrationModule.controller('EstimatesCtrl', ['$scope', '$http', '$rootscope', function ($scope, $http, $rootScope) {
       $http.get("Portal/Estimates")
          .success(function(data){
             $scope.estimates = data
           })
          .error(function(data){console.log(data)});
       $scope.viewEstimate = function (estimate) {
       $rootScope.estimate = estimate;
    };
  }]);

This will allow angular to inject the dependencies by the appropriate string names which will be preserved during minimization.

Answer 2

Your angular error is because you haven't setup your controller properly for minification.

registrationModule.controller('EstimatesCtrl',[ // notice the array brackets
    '$scope', '$http', '$rootScope', // annotated with injected dependencies
    function ($scope, $http, $rootScope) {
    // etc.
    }
  ] // be sure to close the array
);

When you minify angular doesn't know what to inject. Here's what your controller is when it's minified:

registrationModule.controller("EstimatesCtrl", function(n, t, i) {
    t.get("Portal/Estimates").success(function(t) {
        n.estimates = t
    }).error(function(n) {
        console.log(n)
    });
    n.viewEstimate = function(n) {
        i.estimate = n
    };
    n.currentPage = 0;
    n.pageSize = 20;
    n.data = t.get("Portal/Estimates").success(function(t) {
        n.estimates = t
    }).error(function(n) {
        console.log(n)
    });
    n.numberOfPages = Math.ceil(n.data.length / n.pageSize);
    n.resetFilter = function() {
        $route.reload()
    }
});

The way AngularJS determines what to inject into your function is by taking the function and calling toString(), then parsing out the names of the parameters. It's failing here because you don't have services called n, t, or i.

by calling it with the array of injector-annotated dependencies, it would become:

registrationModule.controller("EstimatesCtrl", ['$scope', '$http', '$rootScope', function(n, t, i) {
    // etc
}]);

Now, n == $scope, t == $http and $rootScope == i. Since minifying code doesn't mangle strings, AngularJS knows what registered services need to get injected.

edit: I forgot to mention.. this needs to be done anywhere there is dependency injection. Check out the dependency injection documentation for more info.