I am building a site on my main page. I'm grabbing some data from JSON, and displaying it all. It includes a bunch of albums with fields like album title, album artist, etc. When I click on one album, it sends another call to the api via angular and grabs the data for just that album and displays it.
On this page, I want to have ‘previous’ and ‘next’ buttons to display the previous albums data and the next albums
I'm not sure how to do this
this is the albums/ main page ...
<section class="container-fluid music-section pad-bottom-60 pad-top-20 pad-top-30-l">
<div class="clear album-collection">
<div class="row">
<div ng-repeat="albums in music">
<a href="/music/{{albums.slug}}" class="col-12 col-1-5-xl col-1-4-l col-1-2-m album-collection__cover transition">
<img ng-src='{{albums.better_featured_image.source_url}}'>
<div class="album-overlay">
<div class="album-overlay__text-container animate">
<div class="album-overlay-text">
<span>JMP-{{albums.acf.album_cat_no}}</span>
<br><br>
<h3>{{albums.title.rendered}}</h3>
<br><br>
<span>View Album</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
this is one album page :
<section class="container-fluid music-album-section pad-bottom-60">
<div class='clear row'>
<div class="col-2-5-l col-12 music-album__left-section">
<img class="pad-top-60-l pad-top-20 animate fade-in-left-big" ng-src='{{album.better_featured_image.source_url}}'>
</div>
<div class="col-1-2-l push-1-l col-12 music-album__right-section pad-top-60-l pad-top-20 pad-bottom-50 animate fade-in-big">
<a class="back-to-all-music-link pad-bottom-50" href="/music/"><img src="../img/left-arrow.png">All Albums</a>
<span class="animate fade-in-left-big track-numbers">{{album.acf.album_track_number}} Tracks</span>
<span class="animate fade-in-left-big catalogue-number">JMP-{{album.acf.album_cat_no}}</span>
<div class="row">
<div class="col-12 col-4-5-l pad-top-10">
<h1 class="animate fade-in-left-big music-album-title">{{album.title.rendered}}</h1>
<article class="pad-bottom-30 pad-top-10">
<p class="animate fade-in-left-big" ng-bind-html="album.content.rendered"></p>
</article>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
<img src= "./img/play-button.png">
<span>Play Montage</span>
</button>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
Listen & download
</button>
</div>
</div>
<div class="next-previous-album-links pad-top-30-l pad-top-40-s pad-bottom-20">
<img src="./img/left-arrow.png">Previous Album
Next Album<img src="./img/right-arrow.png">
</div>
</div>
</div>
</section>
and my angular :
angular.module('app', ['ngRoute', 'ngSanitize'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
})
.when('/music', {
templateUrl: myLocalized.partials + 'music.php',
controller: 'Music'
})
.when('/music/:slug/', {
templateUrl: myLocalized.partials + 'album.html',
controller: 'Album'
})
.otherwise({
redirectTo: '/'
});
})
.controller('Main', function ($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/').success(function (res) {
$scope.posts = res;
});
})
.controller('Music', function ($rootScope, $scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/post_music').success(function (res) {
$rootScope.music = res;
console.log($scope.music)
});
})
.controller('Album', function ($scope, $http, $routeParams, $rootScope) {
$http.get('wp-json/wp/v2/post_music/?filter[name]=' + $routeParams.slug).success(function (res) {
$scope.album = res[0];
});
});
Related
I am having hard time to route to particular url since the menu is coming from directive. Below is the code:
The Route:
var myApp = angular.module('myApp', ['ngRoute', 'mainMenu']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html'
})
.when('/home', {
templateUrl: 'pages/home.html'
})
.when('/bollywoodGossips', {
templateUrl: 'pages/bollywoodGossip.html'
})
.when('/bollywoodNews', {
templateUrl: 'pages/bollywoodNews.html'
})
.when('/bollywoodEvents', {
templateUrl: 'pages/bollywoodEvents.html'
})
.when('/bollywoodFitness', {
templateUrl: 'pages/bollywoodFitness.html'
})
.when('/bollywoodWallpaper', {
templateUrl: 'pages/bollywoodWallpaper.html'
})
.otherwise('/', {
templateUrl: 'pages/main.html'
})
})
The Directive:
(function(){
var mainMenu = angular.module('mainMenu', []);
var newMenu = function($location) {
var link = function(scope, element, attrs) {
element.parent('a.menuBtn').click(function(){
element.toggleClass('test');
});
}
return {
restrict: 'E',
replace: true,
templateUrl: 'pages/directiveTemplate/menu.html',
link: link
}
}
newMenu.$inject = ['$location'];
mainMenu.directive('newMenu', newMenu);
}());
The Menu Template:
<ul class="dropdownMenu">
<li>Bollywood Gossip</li>
<li>Bollywood News</li>
<li>Events</li>
<li>Celeb fitness Mantra</li>
<li>Celeb Wallpapers</li>
</ul>
And the html:
<div class="mainMenu">
<p>
<span class="breadCrumb">Home</span>
<a href="" class="menuBtn">Menu <span class="glyphicon glyphicon-th-large"></span>
<new-menu></new-menu>
</a>
</p>
</div>
The Index file:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="mainHeader">
<img src="imgs/mainHeader.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
<div ng-view></div>
<div class="row">
<div class="col-xs-12">
<div class="footer">
<p>©2016 All rights reserved. NAYSA VAS Communications Pvt.Ltd.</p>
</div>
</div>
</div>
</div>
This renders correctly but when i click on any link inside the menu it does not route to that particular url. e.g #/bollywoodGossips .should go to index.html#/bollywoodGossips but it is not routing and remains still on index.html#/home. Please help I am new to directives..
I'm working on adding some features to make my project app look better. It's an app that creates a chatroom in any building you are located nearby based on location. It is currently integrating foursquare to get the user's location, but also to get photos for the chatroom they entered (i.e. they enter a bar, it shows the first five photos that foursquare has on that bar). I want to make a background slider using angular, but I am beyond stuck on how to get it properly implemented.
Here is my code for the chatroom template:
<ng-include src="'/templates/navbar.html'"></ng-include>
<div ng-repeat="photo in photos" >
<img ng-src="{{photo.prefix}}300x300{{photo.suffix}}"></img>
</div>
<div class="container">
<div class="row " style="padding-top:40px;">
<h3 class="text-center">{{venue}} </h3>
<br />
<br />
<div class="col-md-8">
<div class="panel panel-info">
<div class="panel-heading">
RECENT CHAT HISTORY
</div>
<div scroll-glue class="panel-body" style="overflow-y: auto; height: 540px;">
<ul class="media-list">
<li class="media" ng-repeat="message in messages">
<div class="media-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" style="height: 57px; width: 88px; max-height: 57px; max-width: 88px;" ng-src="{{message.img}}" />
</a>
<div class="media-body">
<p class="chatText" ng-bind-html="message.message | emoji"></p>
<br />
<small class="text-muted">Posted by <b>{{message.username}}</b>, at {{message.createdAt}}</small>
<hr />
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<form ng-submit="createMSG(message)">
<div class="input-group">
<input type="text" class="form-control" ng-model="message" placeholder="Enter Message" />
<span class="input-group-btn">
<span style="margin: 0 20px;" emoji-picker="message" placement="right" title="Emoji" recent-limit="12"></span>
<button class="btn btn-custom" type="submit">SEND</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
ONLINE USERS
</div>
<div class="panel-body">
<ul class="media-list">
<li class="media" ng-repeat="user in users">
<div class="media-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" style="height: 57px; width: 88px; max-height: 57px; max-width: 88px;" ng-src="{{user.img}}" />
</a>
<div class="media-body">
<h5>{{user.username}} | User </h5>
<small class="text-muted" style="color: green;"><b>Online</b></small>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Here is my controller that allows you to check-in to the chatroom with the integrated foursquare:
angular.module('thesis.foursquare', ['ngRoute'])
.controller('CheckinController', ['$scope', '$location', '$window', '$cookies', '$rootScope', '$http', 'UserService',
function checkInCtrl($scope, $location, $window, $cookies, $rootScope, $http, UserService) {
if (!$cookies.get('id')) {
$location.path("/login");
} else {
// get users gps coords
navigator.geolocation.getCurrentPosition(function(position) {
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=' + $scope.lat + ',' + $scope.long + '&radius=800'
}).then(function successCallback(response) {
$scope.venue = [];
$.map(response.data.response.groups[0].items, function(venues) {
$.map(venues, function(venue) {
if (venue.id) {
var aVenue = {};
aVenue.id = venue.id;
aVenue.name = venue.name;
aVenue.location = venue.location;
aVenue.contact = venue.contact;
$scope.venue.push(aVenue);
}
});
});
});
}, function error(msg) {
alert('Please enable your GPS position future.');
}, {
maximumAge: 600000,
timeout: 5000,
enableHighAccuracy: true
});
$scope.venue = [];
var checkin = function() {
};
// url: 'https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=40.7,-74&query=' + search + '&near=' + currentLocation
// https://api.foursquare.com/v2/venues/explore/?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=29.9407336,-90.0820647&radius=200
$scope.joinChat = function(id, name) {
if ($cookies.get('id')) {
$rootScope.venue = name;
$rootScope.id = id;
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/' + id + '/photos?client_id=AL4DDIM5HHXXYV1HKMQBGFLFIJRHJVPR4BI4CJ0VQIN4PHGZ&client_secret=VXRH3J0QWAJKGIPHMEIOWWR3YSADCO3S2IJQMS3BNVEDFYUE&v=20130815&ll=40.7,-74&limit=5'
}).then(function successCallback(response) {
$rootScope.photos = response.data.response.photos.items;
});
UserService.joinchat(id).success(function(data) {
$location.path("/chatroom");
});
} else {
$location.path("/login");
}
};
}
}
]);
Here is the controller for the chatroom template:
angular.module('thesis.chatroom', ['luegg.directives', 'emoji', 'vkEmojiPicker', 'mgcrea.ngStrap'])
.controller('ChatroomController', ['$scope', '$location', '$window', '$cookies', '$rootScope', '$http', 'UserService', 'chatSocket',
function AdminUserCtrl($scope, $location, $window, $cookies, $rootScope, $http, UserService, chatSocket) {
if (!$cookies.get('id')) {
$location.path("/login");
} else {
$scope.users = [];
$scope.messages = [];
$scope.id = $rootScope.id;
var chatId = $scope.id;
$rootScope.id = null;
chatSocket.emit('joinedChat', {
chatId: $scope.id
});
chatSocket.on('message', function(data) {
console.log(data);
$scope.messages = data.messages;
$scope.users = data.users;
});
$scope.$on('$destroy', function() {
if ($scope.users.length === 1) {
chatSocket.emit('DestroyChat', {
idChatroom: chatId,
idUser: $cookies.get('id')
});
chatSocket.removeListener();
} else {
chatSocket.emit('leaveChat', {
idUser: $cookies.get('id')
});
chatSocket.removeListener();
}
});
$scope.createMSG = function(msg) {
if ($cookies.get('id')) {
UserService.createMSG(msg, chatId, $cookies.get('id')).then(function(data) {});
$scope.message = "";
} else {
$location.path("/login");
}
};
}
}
]);
current result:
All images show up, but cannot figure out the angular slider
Any suggestions/tips/criticisms are always appreciated. Thank you in advance!
I need multiple ui-views for one URL (my homepage). The limitation for ui-routing is that I can't have multiple <div ui-view></div> but they have to be in their nested states.
<div class="left-div">
<div ui-view></div>
<button ui-sref="1"></button>
<button ui-sref="2"></button>
<button ui-sref="3"></button>
</div>
<div class="right-div">
<button ui-sref="3"></button>
<div ui-view></div>
</div>
How do I make it so that ui-sref=1 and ui-sref=2 will update the ui-view inside:
<div class="left-div"></div>
and ui-sref=3 will update the ui-view inside <div class="right-div"></div>
The issue I encountered when I used ui-router was that upon changes from ui-sref from 1 -> 3 or 2 -> 3 the ui-view of left-div will disappear because the URL changes.
How do I approach this?
EDIT- My current state views
chatApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home')
$stateProvider
.state('friend', {
url: '/friend',
templateUrl: 'friend.html'
})
.state('group', {
url: '/group',
templateUrl: 'group.html'
})
.state('search', {
url: '/search',
templateUrl: 'search.html'
})
.state('home', {
url: '/search',
templateUrl: 'search.html'
})
.state('public', {
url: '/public',
views: {
'publicView': { templateUrl: 'private-chat.html' }
}
});
<div class="col-md-3 left-col-friends" ng-controller="friendListCtrl">
<div class="friends-list-navigation">
<div class="option-wrapper">
<div class="col-xs-3 home-option" ui-sref="public"><i class="fa fa-home fa-2x"></i></div>
<div class="col-xs-3 friend-option" ui-sref="friend"><i class="fa fa-user fa-2x"></i></div>
<div class="col-xs-3 group-option" ui-sref="group"><i class="fa fa-users fa-2x"></i></div>
<div class="col-xs-3 search-option" ui-sref="search"><i class="fa fa-search fa-2x"></i></div>
</div>
</div>
<div class="friends-list-display">
<div ui-view></div>
</div>
</div>
<div class="col-md-9 middle-col-chat" ng-controller="publicCtrl">
<div class="bubble-frame-public">
<div ui-view="publicView"></div>
</div>
<div class="input-fields-wrapper" emoji-form emoji-message="emojiMessage">
<div class="col-md-8">
<textarea class="col-md-4" id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
</div>
<div class="col-md-3">
<button class="btn btn-default btn-send-public-msg" ng-click="emojiMessage.replyToUser()"><i class="fa fa-paper-plane"></i></button>
<button class="btn btn-default" id="emojibtn">
<i class="fa fa-smile-o"></i>
</button>
<button class="btn btn-default"><i class="fa fa-video-camera"></i></button>
</div>
</div>
</div>
I'm taking a guess that the publicView is the view you're wanting to stay unchanged while the other views are changing. Here's one way to tackle it.
$stateProvider
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: 'search.html'
},
'publicView#': {
templateUrl: 'private-chat.html'
}
}
})
.state('home.friend', {
views: {
'#': {
templateUrl: 'friend.html'
}
}
})
.state('home.group', {
views: {
'#': {
templateUrl: 'group.html'
}
}
});
The default URL is /home. When it's accessed, publicView is populated with private-chat.html and the unnamed ui-view is populated with search.html.
For the friend and group states, they leave the publicView alone and they don't use new URLs, which is what I think you're going for. This is accomplished by making them children states of home and by specificying absolutely which views should be altered.
I am trying to inherit the blog contents from blog.html(list of cards) to news.html(single card) . I cant seem to get it working. Here is my config :
app.js
.controller('BlogCtrl', function($scope, $state, Posts) {
$scope.blogs = [];
Posts.success(function(response) {
var posts = response;
$scope.blogs = posts;
})
.state('app.news', {
url: "/news/:index",
views: {
'menuContent': {
templateUrl: "templates/news.html"
}
}})
BlogCtrl.js
$scope.monitor = function(index){
$state.go('app.news',{ index: index });
};
blog.html
<div ng-controller="BlogCtrl">
<div ng-repeat="blog in blogs | orderBy:'-created_at'" ng-click="monitor($index)">
<h4 class="title">{{blog.title}} </h4>
</div>
</div>
news.html
<ion-view view-title="{{blog.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h3 ng-bind="{{blog.title}}"></h3>
<p ng-bind="{{blog.created_at}}"></p>
</div>
<div class="item item-body">
<img class="full-image" ng-src="{{blog.img}}">
<div ng-bind="{{blog.text}}"></div>
</div>
</div>
</ion-content>
</ion-view>
I'm trying to get books to display based on the assignment above but can't figure out what is wrong for the life of me.
I built the service and modified the controller and view pages to the point where I believe they should display the books in the view, but I'm just seeing a blank page.
I feel like I am probably not retrieving the data properly and accessing it in the view/html.
Any ideas? Link to jsFiddle.
Index.html
<body ng-app="ReaderApp">
<div class="header">
<div class="container">
Reader
</div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
js/apps.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirecTo: '/books'
});
});
js/services/books.js
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
js/controllers/BookshelfController
app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
js/views/bookshelf.html
<div class="bookshelf row">
<!--
TODO: Loop through myBooks and display each one with this HTML
<div class="book col-md-3">
<a href="#/books/{{$index}}">
TODO: Add the book's cover here
<h3 class="title"> </h3>
<p class="author"> </p>
</a>
</div>
-->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}">
<img ng-src="{{ book.cover }}">
<h3 class="title">{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
</a>
</div>
</div>
I think I had the same trouble and my problem was in the router. Try adding array brackets ( [ ] ) and the '$routeProvider' string in your config method (app.js) like this:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
Coming from Ember, the syntax is a little weird so I've been using this tutorial as reference when I get stuck.