Question

我正在尝试将动画引入我的应用程序，但是当我在我的应用程序中包含ngAnimate依赖项时，它不会加载，也不会在控制台中出现任何错误，这使得调试非常困难。

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

Answer 1

angular.js是版本1.2.4

angular-animate.js是版本1.2.10

更新，所以它们是最新版本，你很好。

ngAnimate依赖性导致应用程序无法显示

1 个答案: