Question

我有以下服务使用名为 newsFactory 的工厂。在这个工厂里面，我有一个json数组。

services.js

svg {
  display: block;
  margin: auto;
  width: 100vmin;
}
.shadow {
  -webkit-filter: drop-shadow( 2px 2px 2px rgba(0,0,0,0.5) );
          filter: drop-shadow( 2px 2px 2px rgba(0,0,0,0.5) );
}
.line {
  stroke: gray;
}
.ellipse {
  fill: lightblue;
}
.circle {
  fill: lightgreen;
}

接下来我宣布了一个名为IndexController的控制器。我在我的工厂中调用了在services.js中创建的getNews（）函数。

controllers.js

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="395" height="305" viewBox="0 0 395 305" class="shadow">
  <line x1="195" y1="70" x2="50" y2="200" stroke-width="1" class="line"/>
  <line x1="195" y1="70" x2="195" y2="200" stroke-width="1" class="line"/>
  <line x1="195" y1="70" x2="340" y2="200" stroke-width="1" class="line"/>
      
  <ellipse cx="195" cy="70" rx="120" ry="70" class="ellipse"/>
  <text x="50%" y="70" text-anchor="middle" dy=".3em">Some text...</text>
  
  <circle cx="50" cy="250" r="50" class="circle"/>
  <text x="50" y="250" text-anchor="middle" dy=".3em">Some text...</text>
  
  <circle cx="195" cy="250" r="50" class="circle"/>
  <text x="195" y="250" text-anchor="middle" dy=".3em">Some text...</text>

  <circle cx="340" cy="250" r="50" class="circle"/>
  <text x="340" y="250" text-anchor="middle" dy=".3em">Some text...</text>
</svg>

最后我想以列表的形式显示json数组的所有对象。因此，我使用以下代码。

的index.html

        '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;
        });

当我运行index.html文件时，我在控制台中收到此错误。

    'use strict';

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

根据我的研究，我发现模块名称未加载或拼写错误。我不懂。 service.js和contollers.js中的模块定义为 larissaApp 。另外我正在导入这些文件

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

Answer 1

您需要纠正以下事项：

在html中定义empty dependency，如果尚未定义的话。
您需要通过定义angular.module('larissaApp',[])数组来更正模块声明。喜欢：{{1}}第一次。

查看此工作fiddle

Answer 2

在给定的代码段中，我没有看到您在任何地方定义了larissaApp，我可以看到您正在尝试使用它。你需要定义 angular.module('larissaApp',[])可以在单独的模块中，也可以在您的控制器或服务中。注意[]没有函数这是一种定义模块和angular.module（'larissaApp'）是一种使用模块的方法。您可以在[]。

下注入模块依赖项

Answer 3

您还必须使用 ng-app 在HTML中加载 larissaApp 模块，您可以按照以下步骤操作：

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

Angularjs中的模块问题

3 个答案: