angularJS, отображающий пустую страницу без ошибок - проблемы с контроллером

Question

Я пытаюсь написать директиву ngAnimate в свой контроллер. Я загрузить мое приложение в отдельном файле и настроить маршруты, как это:

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

Теперь, если я инициализировать мой контроллер без зависимостей (это отдельный .js файл):

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 

я получаю следующее ошибка:

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

Но когда я пытаюсь инициализировать его как основное приложение с:

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

Я просто получаю пустую страницу без загрузки шаблона и без сообщений об ошибках.

Я пытаюсь выполнить часть анимации Javascript из урока this.

Любое понимание/помощь оценили.

Answer 1

Если вы пытаетесь добавить анимацию в свой модуль, то я что вы хотите, чтобы ваш код выглядел так:

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 

Answer 2

У вас нет ничего для левой стороны .animation, поэтому он не может работать (если вы удалите пробел, по существу у вас есть function($scope){.animation(..., т.е. вы вызываете метод анимации ни на что, что Вот почему вы получите ошибку

Я считаю, что метод .animation должен быть вызван на модуле, то это должно работать:.

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