Continued from: Angular Cats! Part 1
Full Source Code: GitHub: jsCats/ngCatsHOM
Gathering a pile of data from an API (or in my case, a raw json file) makes for a pretty poor web application. In order to present the data in a fun and interactive interface, I created a couple HTML templates in the /partials folder, and inserted references to those templates into the MainController section of index.html.
In order to show or hide each partial view, I created two boolean values within the MainController’s scope. The values are named ‘viewList’ and ‘viewDetail’ and setting them to true or false will show or hide each one (respectively). The HTML templates themselves are inserted with the ngInclude directive. Using ngInclude probably isn’t the best option as it can lead to spaghetti code, have adverse affects on page performance, and probably some other stuff I can’t think of. Creating custom AngularJS directives are the best option for reusable components and/or widgets. I’ll eventually get to that, but to keep things simple for now, using ngInclude will work.
The MainController has a simple function called switchView that flips the boolean values of viewList and viewDetail. I don’t have a situation where both should be true or false, but I could if I wanted. If you look at the MainController function, there are two event handlers that do nothing but call switchView().
$scope.$on('catClicked',function() {
switchView();
});
$scope.$on('backClicked',function() {
switchView();
});
function switchView() {
$scope.viewList = !$scope.viewList;
$scope.viewDetail = !$scope.viewDetail;
}
// Starting values
$scope.viewList = true;
$scope.viewDetail = false;
}
// Explicitly inject stuff. This is optional unless you plan on minifying the code.
MainController.$inject = ['$scope','$rootScope','eventBroadcast'];
Upon loading the app, the user is greeted with a nice big grid full of lovely little cat pictures. This grid is actually an unordered list of thumbnails from the cat data. All of the viewable elements on the page are contained within the CatListController section – denoted by the ngController directive. There are a number of directives doing different things here: The ngClick directive handles mouseclicks and calls a click-handler function; The ngMouseover directive works similarly; ngRepeat will iterate through the contents of the ‘cats’ array and create a list-item for each cat; and ngSrc will display the thumbnail in conjunction with the img tag.
<div class="row span12 catGrid">
<!-- Grid of cat thumbnails -->
<ul class="thumbnails">
<li ng-repeat="cat in cats" ng-click="getDetail(cat.id)" class="span2" ng-mouseover="showName(cat.name)">
<div class="thumbnail">
<!-- Remember to use 'ng-src' for images -->
<img ng-src="{{cat.thumbnail}}">
</div>
</li>
</ul>
</div>
<!-- Nav buttons and Cat Name -->
<div class="row">
<button class='btn btn-primary span1' ng-click="changePage('prev')">Prev</button>
<div class="catName span10">{{name}}</div>
<button class='btn btn-primary pull-right span1' ng-click="changePage('next')">Next</button>
</div>
</div>
That’s all fine and dandy, but it’s not going to do anything unless we actually have a CatListController. The CatListController will need to define the properties and methods within its $scope, and handle any setup or logic for the listView page. $scope methods will define the behaviors, such as responding to clicks, and will store data used by directives (e.g. catName). Also within CatListController is the call to CatService.getCats(). This retrieves all the translated cat data and stores it on the $rootScope. Storing data on the $rootScope is sort of like creating a global variable – not the best practice, but useful in a pinch. And it’s only ‘global’ within the scope of the AngularJS application, not the global Javascript namespace.
The code below is truncated. For the full source (with comments), take a look on GitHub.
$scope.getDetail = function() {
// When a thumbnail is clicked, show the detail
};
$scope.goToPage = function goToPage(page) {
// If there are more cats than can fit in the grid, more pages are needed.
// This function go to a specific page.
};
$scope.changePage = function(pagingAction) {
// This handles the Next/Prev buttons to cycle through pages.
};
// When a user hovers over a cat, it's name is displayed below the grid.
$scope.showName = function(catName) {
$scope.name = catName;
}
// If the catCollection is not yet defined, fetch the data, otherwise go to page one.
if( !$rootScope.catCollection ) {
// This uses the CatService defined in services.js to retrieve the list of cats.
CatsService.getCats(function (data) {
// The cat list returned from the getCats method is loaded onto $rootScope
// so it can be easily shared between controllers.
$rootScope.catCollection = data
$scope.goToPage(1);
});
}
CatListController.$inject = ['$scope','$rootScope', '$routeParams', 'CatsService', '$location','eventBroadcast'];
The catDetail template is pretty much the same story. There are a bunch of $scope variables to store data to display within the template, and some click handler functions for buttons. A unique element that appears on this page is ng-carousel, which is a directive that activates Twitter Bootstrap’s carousel gallery component for a series of pictures. Normally, the Bootstrap carousel is activated by the ‘carousel slide’ class. However, after building the view, I noticed that sometimes the slider buttons would just stop working. It was very intermittent, and I think Angular refreshing the DOM on $scope changes would somehow break the carousel. To fix this, I created a directive that would refresh the carousel component every time the $scope.cat variable changed.
<!-- Title -->
<div class="row">
<div class="span1">
<button class="back btn btn-primary" ng-click="goBack()">Back</button>
</div>
<div class="span11">
<h2 class="pull-right">{{cat.name}}: {{cat.size}} {{cat.age}} {{cat.breed}}</h2>
</div>
</div>
<!-- Pics and Description -->
<div class="row catDetailPane">
<div class="span5">
<!-- The ngCarousel directive gets inserted here to fix a timing error between angularjs and bootstrap -->
<div ng-carousel id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<!-- Give the first item in the collection the 'active' class -->
<div ng-class="{item:true, active:$first}" ng-repeat="photo in cat.pics">
<img ng-src="{{photo}}">
</div>
</div>
<!-- Carousel Arrow Buttons -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!-- Cat Description -->
<div class="span7">
<div class="well" ng-bind-html-unsafe="cat.description">
</div>
</div>
</div>
<!-- Footer (Nav buttons and addt'l details -->
<div class="row">
<button ng-click='newCat(catIndex - 1)' class="btn btn-primary span2">Prev Cat</button>
<div class="span8 catOptions">{{cat.options}}</div>
<button ng-click='newCat(catIndex + 1)' class="btn btn-primary pull-right span2">Next Cat</button>
</div>
</div>
Oh yeah, did you see that ng-bind-html-unsafe directive? That’s because the description text has a bunch of craptacular MS Word-to-HTML junk sprinkled throughout, and that particular directive handles it quite nicely.
The controller here is pretty straightforward – handle clicks, show a cat.
$scope.$on('catClicked',function() {
// This is an event handler for a click on a cat thumbnail.
});
$scope.goBack = function () {
// Back button clicked! Handle it!
};
// This method is called when 'Next Cat' or 'Prev Cat' is clicked.
// It will cycle through each cat in catCollection.
$scope.newCat = function(idx) {
// This method is called when 'Next Cat' or 'Prev Cat' is clicked.
// It will cycle through each cat in catCollection.
}
var showCat = function(cat) {
// This method takes a cat object as a parameter and sets it as the active cat.
// It also finds the index of the cat object in catCollection.
}
}
CatDetailController.$inject = ['$scope','$rootScope','eventBroadcast'];
And here’s the directive to fix the Bootstrap carousel problem:
return function (scope, elm, attr) {
scope.$watch('cat', function() {
$(elm).carousel('pause');
});
}
});
Last but not least is a technique to give the controllers the ability to communicate with each other. But that will be a separate post, because this one is too long already.
May 10, 2015 at 6:06 am
The Door-to-Door Sales Act requires oof whicxh the contract be prepared in the same terminology as that principally employed in the oral sales
business presentation.
May 22, 2015 at 12:21 am
Hi colleagues, pleasant post and nice arguments commented at this place,
I am genuinely enjoying by these.
June 2, 2015 at 5:01 am
Greetings! Very helpful advice within thi post!
It is the little changes that produce the most important changes.
Many thanks for sharing!
June 4, 2015 at 7:10 pm
Hello there, You have done a great job. I will definitely
digg it and personally suggest to my friends.
I am confident they’ll be benefited from this web site.