javascript - 将 angular-bootstrap-calendar 安装到 Ionic App 中时出现问题

Question

我目前正在尝试集成 Angular 引导日历https://github.com/mattlewis92/angular-bootstrap-calendar进入我的 ionic 应用程序。但是，我一直遇到这个错误，并且它没有渲染

Uncaught Error: [$injector:modulerr]  
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=SimpleRESTIonic&p1=
%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.min.js%3A50%3A339)

我尝试按照通过 Bower 安装提到的步骤进行操作，但我不确定 Bower_components 在哪里。因此，我将它们转移到 www/lib 目录，以便可以访问它们。我在我的index.html 中包含了脚本标签。

<link href="lib/angular-bootstrap-calendar/dist/css/angular
bootstrap-calendar.min.css" rel="stylesheet">

<script src="lib/angular-bootstrap-calendar/dist/js/angular
bootstrap-calendar-tpls.min.js"></script>

我也继续通过 npm 安装，因为错误仍然存​​在。

以下是我各自文件中的代码:

app.js

angular.module('SimpleRESTIonic', ['ionic', 'backand','SimpleRESTIonic.controllers', 'SimpleRESTIonic.services','mwl.calendar','ui.bootstrap'])

.config(function (BackandProvider, $stateProvider, $urlRouterProvider, $httpProvider) {
    // change here to your appName
    BackandProvider.setAppName('ionicstarter');

    BackandProvider.setSignUpToken('4ce88904-75c5-412c-8365-df97d9e18a8f');

    // token is for anonymous login. see http://docs.backand.com/en/latest/apidocs/security/index.html#anonymous-access
    BackandProvider.setAnonymousToken('87c37623-a2d2-42af-93df-addc65c6e9ad');

    $stateProvider
        // setup an abstract state for the tabs directive
        .state('tab', {
            url: '/tabs',
            abstract: true,
            templateUrl: 'templates/tabs.html'
        })
        .state('tab.dashboard', {
            url: '/dashboard',
            views: {
                'tab-dashboard': {
                    templateUrl: 'templates/tab-dashboard.html',
                    controller: 'DashboardCtrl as vm'
                }
            }
        })
        .state('tab.login', {
            url: '/login',
            views: {
                'tab-login': {
                    templateUrl: 'templates/tab-login.html',
                    controller: 'LoginCtrl as login'
                }
            }
        })
        .state('tab.signup', {
            url: '/signup',
            views: {
                'tab-signup': {
                    templateUrl: 'templates/tab-signup.html',
                    controller: 'SignUpCtrl as vm'
                }
            }
        }
    );

    $urlRouterProvider.otherwise('/tabs/dashboard');
    $httpProvider.interceptors.push('APIInterceptor');
})

.run(function ($ionicPlatform, $rootScope, $state, LoginService, Backand) {

    $ionicPlatform.ready(function () {

        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }

        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleLightContent();
        }


        var isMobile = !(ionic.Platform.platforms[0] == "browser");
        Backand.setIsMobile(isMobile);
        Backand.setRunSignupAfterErrorInSigninSocial(true);
    });

    function unauthorized() {
        console.log("user is unauthorized, sending to login");
        $state.go('tab.login');
    }

    function signout() {
        LoginService.signout();
    }

    $rootScope.$on('unauthorized', function () {
        unauthorized();
    });

    $rootScope.$on('$stateChangeSuccess', function (event, toState) {
        if (toState.name == 'tab.login') {
            signout();
        }
        else if (toState.name != 'tab.login' && Backand.getToken() === undefined) {
            unauthorized();
        }
    });

})

Controller .js

angular.module('SimpleRESTIonic.controllers', ['angular-bootstrap-calendar',
'angular-ui-bootstrap'])

.controller('calenderController', function($scope, $rootScope){
  $scope.calendarView = 'week';
  $scope.calendarDay =  new Date();
  $scope.tester = 'Is the Controller connecting';
  $scope.events = [
   {
    title: 'My event title', // The title of the event
    type: 'info', 
    startsAt: new Date(2013,5,1,1),
    endsAt: new Date(2014,8,26,15), 
    editable: false,
    deletable: false,
    incrementsBadgeTotal: true
   }
];

})

    .controller('LoginCtrl', function (Backand, $state, $rootScope, LoginService) {
        var login = this;

        function signin() {
            LoginService.signin(login.email, login.password)
                .then(function () {
                    onLogin();
                }, function (error) {
                    console.log(error)
                })
        }

        function anonymousLogin() {
            LoginService.anonymousLogin();
            onLogin();
        }

        function onLogin() {
            $rootScope.$broadcast('authorized');
            $state.go('tab.dashboard');
            login.username = Backand.getUsername();
    }

        function signout() {
            LoginService.signout()
                .then(function () {
                    //$state.go('tab.login');
                    $rootScope.$broadcast('logout');
                    $state.go($state.current, {}, {reload: true});
                })

        }

        function socialSignIn(provider) {
            LoginService.socialSignIn(provider)
                .then(onValidLogin, onErrorInLogin);

        }

        function socialSignUp(provider) {
            LoginService.socialSignUp(provider)
                .then(onValidLogin, onErrorInLogin);

        }

        onValidLogin = function(response){
            onLogin();
            login.username = response.data;
        }

        onErrorInLogin = function(rejection){
            login.error = rejection.data;
            $rootScope.$broadcast('logout');

        }


        login.username = '';
        login.error = '';
        login.signin = signin;
        login.signout = signout;
        login.anonymousLogin = anonymousLogin;
        login.socialSignup = socialSignUp;
        login.socialSignin = socialSignIn;

    })

    .controller('SignUpCtrl', function (Backand, $state, $rootScope, LoginService) {
        var vm = this;

        vm.signup = signUp;

        function signUp(){
            vm.errorMessage = '';

            LoginService.signup(vm.firstName, vm.lastName, vm.email, vm.password, vm.again)
                .then(function (response) {
                    // success
                    onLogin();
                }, function (reason) {
                    if(reason.data.error_description !== undefined){
                        vm.errorMessage = reason.data.error_description;
                    }
                    else{
                        vm.errorMessage = reason.data;
                    }
                });
        }


        function onLogin() {
            $rootScope.$broadcast('authorized');
            $state.go('tab.dashboard');
        }


        vm.email = '';
        vm.password ='';
        vm.again = '';
        vm.firstName = '';
        vm.lastName = '';
        vm.errorMessage = '';
    })

    .controller('DashboardCtrl', function (ItemsModel, $rootScope) {
        var vm = this;

        function goToBackand() {
            window.location = 'http://docs.backand.com';
        }

        function getAll() {
            ItemsModel.all()
                .then(function (result) {
                    vm.data = result.data.data;
                });
        }

        function clearData() {
            vm.data = null;
        }

        function create(object) {
            ItemsModel.create(object)
                .then(function (result) {
                    cancelCreate();
                    getAll();
                });
        }

        function update(object) {
            ItemsModel.update(object.id, object)
                .then(function (result) {
                    cancelEditing();
                    getAll();
                });
        }

        function deleteObject(id) {
            ItemsModel.delete(id)
                .then(function (result) {
                    cancelEditing();
                    getAll();
                });
        }

        function initCreateForm() {
            vm.newObject = {name: '', description: ''};
        }

        function setEdited(object) {
            vm.edited = angular.copy(object);
            vm.isEditing = true;
        }

        function isCurrent(id) {
            return vm.edited !== null && vm.edited.id === id;
        }

        function cancelEditing() {
            vm.edited = null;
            vm.isEditing = false;
        }

        function cancelCreate() {
            initCreateForm();
            vm.isCreating = false;
        }

        vm.objects = [];
        vm.edited = null;
        vm.isEditing = false;
        vm.isCreating = false;
        vm.getAll = getAll;
        vm.create = create;
        vm.update = update;
        vm.delete = deleteObject;
        vm.setEdited = setEdited;
        vm.isCurrent = isCurrent;
        vm.cancelEditing = cancelEditing;
        vm.cancelCreate = cancelCreate;
        vm.goToBackand = goToBackand;
        vm.isAuthorized = false;

        $rootScope.$on('authorized', function () {
            vm.isAuthorized = true;
            getAll();
        });

        $rootScope.$on('logout', function () {
            clearData();
        });

        if (!vm.isAuthorized) {
            $rootScope.$broadcast('logout');
        }

        initCreateForm();
        getAll();

    });

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">


<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<script src="lib/angularbknd-sdk/dist/backand.debug.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>

</head>
<body ng-app="SimpleRESTIonic">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
 </ion-nav-bar>
 <ion-nav-view></ion-nav-view>
</body>
</html>

根据另一个问题的建议，我还在脚本中包含了 moment.js 。谁能指出我应该做什么才能让它启动并运行的正确方向？感谢您的帮助!

Answer 1

您能否将您的代码放入 github 存储库并提供那里的链接。会更容易找到问题