I am working on ng-Cordova to build a project. I tried so many examples to get logging with google. My need is to login to my app using google account. I have login button. When I click the button, it needs to redirect to google account and sign in with the google account and need to come back to my app.
I have a google client id. I hereby post my index.html file and app.js file.
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">
<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 -->
<script src="lib/ionic/js/ionic.bundle.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>
</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>
</ion-content>
</ion-pane>
</body>
</html>
my app.js file
// 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 exampleApp = angular.module('starter', ['ionic', 'ngCordova']);
//.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) {
// StatusBar.styleDefault();
// }
var requestToken = "";
var accessToken = "";
var clientId = "";
var clientSecret = "";
var exampleApp = angular.module('example', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginController'
})
.state('secure', {
url: '/secure',
templateUrl: 'templates/secure.html',
controller: 'SecureController'
});
$urlRouterProvider.otherwise('/login');
});
exampleApp.controller('LoginController', function($scope, $http, $location) {
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$scope.login = function() {
var ref = window.open('https://accounts.google.com/o/oauth2/auth?client_id=' + clientId + '&redirect_uri=http://localhost/callback&scope=https://www.googleapis.com/auth/urlshortener&approval_prompt=force&response_type=code&access_type=offline', '_blank', 'location=no');
ref.addEventListener('loadstart', function(event) {
if((event.url).startsWith("http://localhost/callback")) {
requestToken = (event.url).split("code=")[1];
$http({method: "post", url: "https://accounts.google.com/o/oauth2/token", data: "client_id=" + clientId + "&client_secret=" + clientSecret + "&redirect_uri=http://localhost/callback" + "&grant_type=authorization_code" + "&code=" + requestToken })
.success(function(data) {
accessToken = data.access_token;
$location.path("/secure");
})
.error(function(data, status) {
alert("ERROR: " + data);
});
ref.close();
}
});
}
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str){
return this.indexOf(str) == 0;
};
}
});
exampleApp.controller('SecureController', function($scope, $http) {
$scope.accessToken = accessToken;
});
I created two html pages additionally after searching some examples.
login.html
<ion-view ng-controller="LoginController" title="Oauth Login">
<ion-content>
<div>
<div class="padding">
<button ng-click="login()" class="button button-block button-stable">
Sign In
</button>
</div>
</div>
</ion-content>
</ion-view>
and secure.html
<ion-view ng-controller="SecureController" title="Oauth Secure">
<ion-content>
<div>
<div class="padding">
{{accessToken}}
<button class="button button-block button-stable">
Do Something
</button>
</div>
</div>
</ion-content>
</ion-view>
When I run the app, only Index file with blank page is showing. I don't know what is the problem. Can somebody help me?
Hi in github i uploaded a sample project to login via google before you execute the project please follow the steps in README.md file of github
Related
Following is a HTML file which is used to enter a movie title and search results are displayed.
I need a menu to this page, which which redirect to different pages and those pages will like about us, featured films, search films.
I want to use ngRoute angular feature to route to these pages.
Below is my html and JS, Although the JS file currently does the functionality of fetching a movie searched for from OMDB API. I want to add ngroute in my JS
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-route.js"></script>
<script src="script.js"></script>
<title>Movie Search | OMDb API</title>
</head>
<body ng-app="OMDbAPISearch">
<div class="container" ng-controller="searchMovies">
<h1>Search a Movie Title Below</h1>
<p>This application utilizes OMDb API data for all results (http://www.omdbapi.com)</p>
<form>
<div class="search">
<input id="theSearch" ng-model="searchparam" placeholder="movie name" type="text" ngTrim="true" />
<button ng-click="fetch()">Search</button>
<div class="clear"></div>
</div>
</form>
<div class="results">
<div class="result" movie-srch-results ng-repeat="movie in movieResults"></div>
</div>
<div class="noResults"></div>
</div>
</body>
</html>
I want to introduce a menu, and use ngRoute: This is my style.js
I want to have a menu called pages with options like about Us , features films etc.
Please help me in introducing ngroute in my js file.
(function(angular) {
'use strict';
angular.module('OMDbAPISearch', [])
.controller('searchMovies', ['$scope', '$http',
function($scope, $http) {
$scope.method = 'GET';
$scope.fetch = function() {
if ($scope.searchparam) {
$scope.url = 'https://www.omdbapi.com/?s=' + $scope.searchparam + '&type=movie&r=json';
$http({
method: $scope.method,
url: $scope.url
}).
then(function(response) {
if (response.data.Response) {
// success
$('.results').css('display', 'block');
$('.noResults').css('display', 'none');
var theSrchResults = response.data["Search"];
angular.forEach(theSrchResults, function(obj) {
// loop through each movie, and pull the details using the IMDB ID
$http({
method: $scope.method,
url: 'https://www.omdbapi.com/?i=' + obj.imdbID + '&plot=full&r=json&tomatoes=true'
}).
then(function(response) {
// extend the details to the parent
obj.details = response.data;
});
});
$scope.movieResults = theSrchResults;
} else {
//error, movie not found
console.log("not found");
$('.results').css('display', 'none');
$('.noResults').css('display', 'block');
$('.noResults').html("<strong>No results found.</strong>");
}
}, function(response) {
console.log("failure");
$('.results').css('display', 'none');
$('.noResults').css('display', 'block');
$('.noResults').html("<strong>Network or data error, please try again.</strong>");
});
} else {
// no input value
$('.results').css('display', 'none');
$('.noResults').css('display', 'none');
$('#theSearch').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
}
};
}
])
.directive('movieSrchResults', function() {
return {
templateUrl: 'movieResults.html'
};
});
})(window.angular);
Here is my plunkr
but how do I add ngRoute in my JS file?
just update your line angular.module('OMDbAPISearch', []) to angular.module('OMDbAPISearch', ['ngRoute']) and add lines as i have written just below of it.
angular.module('OMDbAPISearch', ['ngRoute'])
.config(function($routeProvider,$locationProvider,$httpProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/home',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.otherwise({
redirectTo: "/"
});
})
I have spend a whole week trying every method possible but I keep recreating the same error. I know that ngCordova.min.js must be above Cordova.js. But it seems nothing is loading my plugins. I visited ngCordova website and they explained that this error can be frustrating and hard to fix. Here are my files thank you
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'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services','ngCordova'])
.config(function($ionicConfigProvider, $sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
/*
This directive is used to disable the "drag to open" functionality of the Side-Menu
when you are dragging a Slider component.
*/
.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
function stopDrag(){
$ionicSideMenuDelegate.canDragContent(false);
}
function allowDrag(){
$ionicSideMenuDelegate.canDragContent(true);
}
$rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
$element.on('touchstart', stopDrag);
$element.on('touchend', allowDrag);
$element.on('mousedown', stopDrag);
$element.on('mouseup', allowDrag);
}]
};
}])
/*
This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
.directive('hrefInappbrowser', function() {
return {
restrict: 'A',
replace: false,
transclude: false,
link: function(scope, element, attrs) {
var href = attrs['hrefInappbrowser'];
attrs.$observe('hrefInappbrowser', function(val){
href = val;
});
element.bind('click', function (event) {
window.open(href, '_system', 'location=yes');
event.preventDefault();
event.stopPropagation();
});
}
};
});
controller.js
angular.module('app.controllers', [])
.controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
/*
.controller('scannerCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName $ionicPlatform.ready(function() {
function ($scope, $stateParams) {
}])
*/
.controller('scannerCtrl',['$scope','$stateParams', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform,stateParams) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
}])
.controller('qRCodeCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('profileCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('signupCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('loginCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
index.html (Template)
<!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>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<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">
-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.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>
<ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content ng-controller="menuCtrl" padding="false" class="side-menu-left has-header "></ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</body>
</html>
scanner.html (Template)
<ion-view title="Scanner" id="page2">
<ion-content padding="true" class="has-header">
<div class="card">
<div class="item">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan Now
</button>
</div>
</div>
</ion-content>
</ion-view>
Error satan wrote himself
0 801650 error Error: undefined is not an object (evaluating '$cordovaBarcodeScanner.scan')
scanBarcode#http://192.168.1.73:8100/js/controllers.js:26:31
fn
http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:65429:21
$apply#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:30500:30
http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:65428:19
defaultHandlerWrapper#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:16792:15
eventHandler#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:16780:23
dispatchEvent#[native code]
triggerMouseEvent#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:2953:20
tapClick#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:2942:20
tapMouseUp#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:3018:13
File Setup
You have a little bug on your code, you forgot to annotate $cordovaBarScaner.
.controller('scannerCtrl',['$scope','$rootScope','$cordovaBarcodeScanner', '$ionicPlatform', '$stateParams', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform,stateParams) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
}])
I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('HomePage', {
url: '/HomePage/:id',
templateUrl: 'templates/HomePage.html',
controller: 'HomePageCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http, $cookieStore) {
$cookieStore.put('mycookie', 'cookie value');
var favoriteCookie = $cookieStore.get('mycookie');
var alertPopup = $ionicPopup.alert({
title: 'favoriteCookie title',
template: favoriteCookie // This does not work on phone.
});})
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">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/ng-cordova-master/demo/www/lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="lib/ionic/js/cookies.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Question:
If i use $cookieStore it works on browser without any problem.
However when i publish project to phone $cookieStore is not working. I mean When i try to use $cookieStore in android phone.
$cookieStore displays below error on $ionicPopup.alert.
undefined
How can i use cookie on android by using ionic?
Any help will be appreciated.
Thanks.
Instead of using $cookieStore which doesn't seem to play nicely on Android, simply replace it with the default localStorage. It works just fine! :)
$cookieStore.set() -> window.localStorage.setItem()
$cookieStore.get() -> window.localStorage.getItem()
$cookieStore.remove() -> window.localStorage.removeItem()
Please vote up this answer instead as I wasn't logged in properly on the other one when I posted >_< doh!
Instead of using $cookieStore which doesn't seem to play nicely on Android, simply replace it with the default localStorage. It works just fine! :)
$cookieStore.set() -> window.localStorage.setItem()
$cookieStore.get() -> window.localStorage.getItem()
$cookieStore.remove() -> window.localStorage.removeItem()
I tried to create 3-view app without using the Ionic menu component. So i modified my previous app with sidebar menu by this way:
app.js
.run(function($ionicPlatform, $rootScope) {
$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) {
StatusBar.styleDefault();
}
// PROXIMITY SENSOR
function onSuccess(state) {
console.log('Proximity state: ' + (state ? 'near' : 'far'));
};
if(navigator.proximity != null)
{
navigator.proximity.enableSensor();
setInterval(function(){
navigator.proximity.getProximityState(onSuccess);
}, 100);
}
// END PROXIMITY SENSOR
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('app.game', {
url: '/game',
templateUrl: 'templates/game.html',
controller: 'GameCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: 'templates/about_app.html'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
From example above is app/home is default state but if i started app no content of template templates/home.html is displayed and controller seems to be not initialized and only content which is visible is text defined in index.html file..
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">
<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 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/game.js"></script>
</head>
<body ng-app="starter">
TEST LINK
</body>
</html>
Console output in Chrome gives me no error, but content of the template file and manually redirection to another URL is not working.
What i'm doing wrong please?
Many thanks for any advice.
PLUNKER:
http://plnkr.co/edit/AP5GIs9JQZkkOBZ2ywbR?p=preview
Sorry if my previous answer wasn't clear.
The way i understand in ionic, view hierarchy root element is
<ion-nav-view></ion-nav-view>
either add it into body of index.html or create a route state with for url:'/' with inline template.
Solution is following:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('game', {
url: "/game",
templateUrl: "templates/game.html",
})
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeCtrl"
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});