I have installed all the component but also calendar is not displyaing.
I have downloaded moment manually and injected in app.js
module is:
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','ngCordova','angularMoment','mwl.calendar', 'ui.bootstrap'])
.run(function($ionicPlatform) {
$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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
controller:
.controller('timesheetCtrl', function($scope,$cordovaCalendar) {
$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
}
];
})
View (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.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="lib/ui-bootstrap-tpls-1.2.2.min.js"></script>
<script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Timesheet.html:
<ion-view title="Timesheet">
<ion-content overflow-scroll="true" padding="true" class="has-header">
{{tester}}
<mwl-calendar
view="calendarView"
view-date="calendarDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
cell-is-open="true">
</mwl-calendar>
</ion-content>
</ion-view>
anybody know the solution of this problem?
I can tell you what I see at first sight. If your are using angular moment, which is build on top of moment.js you need to include that file as well.
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
Check the official doc for angular moment, everything is explain there. Good luck !
Related
I am trying to make something like this <[Plunker][1]>
But when i try this exact code in my ionic application i get nothing on the screen.
I have already asked this question couple of time but nobody was able to helped me till now.
If you know some other alternative or some tutorial or link please post it.
NOTE i am exactly copying my ionic project code into plunker so that you can better understand it but it might not work in plunker.
Please help me if you can.
<[MY Plunker][2]>
[1]: http://plnkr.co/edit/H5n7SM?p=preview
[2]: https://plnkr.co/edit/fJTaer?p=preview
index.html
<!DOCTYPE html>
<html data-ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.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">
-->
<script src="cordova.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/homeController.js"></script>
<script src="js/secondController.js"></script>
</head>
<body>
<ion-pane>
<ion-content>
<div id="wrapper" ui-view></div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic','ngCordova', 'ui.router'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
ionic.Platform.fullScreen();
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('index', {
url: "",
templateUrl: "home.html",
controller: "homeController"
})
.state('second', {
url: "/second",
templateUrl: "second.html",
controller: "secondController"
})
});
home.html
<div style="width:100px;height: 50px;background-color: blue">home</div>
<button ui-sref="second">click</button>
second.html
<div style="width:100px;height: 50px;background-color: green">second</div>
<button ui-sref="index">click</button>
homeController.js
app.controller('homeController', function($scope,$ionicPlatform,$state) {
});
secondController.js
app.controller('secondController', function($scope,$ionicPlatform,$state) {
});
I am using Angular Translate library to make multiple languages for an Ionic application.
It works fine with English characters , but with arabic charachteres i get question marks like this
Here's the code
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic', 'pascalprecht.translate']);
app.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function ($stateProvider, $urlRouterProvider, $translateProvider) {
$translateProvider.translations('en', {
hello_message: "Hello this is Itmam",
goodbye_message: "Goodbye you were with Itmam"
});
$translateProvider.translations('ar', {
hello_message: "مرحباً , هذه هي اتمام",
goodbye_message: "مع السلامه , كنت مع اتمام"
});
$translateProvider.preferredLanguage("ar");
$translateProvider.fallbackLanguage("en");
});
<!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.css" rel="stylesheet">
<link href="css/style.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">
-->
<!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
will inject platform-specific code from the /merges folder -->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/angular-translate.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Switch Languages</h1>
</ion-header-bar>
<ion-content>
<h1>{{"hello_message" | translate}}</h1>
<h2>{{"goodbye_message" | translate}}</h2>
<h2></h2>
</ion-content>
</ion-pane>
</body>
</html>
I am building a demo app using ionic framework. At a point I decided to use this version of angularjs
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
Whenever I use the above version of angular I get this error Uncaught Error: [$injector:modulerr]
I have also loaded the angular module in my app.js file
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
===============EDITTED
<!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.css" rel="stylesheet">-->
<link href="css/style.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 -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- emoticon rendering -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emoji.min.js"></script>
<link type="text/stylesheet" rel="stylesheet" href="css/emoji.min.css" />
<!-- end of emoticon rendering -->
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<p>Welcome</p>
<br><br><br><br>
<div ng-controller="emojiController">
<div emoji-form emoji-message="emojiMessage" style="margin-top:100px; margin-left:200px">
<textarea id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
<button id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
</div></div>
</ion-content>
</ion-pane>
</body>
</html>
=================complete app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
emojiApp.controller('emojiController', ['$scope', function($scope) {
$scope.emojiMessage={};
}])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
document.addEventListener('deviceready', function () {
var Pushbots = PushbotsPlugin.initialize("56c898fb17795903658b4567", {"android":{"sender_id":"786368090790"}});
}, false);
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Where am I getting it wrong please?
I have been trying to figure out how swap stylesheets when a user clicks on my settings tap but not having any luck so far.
I am able to store the selected stylesheet in my local storage using ngstorage but the link tag is not updating. Here is my code for the link tag.
<!DOCTYPE html>
<html ng-app="starter">
<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.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link ng-href="css/{{theme}}.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.js"></script>
<script src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="lib/ionic/js/angular/truncate.js"></script>
<script src="js/ngStorage.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/posts.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/truncate.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
</html>
Then my radio button is below together with my controller code.
<script id="display-settings-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="nav-title-slide-ios7 bar-reactor">
<h1 class="title">Default Text Size</h1>
<div class="buttons close-button">
<button class="button button-icon icon ion-ios-close-empty" ng-click="closeModal()"></button>
</div>
</ion-header-bar>
<ion-content>
<form action="." ng-submit="noSubmit($event)">
<ion-radio ng-model="data.font_size" ng-value="'larger-fonts'" ng-click="save_settings('larger-fonts')">X-Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'big-fonts'" ng-click="save_settings('big-fonts')">Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="''" ng-click="save_settings('')">Medium</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'small-fonts'" ng-click="save_settings('small-fonts')">Small</ion-radio>
</form>
</ion-content>
</ion-modal-view>
</script>
My controller is
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage) {
$ionicModal.fromTemplateUrl('display-settings-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.displayhmodal = modal;
$scope.modal = modal;
});
$scope.openDisplayModal = function() {
$scope.displayhmodal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
$scope.data = {
font_size: ''
}
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$scope.theme = $localStorage.theme;
console.log($scope.theme)
}
})
How can i change the stylesheet_link_tag to display the selected theme
<link ng-href="css/{{theme}}.css" rel="stylesheet">
Try setting the theme property on the $rootScope:
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage, $rootScope) {
.....
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$rootScope.theme = $localStorage.theme;
console.log($rootScope.theme)
}
I have scaffold ionic project with generator-ionic and created a blank project. I have tried to add a state but the app doesnt load the template defined in any of the state.
here is my app.js
'use strict';
angular.module('IonicCarOPedia', ['ionic'])
.run(function($ionicPlatform) {
$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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'view/main-view.html',
controller:'MainCtrl1'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
})
.controller('MainCtrl1', function(){
console.log("main ctrl alled")
});
Here is index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"IonicCarOPedia"</title>
<link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="IonicCarOPedia">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic/release/js/ionic.js"></script>
<script src="lib/ionic/release/js/ionic-angular.js"></script>
<script src="cordova.js"></script>
<script src="scripts/app.js"></script>
<nav-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view></nav-view>
</body>
</html>
and main-view.html:
<view title="'Employees'">
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
</label>
</div>
</view>
What ever i do template isnt shown, not even the MainCtrl1 is called.
Any help is appreciated. Thanks
Ok Seems like some silly mistake, but I did tried it before which never worked, but its working now.
I have changed ionic elements: nav-bar to ion-nav-bar, nav-view to ion-nav-view and view to ion-view and that worked now.