CODEWITHSUNDEEP
javascriptangularjs
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

angularJS displaying blank page without errors - controller issues

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.

Upvotes: 3

Views: 824

Answers (2)

birwin
birwin

Reputation: 2684

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

Upvotes: 2

Eugene Osovetsky
Eugene Osovetsky

Reputation: 6541

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");
       }
     }
   });

Upvotes: 1

Related Questions