angularJS displaying blank page without errors - controller issues

Question

I'm trying to write a ngAnimate directive into my controller. I load my app in a separate file and configure routes like this:

angular

.module('CurriculumApp', ['ui.router', 'ngAnimate'])

.config(function($stateProvider, $urlRouterProvider) {
    //catchall route points to landing
    $urlRouterProvider.otherwise("/landing")
    //app routes
    $stateProvider
        //landing page
        .state('landing', {
        url: '/landing',
        templateUrl: '/../views/landing.html'
        })
        //skills page
        .state('skills', {
        url: '/skills',
        templateUrl: '/../views/skills.html'
        })
        //portfolio page
        .state('portfolio', {
        url: '/portfolio',
        templateUrl: '/../views/portfolio.html',
        controller: 'portfolioController'
        });
    });

Now if I initialize my controller without dependencies (this is a separate .js file):

angular
  .module('CurriculumApp')
  //portfolio controller
  .controller('portfolioController', function($scope) {

      .animation ('.img-thumbnail', function() {
        return {
          move: function(element, done) {
            $(element).toggle("bounce", { times : 3 }, "slow");
          }
        }
      }); //closes .animation
  })// closes controller

I get the following error:

Error: (intermediate value).animation is not a function

But when I try to initialize it like the main app with:

  .module('CurriculumApp', ['ui.router', 'ngAnimate'])

I just get a blank page without the template loading, and without any error messages.

I am trying to follow the Javascript Animations part of this tutorial.

Any insight/help appreciated.

Answer 1

If you are trying to add an animation to your module, then I believe you want your code to look like so:

angular.module('CurriculumApp')
//portfolio controller
.controller('portfolioController', function($scope) {
    // Controller stuff goes here
})// closes controller
.animation ('.img-thumbnail', function() {
    return {
        move: function(element, done) {
            $(element).toggle("bounce", { times : 3 }, "slow");
        }
    }
}); //closes .animation