CODEWITHSUNDEEP
javascriptangularjshtml
ONE_FE
ONE_FE

Reputation: 996

Error: $injector:modulerr Module in angular when loading an image

I'm trying to create an carousal from the scratch using Angular. So my html code relevant to the issue is as follows. 

<div id = "section1" class = "" ng-app = "sliderApp">
    <div class = "sec1_slider" ng-controller = "app">
         <div class = "slider_image">
               <img ng-src="{{ imageUrlProfile }}" class = "sm_icon">

And I have imported the relevant APIs. 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>

My Angular Code is as follows.

var application = angular.module('sliderApp', ['ngRoute']);

application.controller('app', function($rootScope, $scope) {

        $rootScope.imageUrlProfile = 'slider-img1.png';

});

In the landing page, the image i defined in angular code 'slider-img1.png' is not loading and throws the following error in browser console.

angular.js:4073 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=sliderApp&p1=Refere…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A16%3A463)

Click here to see the link to the error.

what should I do to load the image ?

Edit : Here you can find the JSFiddle

Upvotes: 2

Views: 471

Answers (1)

A.Sharma
A.Sharma

Reputation: 2799

The issue is that in your config block, you are specifying variables for controllers. But the variables haven't been declared or assigned values:

Take a look at the Plnkr: http://plnkr.co/edit/2kfnAMja5BWgKTWU9FHt?p=preview

var application = angular.module('sliderApp', ['ngRoute']);

application.controller('app', function($rootScope, $scope) {

        $rootScope.imageUrlProfile = 'http://www.amaraholisticwellbeing.com/wp-content/uploads/2015/01/Fall-beautiful-nature-22666764-900-562.jpg';

});

application.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/option1', {templateUrl: 'tab1.html'/**, controller: ProfileCtrl**/}).
            when('/option2', {templateUrl: 'tab2.html'/**, controller: WorkCtrl**/}).
            when('/option3', {templateUrl: 'tab3.html' /**,controller: EduCtrl**/}).
            when('/', {templateUrl: 'openingTab.html'}).
            otherwise({redirectTo: '/'});
}]);

You can see where I have commented out the controllers. Those variables don't exist in the script given with your fiddle. I chose to use Plnkr because JSFiddle has issues when trying to send normal http requests (https is fine) for the images.

Upvotes: 1

Related Questions