AngularJS视图未填充答案

【问题标题】：AngularJS view not populatingAngularJS视图未填充
【发布时间】：2015-03-18 04:55:31
【问题描述】：

我是 AngularJS 的新手，正在尝试构建一个类似于此示例的页面。

http://curran.github.io/screencasts/introToAngular/exampleViewer/#/43

如果我完全按照上面链接中的方式复制它，则该示例有效，但我希望按照下面的方式构建我的文件夹。我试图将示例放入下面显示的文件结构中，但无法让 lensdetail.html 部分加载任何内容。

网址更改为正确的国家/地区名称，但我无法弄清楚为什么它不会显示任何剩余的 JSON 数据？

我只包含了给我带来问题的部分/代码。

index.html

<body class="existence-font" ng-app="rApp">
  <header>
      <nav class="navbar navbar-default">
      <div class="container">
          <div class="navbar-header">
              <a class="navbar-brand" style="font-size:1em;" href="#/"> &nbsp;<span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
          </div>

          <ul class="nav navbar-nav navbar-right">
              <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
              <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
              <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
              <li><a href="#/m42catalog"><i class="fa fa-comment"></i>m42 Catalog</a></li>
          </ul>
      </div>
      </nav>
  </header> 
<div ng-view=""></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/home.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/contact.js"></script>
<script src="scripts/controllers/m42Catalog.js"></script>
<script src="scripts/controllers/lensDetail.js"></script>

Service.js

angular.module('rAppServices', [ ])
.factory('countries', function($http) {

function getData(callback){
      $http({
        method: 'GET',
        url: 'data/lenses.json',
        cache: true
      }).success(callback);
    }

    return {
      list: getData,
      find: function(lensId, callback){
        getData(function(data) {
          var lens = data.filter(function(entry){
            return entry.lensId === lensId;
          })[0];
          callback(lens);
        });
      }
    };
});

countries.json

[
{
    "lensId": "1",
    "Mount": "M42",
    "Brand": "SMC Takumar",
    "SMC": "Yes",
    "FL": 15,
    "Aperature": 3.5,
    "Filter": "Built in",
    "Serial": 7727058,
    "Notes": ""
},
{
    "lensId": "2",
    "Mount": "M42",
    "Brand": "FISH-EYE-TAKUMAR",
    "SMC": "Yes",
    "FL": 17,
    "Aperature": 4,
    "Filter": "Built in",
    "Serial": 6117744,
    "Notes": ""
},
{
    "lensId": "3",
    "Mount": "M42",
    "Brand": "Super Takumar - Asahi Optics Co. ",
    "SMC": "Yes",
    "FL": 20,
    "Aperature": 4.5,
    "Filter": "Tamron 58mm UV",
    "Serial": 3435733,
    "Notes": "Showing signs of wear."
},
{
    "lensId": "4",
    "Mount": "M42",
    "Brand": "Carl Zeiss Jena - Flektogon",
    "SMC": "no",
    "FL": 20,
    "Aperature": 4,
    "Filter": "77 m 9 Tiffen Adapter Ring Series 9 USA",
    "Serial": 8281049,
    "Notes": ""
}
]

App.js

var rApp = angular.module('rApp',    ['ngRoute','ui.bootstrap','rAppServices'])


rApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home/home.html',
            controller: 'HomeCtrl'
        })
        .when('/about', {
            templateUrl: 'views/about/about.html',
            controller: 'AboutCtrl'
        })
        .when('/contact', {
            templateUrl: 'views/contact/contact.html',
            controller: 'ContactCtrl'
        })
        .when('/m42catalog', {
            templateUrl: 'views/m42catalog/m42Catalog.html',
            controller: 'M42CatalogCtrl'    
        })
        .when('/:lensId', {
            templateURL: 'views/m42catalog/lensDetail.html',
            controller: 'LensDetailCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
});

m42catalogctrl.js

angular.module("rApp")
.controller("M42CatalogCtrl", ['$scope', 'Lenses', function ($scope, Lenses) {
    Lenses.list(function(LensesData) {
        $scope.lenses = LensesData; 
    });

$scope.orderLens= '';
}]);

m42catalog.html

        <section>
         <ul class="list-unstyled">
                <li ng-repeat="lens in lenses | filter: query | orderBy:orderLens" class="thumbnail">
                    [{{$index + 1}}] <a href="#/m42catalog/{{lens.lensId}}">{{lens.Brand}}</a> - {{lens.Mount}} Mount - S.M.C: {{lens.SMC}} 
                    <ul class="list-unstyled">       
                        <li>Focal Length (mm): {{lens.FL}}</li> 
                        <li>Aperature: {{lens.Aperature}}</li>
                        <li>Filter on Lens: {{lens.Filter}}</li>
                        <li>Serial #: {{lens.Serial}}</li> 
                        <li>Notes: {{lens.Notes}}</li>
                    </ul>
                </li>
            </ul>
        </section>

lensdetailctrl.js

angular.module('rApp')
.controller('LensDetailCtrl', ['$scope', '$routeParams', 'Lenses' function($scope, $routeParams, Lenses) {
        Lenses.find($routeParams.lensId, function(LensData) {
        $scope.lens = LensData;
    });
}]);

lensDetail.html

<section>
  <h1>{{lens.lensId}}</h1>
    <ul>
      <li>Focal Length: {{lens.FL | number }}</li>
      <li>Brand: {{lens.Brand}}</li>
      <li>Mount: {{lens.Mount}}</li>
    </ul>
 </section>

【问题讨论】：

您的服务的查找方法有效吗？ getData 方法有效吗？你能检索 JSON 吗？
从 m42catalogctrl 记录时，我从 JSON 返回 3 个对象

标签： javascript angularjs views factory partials

【解决方案1】：

首先，您似乎在应用依赖项中添加了LensesController 和LensController 之类的控制器，但您最终并没有使用它们。您尝试使用的控制器（例如 LensDetailCtrl 和 M42CatalogCtrl）不包含在您的应用依赖项中。

在示例中，他们将控制器直接添加到 app 变量中，即：

  countryApp.controller('CountryListCtrl', function ($scope, countries){
    countries.list(function(countries) {
      $scope.countries = countries;
    });
  });

但是如果你将它包含在一个单独的文件中，那么你需要在angular.module('rApp', ['M42CatalogCtrl'])中正确地将它作为依赖引入

在这里查看一个工作示例：https://github.com/ianwalter/ng-boilerplate/blob/development/src/js/app.js （注意：RequireJS 不是必需的）

【讨论】：

感谢您的快速回复！我改变了我的控制器的结构。我认为它将解决我的依赖问题是否正确？我收到 0 个错误。

【解决方案2】：

templateURL: 'views/m42catalog/lensDetail.html',

应该是

templateUrl: 'views/m42catalog/lensDetail.html',

【讨论】：