Issue with module in Angularjs

Question

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>

angular.module('larissaApp') is a getter of an existing module, so if this is the first time you declare it, change it to angular.module('larissaApp', []) (And then use the angular.module('larissaApp') for the next time you need to bind things to it) — Alon Eitan
– Alon Eitan, Commented May 18, 2017 at 14:37

anoop · Accepted Answer · 2017-05-18 14:40:09Z

1

You need to correct below things:

Define ng-app="larissaApp" in your html, if not already.
You need to correct your module declaration by defining empty dependency array. like : angular.module('larissaApp',[]) for the first time.

See this working fiddle

answered May 18, 2017 at 14:40

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

1 Comment

anoop Over a year ago

glad to help you :)

Kumar Nitesh · Accepted Answer · 2017-05-18 14:40:18Z

1

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 [].

answered May 18, 2017 at 14:40

Kumar Nitesh

1,65215 silver badges19 bronze badges

Comments

Nishesh Pratap Singh · Accepted Answer · 2017-05-18 14:37:09Z

0

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">

answered May 18, 2017 at 14:37

Nishesh Pratap Singh

2,1912 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Issue with module in Angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related