The days of CS6 are fading into the distance behind us, and Adobe has officially launched the newest version of what has, until now, been called Creative Suite (though from here on out it’s called Creative Cloud).

Major updates and new features have been integrated into the newest version of the Creative Cloud apps, including a new app for managing your Creative Cloud account and everything that goes with it.

Creative Cloud Desktop App

The new CC desktop app is a huge improvement over the old Application Manager. There are now five panels that give you various information about your CC account, your applications, and more.

The Home panel shows you continuous updates on all of your Creative Cloud activity. This includes app downloads and updates you’ve performed, files you’ve uploaded, and more. The Apps panel shows you the status of your CC apps, and lets you run updates or download new apps. In the Files panel you can access your CC file storage.

The last two panels, though, really expand the usefulness of CC. The Fonts panel lets you browse both desktop and web fonts from Adobe and Typekit. You can also keep your fonts updated through this panel. The Behance panel lets you connect to your Behance account so you can easily showcase your work, get feedback, and find inspiration, without having to go through your browser.

Updates to cloud features

Photoshop CC and Dreamweaver CC now allow you to sync your settings between computers. This means you won’t have to manually set up each computer you use. Instead, just log into your Creative Cloud account, sync your settings on one computer, and then load the synced settings on another computer to have your workspace set up just the way you want it.

Photoshop CC and Illustrator CC also now allow you to save your files directly to the Cloud, right from within the programs. This is a big time-saver for teams, or for designers who want to work from more than one computer. You can easily view your files on the Creative Cloud website from the CC desktop app.

Once your files are uploaded to Creative Cloud, it’s easy to share them. Just go to the Creative Cloud website, open the file you want to share, and then use the built-in sharing link to either post to Behance for public feedback or send a link via email. If you send a link, you can allow those with the link to leave comments or even download the file. Whoever you share the link with does not have to have a CC membership in order to view the file or leave comments.

Major updates to Edge Animate CC

The newest version of Edge Animate offers some major updates, including a new motion paths feature. This makes it significantly easier to customize the movement of elements in your design.

Animations can also be made interactive using code snippets built into Edge Animate, or with your own JavaScript functions. You can let users control playback of elements, or even create buttons that enable even more user interaction.

The animations that you can create in Edge Animate can be added to any number of web projects. You can import them into Edge Code or Dreamweaver, or export them as OAM files. Edge animations can even be imported to mobile designs created in InDesign.

Updates to Edge Reflow CC

Responsive design is pretty much a necessity on today’s web. Edge Reflow CC makes it easy to create responsive designs using visual media queries and an intuitive user interface.

Tight integration with Photoshop makes it easy to import your PSD files. Integration with Illustrator and Edge Animate make it easy to copy SVG files and animations into your Reflow projects, too. This makes your overall design process a lot faster and easier.

Edge Reflow also allows you to create reusable CSS3 styles that are perfect for formatting multiple elements so that your entire project maintains a consistent appearance. Styles also make it really simple to update your project down the road.

Great updates in Photoshop CC

Sharpening in Photoshop has always been sort of a hit-or-miss proposition. On some images it worked great, while on others it created all sorts of undesirable artifacts. It could end up bringing out all the wrong parts of a photo.

That’s no longer the case with Smart Sharpen. Smart Sharpen gives you much crisper, cleaner artwork with easy-to-use controls. The new way images are processed for Smart Sharpen give virtually magical results, maintaining the fidelity of your images.

There are also new features for editing your rounded rectangles in Photoshop CC. You can nondestructively remove or reapply settings as you work, without having to start over. Once you’ve created a shape, you can use the Properties panel to update and refine the settings.

Big changes to Dreamweaver CC

Dreamweaver CC has integrated new faster workflows for visually building website designs and responsive layouts. You can create both web and mobile content intuitively, with new features that make web design and development much easier.

Enhancements to the Fluid Grid Layout functionality lets you build sites more intuitively, with visual construction of media queries that let you adapt your design to fit different screen dimensions. And it’s all been streamlined so you can do more with fewer steps.

You can now apply classes to grouped elements, rather than having to add them to each element individually. That means you can update a single rule and control an entire group of elements at once.

Another big change is that you can visually apply CSS styles using the new CSS Designer. This makes creating and updating styles much more intuitive. You can make changes to things like box shadows or gradients, and see updates to the Live view instantly. Live view renders everything you do with WebKit, so your designs look as they will online.

An all-new Flash CC

Flash Professional CC has been rebuilt from the ground up. It’s now faster, more extensible, modular, reliable, and significantly more efficient. You can now create richer, more engaging content using the modernized Flash workspace.

Animated content has long been created with Flash Pro at major online video portals, studios, gaming companies, and more. Your Flash files can be exported to HD video and audio, all without dropping frames.

The new Flash Professional CC lets you add even more functionality with the built-in Toolkit for CreateJS. This lets you create web-standard HTML and JavaScript code based on your Flash projects, including interactive content. This lets you create content that can be distributed to platforms and devices that don’t support the Flash Player, including iOS devices.

Conclusion

While some are still disappointed in Adobe’s decision to move to a subscription-only model, the quality of the software they’re putting out only continues to improve. These updates are sure to make the lives of any web designers using Adobe software significantly easier, and end results better.

What do you think of these new updates to Adobe Creative Cloud? Which do you think you’ll get the most use out of? Let us know in the comments.

Korpo Serif Font (10 Variants) – from only $7!

In this article you'll find out why you need an email marketing list for your business and how it can serve you over the course of time. You'll also learn about five methods of list building.

Interdisciplinary Studies (INDS) is pleased to welcome Dr. Stephen Freeland as its new Director. Dr. Freeland succeeds Patricia La Noue, praised for building a solid foundation during her time in the position.

In his new role, Dr. Freeland will extend the strengths of INDS. He has particular interests in the interface of science and religion and in using the full spectrum of creative arts to visualize and communicate social science, natural science and engineering. In this capacity, Dr. Freeland initiated activities by presenting a public lecture in Washington D.C. for the American Association for the Advancement of Science (AAAS) dialogue on science, ethics, and religion.

As Dr. Freeland begins to build new bridges, he would be delighted to hear from members of the campus community. Feel free to reach out to him directly at freeland@umbc.edu.

In a gripping Baltimore Sun feature story on the lives of former steel mill workers after the closing of Sparrows Point, video documentaries from the UMBC project “Documenting Cultural Heritage in Partnership with Communities” (supported by BreakingGround) offer important first-person perspectives on life and work in the community.

UMBC students interviewed former mill employees while learning about oral and audiovisual storytelling and documentation. The steelworkers shared their stories of working at the mill, the impact the Sparrows Point closure has had on the community, and the future of the industry locally and nationally. Bill Shewbridge (New Media Studio) and Michelle Stefano (American Studies) collaborated to bring to life a project that introduced students to the ideas, techniques and ethical considerations that underpin qualitative research, particularly from a community-based, out-in-the-field perspective.

In a previous AngularJS tutorial I covered all the basics of how to get up and running with Angular in around 30 minutes. This tutorial will expand on what was covered there by creating a simple real world web application.

This simple web application will allow its users to view, search and filter TV Show Premieres for the next 30 days. As a keen series viewer, I am always looking for something new to watch when my favorite shows are off air, so I thought I would create an app to help me find what I am looking for.

Before we get started, you may want to take a look at the demo from above, to see what we will be creating in this tutorial.

Getting Started

To begin, we need a skeleton AngularJS application which already has all the required JavaScript and CSS to create the TV Show Premieres app. Go ahead and download this skeleton from the “download source files” button above.

Once you have downloaded the files you should have a directory structure as shown below:

Looking at the directory structure and the included files you will see that we will be using Twitter Bootstrap to make our web app a little prettier, but this tutorial will not look at Twitter Bootstrap in any detail (learn more about Twitter Bootstrap). Additionally, this tutorial will not be covering how to setup a new AngularJS application as the aforementioned AngularJS tutorial already covers this in detail.

Upon opening index.html, with your browser of choice, you should see a very simple web page with just a title and some basic formatting as seen below:

Loading In Our Data

The first thing we are going to need to create our TV Show app, is information about TV shows. We are going to use an API provided by Trakt.tv. Before we can get started you are going to need an API key, you can register for one on their website.

Why use this API? Do I really have to register? We are using this API so our app will use real data and will actually provide some use once completed. Also, by using this API we do not need to go over any server side implementations within this tutorial and can focus completely on AngularJS. An extra couple of minutes to register for the API will be well worth it.

Now that you have your own API key, we can utilize the Trakt API to get some information on TV shows. We are going to use one of the available API calls for this tutorial, more information on this is available in the api docs. This API call will provide us with all the TV Show Premieres within a specified time frame.

Open mainController.js and modify it to match the below code:

    app.controller("mainController", function($scope, $http){
    
            $scope.apiKey = "[YOUR API KEY HERE]";
            $scope.init = function() {
                //API requires a start date
                var today = new Date();
                //Create the date string and ensure leading zeros if required
                var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
                $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                    console.log(data);
                }).error(function(error) {
    
                });
            };
    
        });
    

If you look within the index.html file, for the following line:

    <div class="container main-frame" ng-app="TVPremieresApp" ng-controller="mainController" ng-init="init()">
    

You will see that the ng-init method is calling the init function, this means that the init() function within our mainController will be called after the page has been loaded.

If you read the API documentation for the calendar/premieres method you will have seen that it takes three parameters, your API key, the start date (e.g. 20130616) and the number of days.

To provide all three parameters, we first need to get today’s date using JavaScripts Date() method and format it to the API specified date format to create the apiDate string. Now that we have everything we need, we can create an $http.jsonp call to the API method. This will allow our web app to call a URL that is not within our own domain and receive some JSON data. Ensure that ?callback=JSON_CALLBACK is prepended onto the request URI so that our attached .success callback function is called on response.

Within our .success function we then simply output the received data to the console. Open index.html within your browser and open the JavaScript console, you should see something like the following:

This demonstrates that we are successfully performing a call to the Trakt API, authenticating with our API key and receiving some JSON data. Now that we have our TV show data, we can move on to the step.

Displaying Our Data

Processing the JSON Objects

Before we can display our data, we need to process and store it. As the API returns the premiere episodes grouped by date, we want to remove this grouping and just create a single array with all the premiere episodes and their associated data. Modify mainController.js to be as follows:

    app.controller("mainController", function($scope, $http){
            $scope.apiKey = "[YOUR API KEY]";
            $scope.results = [];
            $scope.init = function() {
                //API requires a start date
                var today = new Date();
                //Create the date string and ensure leading zeros if required
                var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
                $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                    //As we are getting our data from an external source, we need to format the data so we can use it to our desired effect
                    //For each day, get all the episodes
                    angular.forEach(data, function(value, index){
                        //The API stores the full date separately from each episode. Save it so we can use it later
                        var date = value.date;
                        //For each episodes, add it to the results array
                        angular.forEach(value.episodes, function(tvshow, index){
                            //Create a date string from the timestamp so we can filter on it based on user text input
                            tvshow.date = date; //Attach the full date to each episode
                            $scope.results.push(tvshow);
                        });
                    });
                }).error(function(error) {
    
                });
            };
        });
    

The above code is well commented and should be easy to follow, lets take a look at these changes. First, we declare a scope variable $scope.results as an array which will hold our processed results. We then use angular.forEach (which is similar to jQuery’s $.each method for those who know it) to loop through each date group and store the date in a local date variable.

We then create another loop which loops through each of the TV shows within that date group, adds the locally stored date to the tvshow object and then finally adds each tvshow object to the $scope.results array. With all of this done, our $scope.results array will look like the following:

Creating the List HTML

We now have some data we wish to display within a list, on our page. We can create some HTML with ng-repeat to dynamically create the list elements based on the data within $scope.results. Add the following HTML code within the unordered list that has the episode-list class in index.html:

    <li ng-repeat="tvshow in results">
            <div class="row-fluid">
                <div class="span3">
                    <img src="{{tvshow.episode.images.screen}}" />
                    <div class="ratings"><strong>Ratings:</strong> <span class="label"><i class="icon-thumbs-up"></i> {{tvshow.episode.ratings.loved}}</span> <span class="label"><i class="icon-thumbs-down"></i> {{tvshow.episode.ratings.hated}}</span> <span class="label label-important" ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"><strong>%</strong> {{tvshow.episode.ratings.percentage}}</div>
                </div>
                <div class="span6">
                    <h3>{{tvshow.show.title}}: {{tvshow.episode.title}}</h3>
                    <p>{{tvshow.episode.overview}}</p>
                </div>
                <div class="span3">
                    <div class="fulldate pull-right label label-info">{{tvshow.date}}</div>
                    <ul class="show-info">
                        <li><strong>On Air:</strong> {{tvshow.show.air_day}} {{tvshow.show.air_time}}</li>
                        <li><strong>Network:</strong> {{tvshow.show.network}}</li>
                        <li><strong>Season #:</strong> {{tvshow.episode.season}}</li>
                        <li><strong>Genres:</strong> <span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres">{{genre}}</span></li>
                    </ul>
                </div>
            </div>
        </li>
    

This HTML is simply creating a single list element with ng-repeat. ng-repeat="tvshow in results" is telling angular to repeat this list element for each object within the $scope.results array. Remember that we do not need to include the $scope, as we are within an element with a specified controller (refer to the previous tutorial for more on this).

Inside the li element we can then reference tvshow as a variable which will hold all of the objects data for each of the TV shows within $scope.results. Below is an example of one of the objects within $scope.results so you can easily see how to reference each slice of data:

    {
        "show":{
            "title":"Agatha Christie's Marple",
            "year":2004,
            "url":"http://trakt.tv/show/agatha-christies-marple",
            "first_aired":1102838400,
            "country":"United Kingdom",
            "overview":"Miss Marple is an elderly spinster who lives in the village of St. Mary Mead and acts as an amateur detective. Due to her long and eventful life crimes often remind her of other incidents. Although Miss Marple looks sweet, frail, and old, she fears nothing; either dead or living.",
            "runtime":120,
            "network":"ITV",
            "air_day":"Monday",
            "air_time":"9:00pm",
            "certification":"TV-14",
            "imdb_id":"tt1734537",
            "tvdb_id":"78895",
            "tvrage_id":"2515",
            "images":{
                "poster":"http://slurm.trakt.us/images/posters/606.jpg",
                "fanart":"http://slurm.trakt.us/images/fanart/606.jpg",
                "banner":"http://slurm.trakt.us/images/banners/606.jpg"
            },
            "ratings":{
                "percentage":91,
                "votes":18,
                "loved":18,
                "hated":0
            },
            "genres":[
                "Drama",
                "Crime",
                "Adventure"
            ]
        },
        "episode":{
            "season":6,
            "number":1,
            "title":"A Caribbean Mystery",
            "overview":"\"Would you like to see a picture of a murderer?\", Jane Marple is asked by Major Palgrave whilst on a luxurious holiday in the West Indies. When she replies that she would like to hear the story, he explains. There once was a man who had a wife who tried to hang herself, but failed. Then she tried again later, and succeeded in killing herself. The man remarried to a woman who then tried to gas herself to death. She failed, but then tried again later and succeeded. Just as Major Palgrave is about to show the picture to her, he looks over her shoulder, appears startled, and changes the subject. The next morning, a servant, Victoria Johnson, finds him dead in his room. Doctor Graham concludes that the man died of heart failure; he showed all the symptoms, and had a bottle of serenite (a drug for high blood pressure) on his table.",
            "url":"http://trakt.tv/show/agatha-christies-marple/season/6/episode/1",
            "first_aired":1371366000,
            "images":{
                "screen":"http://slurm.trakt.us/images/fanart/606-940.jpg"
            },
            "ratings":{
                "percentage":0,
                "votes":0,
                "loved":0,
                "hated":0
            }
        },
        "date":"2013-06-16"
        }
    

As an example, within the li element, we can get the show title by referencing tvshow.show.title and wrapping it in double curly brackets:{{ }}. With this understanding, it should be easy to see what information will be displayed for each list element. Thanks to the CSS bundled with the skeleton structure, if you save these changes and open index.html within your browser, you should see a nicely formatted list of TV shows with the associated information and images. This is shown in the figure below:

Conditional Classes

You may or may not have noticed:

ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"

…which is attached to one of the span elements, within the ratings section, in the above HTML. ng-class allows us to conditionally apply classes to HTML elements. This is particularly useful here, as we can then apply a different style to the percentage span element depending on whether the TV show rating percentage is high or not.

In the above HTML example, we want to apply the class label-success, which is a Twitter Bootstrap class, which will style the span to have a green background and white text. We only want to apply this class to the element if the rating percentage is greater than or equal to 50. We can do this as simply as tvshow.episode.ratings.percentage >= 50. Take a look down the list of formatted TV shows in your browser, if any of the percentages meet this condition, they should be displayed green.

Creating a Search Filter

We now have a list of upcoming TV show premieres, which is great, but it doesn’t offer much in the way of functionality. We are now going to add a simple text search which will filter all of the objects within the results array.

Binding HTML Elements to Scope Variables

Firstly we need to declare a $scope.filterText variable within mainController.js as follows:

    app.controller("mainController", function($scope, $http){
            $scope.apiKey = "[YOUR API KEY]";
            $scope.results = [];
            $scope.filterText = null;
            $scope.init = function() {
                //API requires a start date
                var today = new Date();
                //Create the date string and ensure leading zeros if required
                var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
                $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                    //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                    //For each day get all the episodes
                    angular.forEach(data, function(value, index){
                        //The API stores the full date separately from each episode. Save it so we can use it later
                        var date = value.date;
                        //For each episodes add it to the results array
                        angular.forEach(value.episodes, function(tvshow, index){
                            //Create a date string from the timestamp so we can filter on it based on user text input
                            tvshow.date = date; //Attach the full date to each episode
                            $scope.results.push(tvshow);
                        });
                    });
                }).error(function(error) {
    
                });
            };
        });
    

Now we need to add a text input so that the user can actually input a search term. We then need to bind this input to the newly declared variable. Add the following HTML within the div which has the search-box class in index.html.

    <label>Filter: </label>
        <input type="text" ng-model="filterText"/>
    

Here we have used ng-model to bind this input to the $scope.filterText variable we declared within our scope. Now this variable will always equal what is inputted into this search input.

Enforcing Filtering On ng-repeat Output

Now that we have the text to filter on, we need to add the filtering functionality to ng-repeat. Thanks to the built-in filter functionality of AngularJS, we do not need to write any JavaScript to do this, just modify your ng-repeat as follows:

    <li ng-repeat="tvshow in results | filter: filterText">
    

It’s as simple as that! We are telling AngularJS – before we output the data using ng-repeat, we need to apply the filter based on the filterText variable. Open index.html in a browser and perform a search. Assuming you searched for something that exists, you should see a selection of the results.

Creating a Genre Custom Filter

