在Ionic应用程序中安装角度引导日历时出现问题

Troubles with installing angular-bootstrap-calendar into Ionic App

本文关键字:日历 问题 应用程序 Ionic 安装      更新时间:2023-09-26

我目前正在尝试集成angular bootstrap日历https://github.com/mattlewis92/angular-bootstrap-calendar进入我的离子应用程序。然而,我一直遇到这个错误,它没有呈现

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

控制器.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。有人能为我指明正确的方向吗?我应该怎么做才能让它启动和运行?谢谢你的帮助!

你能把你的代码放在github存储库中并提供链接吗。将更容易找到问题