CODEWITHSUNDEEP
javascriptangularjsjson
Theo
Theo

Reputation: 3149

Issue with module in Angularjs

I have the following service which uses a factory called newsFactory. And inside this factory,I have a json array.

services.js

        'use strict';

        angular.module('larissaApp')
               .factory('newsFactory',function(){

                    var newsfac = {};

                    var news = [
                        {
                            _id: 0,
                            title: 'Camping in the City and this year',
                            image:'img/news1',
                            label: '',
                            description: '...',
                            comments: ''
                        },
                        {
                            _id: 1,
                            title: 'International Museum Day 18 May 2017',
                            image:'img/news2',
                            label: '',
                            description: '... ',
                            comments: ''
                        }
                    ]

                    newsfac.getNews = function(){
                        return news;
                    }

                    newsfac.getNewsIndex = function(index){
                        return news[index];
                    }

                    return newsfac;
        });

Next I declared a controller called IndexController. And there I am calling the getNews() function defined in my factory that was created in services.js.

controllers.js

    'use strict';

    angular.module('larissaApp')
           .controller('IndexController',
   ['$scope','newsFactory',function($scope,newsFactory){
                 $scope.news = newsFactory.getNews();  
    }]);

And finally I want to display all the objects of the json array as a list. So for that I am using the following piece of code.

index.html

<div class="row row-content" ng-controller="IndexController">
                <div class="col-xs-12 col-sm-9">
                   <h2>News</h2>
                   <ul class="media-list">
                       <li class="media" ng-repeat="newsArticle in news">
                           <div class="media-left media-middle">
                               <a>
                                   <img class="media-object img-thumbnail"
                                        ng-src={{newsArticle.image}} alt="Uthappizza">
                               </a>
                           </div>
                           <div class="media-body">
                               <h2 class="media-heading">{{newsArticle.title}}</h2>

                           </div>
                       </li>
                   </ul>

                </div>
                 <div class="col-xs-12 col-sm-3">
                    <p style="padding:20px;"></p>
                </div>
 </div>

When I am running my index.html file I get this error in the console.

angular.js:38 Uncaught Error: [$injector:nomod] 
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=larissaApp
at angular.js:38
at angular.js:2262
at b (angular.js:2183)
at Object.module (angular.js:2260)
at services.js:3

angular.js:38 Uncaught Error: [$injector:nomod] 
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=larissaApp
at angular.js:38
at angular.js:2262
at b (angular.js:2183)
at Object.module (angular.js:2260)
at controllers.js:3

From my research I found out that the module name is not loaded or it is misspelled. I don't get this. My module in both services.js and contollers.js is defined as larissaApp. Plus I am importing those files 

<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>

Upvotes: 0

Views: 122

Answers (3)

Kumar Nitesh
Kumar Nitesh

Reputation: 1652

In given code snippet, I don't see that you have defined larissaApp anywhere, I can see you are trying to use it. You need to define angular.module('larissaApp',[]) either in a separate module or in your controller or services. Pay attention to [] without a function this is a way of defining module and angular.module('larissaApp') is a way of using module. You can inject your module dependency under [].

Upvotes: 1

anoop
anoop

Reputation: 3822

You need to correct below things:

  1. Define ng-app="larissaApp" in your html, if not already.

  2. You need to correct your module declaration by defining empty dependency array. like : angular.module('larissaApp',[]) for the first time.

See this working fiddle

Upvotes: 1

Nishesh Pratap Singh
Nishesh Pratap Singh

Reputation: 2181

You have to also load your larissaApp module in HTML using ng-app and you can do that as follow :

<div class="row row-content" ng-app="larissaApp" ng-controller="IndexController">

Upvotes: 0

Related Questions