So, our users can now search for whatever they are wanting to watch, which is better than just a static list of TV shows. But we can take our filter functionality a little further and create a custom filter that will allow the user to select a specific genre. Once a specific genre has been selected, the ng-repeat should only display TV shows with the chosen genre attached.

First of all, add the following HTML under the filterText input in index.html that we added previously.

    <label>Genre: </label>
        <select ng-model="genreFilter" ng-options="label for label in availableGenres">
            <option value="">All</option>
        </select>
    

You can see from the above HTML that we have created a select input bound to a model variable called genreFilter. Using ng-options we are able to dynamically populate this select input using an array called availableGenres.

First of all, we need to declare these scope variables. Update your mainController.js file to be as follows:

    app.controller("mainController", function($scope, $http){
            $scope.apiKey = "[YOUR API KEY HERE]";
            $scope.results = [];
            $scope.filterText = null;
            $scope.availableGenres = [];
            $scope.genreFilter = null;
            $scope.init = function() {
                //API requires a start date
                var today = new Date();
                //Create the date string and ensure leading zeros if required
                var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
                $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                    //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                    //For each day get all the episodes
                    angular.forEach(data, function(value, index){
                        //The API stores the full date separately from each episode. Save it so we can use it later
                        var date = value.date;
                        //For each episodes add it to the results array
                        angular.forEach(value.episodes, function(tvshow, index){
                            //Create a date string from the timestamp so we can filter on it based on user text input
                            tvshow.date = date; //Attach the full date to each episode
                            $scope.results.push(tvshow);
                            //Loop through each genre for this episode
                            angular.forEach(tvshow.show.genres, function(genre, index){
                                //Only add to the availableGenres array if it doesn't already exist
                                var exists = false;
                                angular.forEach($scope.availableGenres, function(avGenre, index){
                                    if (avGenre == genre) {
                                        exists = true;
                                    }
                                });
                                if (exists === false) {
                                    $scope.availableGenres.push(genre);
                                }
                            });
                        });
                    });
                }).error(function(error) {
    
                });
            };
        });
    

It is obvious that we have now declared both genreFilter and availableGenres which we saw referenced within our HTML. We have also added some JavaScript which will populate our availableGenres array. Within the init() function, while we are processing the JSON data returned from the API, we are now doing some additional processing and adding any genres that are not already within the availableGenres array to this array. This will then populate the select input with any available genres.

If you open index.html within your browser, you should see the genre select drop down populate as illustrated below:

When the user chooses a genre, the $scope.genreFilter variable will be updated to equal the selected value.

Creating the Custom Filter

As we are wanting to filter on a specific part of the TV show objects, we are going to create a custom filter function and apply it alongside the AngularJS filter within the ng-repeat.

At the very bottom of mainController.js, after all of the other code, add the following JavaScript:

    app.filter('isGenre', function() {
            return function(input, genre) {
                if (typeof genre == 'undefined' || genre == null) {
                    return input;
                } else {
                    var out = [];
                    for (var a = 0; a < input.length; a++){
                        for (var b = 0; b < input[a].show.genres.length; b++){
                            if(input[a].show.genres[b] == genre) {
                                out.push(input[a]);
                            }
                        }
                    }
                    return out;
                }
            };
        });
    

The above JavaScript declares a custom filter to our app called isGenre. The function within the filter takes two parameters, input and genre. input is provided by default (which we will see in a moment) and is all the data that the ng-repeat is processing. genre is a value we need to pass in. All this filter does, is take the specified genre and checks to see if each of the TV show objects within input have the specified genre attached to them. If an object has the specified genre, it adds it to the out array, which will then be returned to the ng-repeat. If this doesn’t quite make sense, don’t worry! It should shortly.

Applying the Custom Filter

Now that we have our customer filter available, we can add this additional filter to our ng-repeat. Modify your ng-repeat in index.html as follows:

    <li ng-repeat="tvshow in results | filter: filterText | isGenre:genreFilter">
    

This simply chains another filter onto the ng-repeat output. Now the output will be processed by both filters before it is displayed on the screen. As you can see we have specified our custom filter as isGenre: and then we are passing the scope variable genreFilter as a parameter, which is how we provide our customer filter with the genre variable we talked about earlier. Remember that AngularJS is also providing our filter with the data that the ng-repeat is processing as the input variable.

OK, our custom genre filter is complete. Open index.html in a browser and test out the new functionality. With this filter in place, a user can easily filter out genres they are not interested in.

Calling Scope Functions

You may have noticed that each TV show listing also shows the genre itself. For some additional functionality, we are going to allow the user to click these genres, which will then automatically apply the genre filter for the genre they have clicked on. First of all, we need to create a scope function that the ng-click can call. Add the following code within the mainController on mainController.js:

    $scope.setGenreFilter = function(genre) {
            $scope.genreFilter = genre;
        }
    

In the above code, this function takes a genre value and then sets the $scope.genreFilter to the specified value. When this happens, the genre filter select box’s value will update and the filter will be applied to the ng-repeat output. To trigger this function when the genre span elements are clicked, add an ng-click to the genre span elements within index.html as follows:

    <span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres" ng-click="setGenreFilter(genre)">{{genre}}</span>
    

The ng-click calls our previously created setGenreFilter function and specifies a genre. Open index.html and try it out!

Custom Ordering With AngularJS

Our TV show premiere app is looking pretty good, users can easily refine the results displayed using a series of intuitive filters. To enhance this experience we are going to add some custom ordering functionality so our users will be able to choose a range of ordering options.

Add the following HTML under the genre select drop down:

    <label>Order by: </label>
        <select ng-model="orderField" ng-options="label for label in orderFields" class="input-medium"></select>
        <select ng-model="orderReverse"class="input-medium">
            <option value="true">Descending</option>
            <option value="false">Ascending</option>
        </select>
    

With this code added, we have two more drop downs. One to select how to order the data and another to choose the direction in which to order the data. We now need to create a function within our controller to make the order comparison. Add the following JavaScript under our setGenreFilter function:

    $scope.customOrder = function(tvshow) {
            switch ($scope.orderField) {
                case "Air Date":
                    return tvshow.episode.first_aired;
                    break;
                case "Rating":
                    return tvshow.episode.ratings.percentage;
                    break;
            }
        };
    

We also need to declare some additional scope variables:

    $scope.orderFields = ["Air Date", "Rating"];
        $scope.orderDirections = ["Descending", "Ascending"];
        $scope.orderField = "Air Date"; //Default order field
        $scope.orderReverse = false;
    

If you now open index.html within your browser, you should see the added drop downs populated with Air Date already selected as the default order field. This is shown in the figure below:

Finally, as we have done with our other filters, we are going to need to append this to our ng-repeat, update this as follows:

    <li ng-repeat="tvshow in results | filter: filterText | isGenre:genreFilter | orderBy:customOrder:orderReverse">
    

We are now applying an order-by-filter on our data in addition to the other filters. We are telling the order by to use our customOrder function and we are passing our orderReverse scope variable through as well. Open index.html in a browser and see the ordering in action.

Conclusion

AngularJS has allowed us to quickly create a detailed and functional web application with minimum effort. Utilizing AngularJS’s built-in filter functions, alongside some of our own custom code, our web application allows our users to easily filter and search through the TV show premieres.

After reading this tutorial you should now be able to understand and use the following principles:

• Using ng-repeat to display information on screen.
• Binding to inputs, allowing users to search and filter ng-repeat output.
• Chaining filters on ng-repeat to perform multiple filtering functions.
• Custom ordering of data.
• Using events such as ng-click to respond to user interaction.
• Using ng-class to conditionally apply styling to page elements.

So in conclusion, the topics covered in this tutorial should give you a strong foundation and understanding of what you can achieve when creating rich web applications in AngularJS.