ngAnimate dependency causing app not to display

StackOverflow https://stackoverflow.com/questions/21559389

Question

I'm trying to introduce animations into my application however when I include the ngAnimate dependency in my application, it doesn't load nor do I get any errors in the console which is making it pretty hard to debug.

index.html:

<html>
<head >
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/Style%20Library/projects/spDash/app/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/Style%20Library/projects/spDash/app/css/sidebar.css"/>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/Style%20Library/projects/spDash/app/css/bootstrap3.css">
</head>

<body>
    <div id="mdContainer" ng-cloak>
        <!-- Navigation --> 
        <div id='mdSidebar'>
            <ul>
               <li id="menuHome"><a href='#/home'><span>Home</span></a></li>
               <li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
               <li id="menuGroups"><a href='#/groupView'><span>Groups</span></a></li>
               <li id="menuSites"><a href='#/sitesView'><span>Sites</span></a></li>
               <li id="menuReports"><a href='#'><span>Reports</span></a></li>
            </ul>
        </div>

        <!-- Main view --> 
        <ng-view>
            <div class="mainView">
                <h1 class="topPanel">This is place holder text until I build a home page</h1>
            </div>
        </ng-view>
    </div>

    <!-- Scripts -->
    <script type="text/javascript" src="https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/spAppLoader.js"></script>
</body>
</html>

scriptAppLoader.js:

$LAB
    .script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.js")
    .script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js")
    /*.script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js")*/
    /*.script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js")*/   
    /*.script("//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js")*/
    .script("//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/app.js")
    .script("//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/userCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/groupCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/newGroupCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/siteCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/userServices.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/groupServices.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/siteServices.js")
    .wait(function(){
          var root = document.getElementById('mdContainer')
          angular.bootstrap(root ,['spApp']);
        })

app.js:

var spApp = angular.module('spApp', ['ngRoute','ngAnimate','ui.bootstrap'])
    .config(function($routeProvider, $locationProvider){
        var rootUrl = '/Style%20Library/projects/spDash/app/partials/';

        $routeProvider
        .when('/home', 
        {
            templateUrl: rootUrl+'home.html'
        })
        .when('/userView', 
        {
            templateUrl: rootUrl+'userView.html', 
            controller: 'userCtrl'
        })
        .when('/groupView', 
        {
            templateUrl: rootUrl+'groupsView.html', 
            controller: 'groupCtrl' 
        })
        .when('/sitesView',
        {
            templateUrl: rootUrl+'sitesview.html',
            controller: 'sitesCtrl'
        })
        .otherwise({redirectTo:'/home'});
        //$locationProvider.html5Mode(true);
    });
Was it helpful?

Solution

angular.js was version 1.2.4

angular-animate.js was version 1.2.10

Update so they're the latest versions and you're good.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top