I’m trying to get an added bit of functionality to a bit of code that I’ve been playing around with based on Angular tutorials which I’ve found online. The following is an example of what I’ve done.
This is part of the main tutorial on the learn angular site. What I want is to be able to redirect to a different controller (ActorListCtrl) which will preview a lit of actor when
link is clicked on (<a href = "#/actors">)
I seem to be having difficulty in getting this functionality. If anyone could help or have any suggestions I would be very grateful.
Below is the code which I am working off:
phone-detail.html
<img src = "{{phone.image}}" />
<h1>{{phone.title}}</h1>
<p>{{phone.summary}}</p>
<p>Cast: <a href="#/actors">{{phone.actors}}</a></p>
<p>Star Rating: {{phone.stars}}</p>
actor-list.html
<div class="col-md-4">
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="actors">Stars</option>
</select>
</div>
<div class="col-md-8">
<!--Body content-->
<p>ACTORS PAGE</p>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
class="thumbnail phone-listing">
<a href="#/phones/{{phone.id}}">{{phone.title}}</a>
</li>
</ul>
</div>
</div>
</div>
controllers.js
'use strict';
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
//var actorControllers = angular.module('actorControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'title';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
function($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
};
}]);
phonecatControllers.controller('ActorListCtrl', ['$scope', 'Phone',
function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'title';
}]);
app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
when('/actors', {
templateUrl: 'partials/actor-list.html',
controller: 'ActorListCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
services.js
'use strict';
/* Services */
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);