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.

What are you calling .animation from? Or is that how your attempting to call it? — ste2425
– ste2425, Commented Dec 17, 2015 at 16:11

birwin · Accepted Answer · 2015-12-17 16:13:53Z

2

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

answered Dec 17, 2015 at 16:13

birwin

2,6943 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eugene Osovetsky · Accepted Answer · 2015-12-17 16:11:50Z

1

You don't have anything to the left-hand side of .animation, which is why it can't work (if you remove the whitespace, essentially you have function($scope){.animation(..., i.e. you are calling the animation method on nothing, which is why you get the error.

I believe the .animation method should be called on the module, i.e. this should work:

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

answered Dec 17, 2015 at 16:11

Eugene Osovetsky

6,5512 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

angularJS displaying blank page without errors - controller issues

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related