Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Introducing jQuery Plugins Adding a Plugin to a Web Page

Craig Curtis
Craig Curtis
19,985 Points
Posted by Craig Curtis
Craig Curtis
19,985 Points

Adding Plugin into Angular

I've managed to add this plugin as a directive with Angular and it works fine with separate .html files. But I want to use ngRoute and have the transitions work with the views, which they don't.

app.js file: 

var app = angular.module('MyApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/', {
    templateUrl: 'partials/home.html',
    controller: 'AppCtrl',
  })
   .when('/work', {
    templateUrl: 'partials/work.html',
    controller: 'AppCtrl',
  })
  .otherwise({
    redirectTo: '/'
  });
});
// the directive 
app.directive('ngAnimsition', [function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      var $animsition = $(elem);
      $animsition.animsition({
        inClass: 'fade-in',
        outClass: 'fade-out',
        inDuration: 1500,
        outDuration: 800,
        linkElement: '.animsition-link',
        loading: true,
        loadingParentElement: 'main', //animsition wrapper element
        loadingClass: 'animsition-loading',
        loadingInner: '', // e.g '<img src="loading.svg" />'
        timeout: false,
        timeoutCountdown: 5000,
        onLoadEvent: true,
        browser: [ 'animation-duration', '-webkit-animation-duration'],
        overlay : false,
        overlayClass : 'animsition-overlay-slide',
        overlayParentElement : 'main',
        transition: function(url) { 
          window.location.href = url;
        }
      });
    }
  }
}]);

The index.html file:

<!DOCTYPE html>
<html class="no-js" ng-app="MyApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Getting Animsition jQuery + Angular Router</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--CSS-->
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="js/animsition/animsition.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body ng-controller="AppCtrl">
      <!-- ng-router -->
      <div ng-view></div>
      <!-- tried below, but only does animsition on first load, not changing between views -->
      <!-- <div ng-animsition class="animsition">
           <!-- <div ng-view></div>
      <!-- </div>
      <!-- jquery -->
      <script src="js/jquery/jquery.min.js"></script>
      <script src="js/animsition/jquery.animsition.min.js"></script>
      <!-- Angular -->
      <script src="js/angular/angular.min.js"></script>
      <script src="js/angular/angular-router.min.js"></script>
      <script src="js/app.js"></script>
    </body>
</html>

Partial home.html

<main>
    <div ng-animsition class="row container animsition">
        <nav>
            <a ng-href="#/" class="active animsition-link">Home</a>
            <a ng-href="#/work" class="animsition-link">Work</a>
        </nav>
        <div>
            <h1>Home</h1>
        </div>
    </div>
</main>

Partial work.html

<main>
    <div ng-animsition class="row container animsition">
        <nav>
            <a ng-href="#/" class="animsition-link">Home</a>
            <a ng-href="#/work" class="active animsition-link">Work</a>
        </nav>
        <div>
            <h1>Work</h1>
        </div>
    </div>
</main>

I'm still working on it at the link below. Hope someone can help! Workspace: https://teamtreehouse.com/workspaces/16808012