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

Question

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

Have you included your angular code after the required angular scripts?If yes, can you create a fiddle ? — Ankit Agarwal
– Ankit Agarwal, Commented May 5, 2016 at 6:30
@AnkitAgarwal Please see the edit and I have included the required js files as this. <script type="text/javascript" src = "js/app.js"></script> — ONE_FE
– ONE_FE, Commented May 5, 2016 at 6:39
do you can use not minified angular version and provide here full error text? — Grundy
– Grundy, Commented May 5, 2016 at 8:58
In js fiddle you try use not defined ProfileCtrl, WorkCtrl, EduCtrl, that's why you get error Failed to instantiate module sliderApp due to: ReferenceError: ProfileCtrl is not defined, so possibly in your code same error — Grundy
– Grundy, Commented May 5, 2016 at 13:27

A.Sharma · Accepted Answer · 2016-05-05 13:34:21Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related