Ich habe eine App für die neuesten Fotos von Flickr mit Option machen, wenn Sie auf ein Bild klicken, um das Bild mit Tags und Kommentare anzuzeigen, die es enthält.Angeklickte Bild von Flickr mit Tags und Kommentare anzeigen AngularJS
Ich habe das gemacht:
core.module.js
(function() {
'use strict';
angular.module('flickrApp.core', ['ui.router', 'ngResource']);
})();
core.factory.js
(function() {
'use strict';
angular
.module('flickrApp.core')
.factory('flickrImgs', flickrImgs);
flickrImgs.$inject = ['$http'];
function flickrImgs($http) {
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=415028ef16a31ed8f70f9dc3e90964d1&extras=url_q,url_o,tags&format=json&nojsoncallback=1';
var photos;
var factory = {
getPhotos: getPhotos
};
return factory;
function getPhotos() {
return $http.get(url).then(function (response) {
factory.photos = response.data.photos.photo;
});
}
};
})();
core.controller.js
core.router.js
(function() {
'use strict';
angular
.module('flickrApp.core')
.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('main', {
abstract: true,
views: {
'header': {
templateUrl: 'app/components/core/header.html'
}
}
})
.state('main.home', {
url: '/home',
views: {
'[email protected]': {
templateUrl: 'app/components/core/home.html',
controller: 'flickrController',
controllerAs: 'fc'
}
}
})
.state('main.singleImg', {
url: '/photos/:id',
views: {
'[email protected]': {
templateUrl: 'app/components/core/single-img.html',
controller: 'flickrController',
controllerAs: 'fc'
}
}
});
newPhoto.$inject = ['$stateParams', 'flickrImgs'];
function newPhoto($stateParams, flickrImgs) {
return flickrImgs.get({
id: $stateParams.id
}).$promise;
}
}
})();
home.html
<div class="row col-sm-12 col-md-10 col-md-offset-1">
<div ng-repeat="photo in fc.photos | limitTo:16" class="col-sm-12 col-md-3">
<a href ng-click="fc.showImg(photo.id)">
<img class="thumbnail" ng-src="{{photo.url_q}}" width="100%">
</a>
</div>
</div>
Einzel img.html
<div class="row col-sm-12 col-md-10 col-md-offset-1">
<div ng-repeat="photo in fc.photos | filter : {id: photo.id} | limitTo: 1" class="col-sm-12 col-md-10 col-md-offset-1">
<a href ng-click="fc.showImg(photo.id)">
<img class="thumbnail" ng-src="{{photo.url_o}}" width="100%">
</a>
<div>Tags:
<button class="btn-primary">
{{photo.tags}}
</button>
</div>
<div>Comments:
<div>
{{photo.comments}}
</div>
</div>
</div>
</div>
Als ich cl ick auf Bild auf der Startseite aufgelistet, ich möchte dieses Bild zu Single-img.html Vorlage übergeben und ich bekomme Bild-ID in URL, aber ich weiß nicht, wie es an HTML übergeben.
Jede Hilfe wäre willkommen.
Ja, ich vergaß ui-sref, danke dafür. Aber, immer noch in single-img.html, bekomme ich nicht das richtige Bild. – user2063123
Muthukannan Kanniappan Ja, das hilft, ich bekomme die ID des Fotos, aber kann ich den URL-Parameter übergeben, damit ich ihn im IMG-Tag verwenden kann? Ich bin etwas verwirrt, sorry für so viele Fragen. – user2063123
Das meiste davon ist aktualisiert :-) Ich würde vorschlagen, dass Sie mehr über $ q und UI-Router lesen. –