AngularJS module creation

Question

I am creating simple angularJS application,but i am stuck at the very first step.I dont know why,but for some reason my module is not getting created and i am getting the following error

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=dataFinderApp&p1=E…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)

Can anyone tell me whats wrong in here?

Here is my code:

<%@ page session="false" %>
<html>
<head>
<title>Upload File Request Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script type="text/javascript"">
var sampleApp = angular.module('dataFinderApp',[]);

sampleApp.config(function($routeProvider){

    $routeProvider.when('/',{
        templateUrl : '/upload.jsp', 
        controller : 'mainController'
    })
    .when('/progress',{         
        templateUrl : '/progress.jsp', 
        controller : 'mainController'
    })
    .when('/joblist',{          
        templateUrl : '/joblist.jsp', 
        controller : 'mainController'
    })
    .otherwise({redirectTo : '/'});
});

sampleApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

sampleApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        })
        .error(function(){
        });
    }
}]);

sampleApp.controller('mainController', ['$scope', 'fileUpload', function($scope, fileUpload){

    $scope.uploadFile = function(){
        alert("Vall");
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/uploadFile";
        alert('val');
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

}]);

</script>
</head>
<body ng-app="dataFinderApp">

<!-- <div ng-controller="mainController">
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">Upload</button>
</div>

<div ng-view></div>  -->

</body>
</html>

For a start, the versions of angular and angular-route should be identical. You should also avoid using the minified versions during development: the error messages you would get would be much clearer. — JB Nizet
– JB Nizet, Commented Jan 6, 2016 at 8:01

Abhilash Augustine · Accepted Answer · 2016-01-06 08:01:37Z

3

In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.

answered Jan 6, 2016 at 8:01

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

An Nguyen · Accepted Answer · 2016-01-06 08:05:27Z

1

You can try using the code snippet:

var sampleApp = angular.module('dataFinderApp',['ngRoute']);
sampleApp.config(['$routeProvider', function($routeProvider){.....}]);

answered Jan 6, 2016 at 8:05

An Nguyen

8003 gold badges14 silver badges26 bronze badges

Comments

Abhay · Accepted Answer · 2016-01-06 08:13:29Z

0

You have to use :

var sampleApp = angular.module('dataFinderApp',['ngRoute']);

This error was occur because you havn't include ngRoute module.

answered Jan 6, 2016 at 8:13

Abhay

6,7904 gold badges29 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS module creation

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related