1
我目前正在嘗試將角度引導日曆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_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>
我也在t中包含了moment.js他根據另一個問題的建議編寫腳本。任何人都可以向我指出正確的方向，我應該做些什麼來啓動和運行？謝謝你的幫助！
有這麼多的代碼，最好提供一個Plunker或JSFiddle – beaver