我是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="#/"> <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);
});
}
};
});
country.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
和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不需要此功能)