个人中心
gpt4 book ai didi

javascript - AngularJS View 未填充

转载 作者：行者123 更新时间：2023-11-28 07:40:51 25 4
gpt4 key购买 nike

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

最佳答案

首先，看起来您正在添加类似 LensesController 的 Controller 和LensController在您的应用程序依赖项中，但您最终并没有使用它们。您尝试使用的 Controller 如 LensDetailCtrl和M42CatalogCtrl不包含在您的应用程序依赖项中。

在示例中，他们将 Controller 直接添加到应用程序变量中，即:

  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 即可实现)

关于javascript - AngularJS View 未填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28037279/

25 4 0
文章推荐： ios - 尝试使用 CALayers 制作水龙头滴水的动画
文章推荐： c++ - TBB:初始化 concurrent_hash_map
文章推荐： Javascript 菜单不同的屏幕尺寸
文章推荐： c++ - 在另一个 xrc 中部署一个 xrc
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com