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()
Related
I am trying to get a really basic page rendering in Ionic and but can't seem to get anything but a white page to appear.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="vendor/ionic.min.css">
<title>IoT Launch</title>
<script type="text/javascript" src="vendor/vendor.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-app="iot-launch">
<ion-nav-view></ion-nav-view>
</body>
</html>
Note that I'm using Browserify to generate a vendor.js and bundle.js from 3rd party and my own JavaScript with an entrypoint at js/apps.js.
js/app.js:
'use strict';
angular.module('iot-launch', ['ionic', require('./views/deviceList')])
.config(['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}])
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeError', console.log.bind(console));
$rootScope.$on('$stateChangeStart', console.log.bind(console));
$rootScope.$on('$stateNotFound', console.log.bind(console));
$rootScope.$on('$stateChangeSuccess', console.log.bind(console));
}]);
js/views/deviceList.js:
module.exports = angular.module('iot-launch.views.deviceList', [
'ionic'
])
.config(['$stateProvider', function($stateProvider) {
console.log('In deviceList config');
$stateProvider
.state('iot-launch.deviceList', {
url: '/',
template: '<ion-view title="hello"><ion-content>Hello</ion-content></ion-view>'
});
}])
.name;
When I replace <ion-nav-view></ion-nav-view> with the content of the template, it renders on the page (i.e., Hello appears). The only statement appearing in the console is the statement in the the deviceList config so the $stateProvider code appears to be getting called.
I thought the $urlRouterProvider.otherwise('/'), having the iot-launch.deviceList state with a url of /, and using <ion-nav-view></ion-nav-view> in the main html file would lead to the template in iot-launch.deviceList appearing where <ion-nav-view></ion-nav-view> appears.
I just noticed that I didn't define an iot-launch state which is apparently very necessary for an iot-launch.deviceList state to work. Removing .deviceList from the state name or defining an iot-launch state seems to fix it. The lack of error messages was very aggravating.
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');
});
I am new to Angular and learned the basics about it recently.
In my current project, I am developing a single page application. As of now, my HTML/JS setup is as per below:
HTML:
<body>
<ng-include src='"src/includes/home.html"'></ng-include>
<!-- home.html is the HTML template with static data -->
</body>
app.js:
'use strict';
var app = angular.module('MyApp',['home']);
angular
.module('home', [])
.directive('homeDir', function(){
return {
replace: true,
restrict: 'E',
templateUrl: 'src/includes/home.html'
};
});
This code is working fine but I would like to introduce routing to have better control over the pages, instead of using ng-include.
So now, my HTML looks the same and I actually dont know what to change in it while using routing.
My app.js now looks like this:
'use strict';
var app = angular.module('MyApp',['home']);
// trying to introduce routing:
angular
.module('home', ['ngResource', 'ngRoute'])
.config(['$routeProvider', '$locationProvider'],
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'src/includes/home.html',
controller: 'homeCtrl'
}).
when('/drawer', {
redirectTo: 'src/includes/home.html#drawer',
controller: 'drawerCtrl'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
app.controller('homeCtrl', function($scope){
$scope.message = "some message";
console.log("homeCtrl called");
});
app.controller('drawerCtrl', function($scope){
$scope.message = "some other message";
console.log("drawerCtrl called");
});
However, I am getting an error:
Error: error:modulerr
Module Error
As per the link following the error:
This error occurs when a module fails to load due to some exception.
Why is it not loading? What am I missing? What should I change the HTML to?
UPDATE:
After including angular-route.min.js, I am getting the error:
Error: whole is undefined
beginsWith#file:///D:/projects/svn/trunk/src/libs/angular.js:8729:1
LocationHtml5Url/this.$$parse#file:///D:/projects/svn/trunk/src/libs/angular.js:8772:9
$LocationProvider/this.$get<#file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
registerDirective/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21
forEach#file:///D:/projects/svn/trunk/src/libs/angular.js:322:7
registerDirective/<#file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
addDirective#file:///D:/projects/svn/trunk/src/libs/angular.js:6363:28
collectDirectives#file:///D:/projects/svn/trunk/src/libs/angular.js:5801:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5666:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compile#file:///D:/projects/svn/trunk/src/libs/angular.js:5603:1
bootstrap/doBootstrap/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11
$RootScopeProvider/this.$get</Scope.prototype.$eval#file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply#file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
bootstrap/doBootstrap/<#file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
bootstrap/doBootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1340:8
bootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1353:5
angularInit#file:///D:/projects/svn/trunk/src/libs/angular.js:1301:37
#file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5
jQuery.Callbacks/fire#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1
jQuery.Callbacks/self.fireWith#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7
.ready#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38
completed#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4
file:///D:/projects/svn/trunk/src/libs/angular.js
Line 9511
Edit:
Here are my HTML imports:
<head>
<title></title>
<!-- External libraries -->
<link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/headers.css">
<link rel="stylesheet" type="text/css" href="src/css/drawer.css">
<link rel="stylesheet" type="text/css" href="src/css/custom.css">
<script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="src/libs/angular.js"></script>
<script type="text/javascript" src="src/libs/angular-resource.js"></script>
<script type="text/javascript" src="src/libs/angular-ui-router.js"></script>
<script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script>
<script type="text/javascript" src="src/libs/nprogress.js"></script>
<script type="text/javascript" src="src/libs/ng-modal.js"></script>
<script type="text/javascript" src="src/libs/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script>
<script type="text/javascript" src="src/js/app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
Config section is incorrect. Instead of
.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });
it should be
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);
Note, that function definition belongs to array object.
Another mistake is in redirectTo property of the drawer route, currently it doesn't make sense. You want probably this instead:
.when('/drawer', {
templateUrl: 'src/includes/drawer.html',
controller: 'drawerCtrl'
})
Ensue that you have added the angular-route.js file to the html file.
And you are missing the ngRoute module here -
var app = angular.module('MyApp',['ngRoute','ngResource' ]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){... }]);
dfsq is correct. There are syntax errors in the code.
I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.
I have a problem I have this piece of code:
index.html:
<!doctype html>
<html lang="nl" ng-app="tradePlace">
<head>
<meta charset="utf-8">
<link href="./helpers/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./helpers/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css">
<link href="./helpers/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<script type="text/javascript" src="./includes/routes/routes.js"></script>
<script type="text/javascript" src="./includes/services/loginService.js"></script>
<script type="text/javascript" src="./includes/controllers/indexCntrl.js"></script>
</head>
<body ng-view></body>
</html>
Routes.js:
var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
$route.
when('/', {
redirectTo: '/index'
}).
when('/index', {
templateUrl: './includes/templates/index.html',
controller: 'indexCntrl'
}).
when('/register', {
templateUrl: './includes/templates/register.php',
controller: 'indexCntrl'
}).
otherwise({
redirectTo: '/index'
});
$location.html5Mode(true);
}])
indexCtrnl.js:
var app = angular.module('tradeCntrls', []);
app.controller('indexCntrl', ['$scope' , 'loginService', function($scope, login){
$scope.login = function() {
}
}])
loginService.js
app.factory('loginService', ['', function(){
return function login(){
};
}])
So, I get this error:
Error: $injector:unpr Unknown Provider
The error page on the AngularJS docs says:
This error results from the $injector being unable to resolve a
required dependency. To fix this, make sure the dependency is defined
and spelled correctly
Well, I`m sure is spelled correctly and it should be defined. I have already tried to put a getter in the loginServices.js to get the tradePlace module and also tried to use a getter with the tradePlaceCntrls module but I still get the error.
I don`t know how to fix this.
Not sure if this is it but have you tried defining your factory like this?
app.factory('loginService', function(){
return function login(){
};
});
You don't need the array as your login service doesn't have any dependencies. That '' might be causing your issue. Try removing the array as it is not necessary in this case.
Also, you could define your login service as a service:
app.service('loginService', function(){
return function login(){
};
});