Question

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

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

Answer 2

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

应该是

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

AngularJS视图没有填充

2 个答案: