AngularJS вид не заполнен

Я новичок в AngularJS и пытаюсь создать страницу, похожую на этот пример.

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

Пример работает, если я копирую его точно так же, как в приведенной выше ссылке, но я хочу структурировать свою папку, как показано ниже. Я попытался вписать пример в мою файловую структуру, показанную ниже, и не могу получить lensdetail.html частичное загрузить что-нибудь.

URL-адрес изменится на правильное название страны, но я не могу понять, почему он не отображает какие-либо оставшиеся данные 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>
Источник

2 ответа 

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

должно было

templateUrl: 'views/m42catalog/lensDetail.html',
Источник

Ну, во-первых, похоже, что вы добавляете контроллеры, как LensesController а также LensController в зависимости вашего приложения, но вы не в конечном итоге их использовать. Контроллеры, которые вы пытаетесь использовать, как LensDetailCtrl а также M42CatalogCtrl не включены в зависимости ваших приложений.

В этом примере они добавляют контроллеры непосредственно в переменную приложения, т.е.

  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 не обязателен для этой работы)

Источник
Другие вопросы по тегам