I am trying to display the response in my view.....I am getting data in my controller but the data is not showing in 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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngGeolocation/ngGeolocation.min.js"/>
<!-- 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/controller.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view ></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic','starter.controllers','ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Login', {
cache: false,
url: '/Login',
views: {
'': {
templateUrl: 'Templates/Login.html',
controller: 'loginCtrl',
}
}
})
$urlRouterProvider.otherwise('/Login');
});
my controller
var app=angular.module('starter.controllers',['ngGeolocation']);
app.controller('loginCtrl',function($geolocation, $scope){
$scope.test="test string";
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
});
})
in the console i am able to see the data
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="main">
<pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>
I can only see first pre tag data, the second is always '{}'
I tried to create a plunker but its giving a warning for $geolocation and that function is escaping from execution.. Any help will be appreciated...tq
Your $scope.myPosition is a Geoposition object. That object contains a coords object that contains the values for latitude and longitude (among others). Change your view like so:
{{myPosition.coords.latitude}}
Hope this helps.
I just tried on the jfiddle. Write this to see the latitude:
`<pre>{{myPosition.coords.latitude}}</pre>`
and make sure location settings is ENABLED in your computer and it will show the correct value.
I spent a bit of time generating a https://jsfiddle.net/jktkq8tL/6/. Most notably adding an error function,
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
},function(data) {
console.log(data.error.message);
});
which highlighted an error:
Network location provider at 'https://www.googleapis.com/' : No
response received.
Once I had received this error, I performed a search and found this SO answer. Which states:
I simulated this problem and found that the success callback functions
were only called when the html page was hosted on a web server and not
when opened from a filesystem.
So this is worth investigating.
Related
I have an angular application where i have a app.run.js and app.controllers.js
Previously i was using one main.js , app was working fine but now when
i have separated the controllers and run.js
i am getting no module available error.
Error: $injector:modulerr
Module Error
What am i doing wrong here ?
Please see the fiddle for the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starfleet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="http://webstandards.delhivery.com/favicon.ico">
<link rel="stylesheet" href="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="starfleet-app" ng-controller="pageController as vm">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.js"></script>
<script src="scripts/app.run.js"></script>
<script src="scripts/controllers/app.page.controller.js"></script>
</body>
</html>
This is my app.run.js
angular.module('starfleetApp',['dlv-ng','ngRoute']);
angular.module('starfleetApp').config(function($routeProvider) {
debugger;
$routeProvider
.when('/', {
templateUrl: './../partials/tracking.html'
})
.when('/create', {
templateUrl: './../partials/createOrder.html'
})
.when('/singleUpload', {
templateUrl: './../partials/singleUpload.html'
})
.otherwise({
redirectTo: '/'
});
});
This is my app.page.controller.js
angular.module("starfleetApp").controller('pageController', function($scope, $uibModal, $log, $document, $rootScope) {
});
<!-- begin snippet: js hide: false console: true babel: false -->
Have you tried to change your angular.module("starfleetApp") to angular.module("starfleet-app")?
according to your html and JS, you are using wrong module name. this might fix your error.
EDIT
working code
http://jsbin.com/komodukipe/edit?html,output
I just started a blank new Ionic project, and I'm going crazy trying to figure out what is wrong with my $stateProvider setup.
My routes.js:
angular.module('starter.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/Login',
templateUrl: 'templates/Login.html',
controller: 'loginCtrl'
});
$urlRouterProvider.otherwise('/Login');
});
My app.js:
angular.module('starter', ['ionic', 'starter.routes', 'ui.router'])
.run(function($ionicPlatform, $state, $timeout) {
$ionicPlatform.ready(function() {
console.log("platform ready");
$state.go('login');
// 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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
My 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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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/routes.js"></script>
<script src="js/controllers/login-ctrl.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>
I've already worked on complex ionic apps, and started many on my own, and never had a problem like this, in my app.js, the $state.go('login'); won't work. EVER.
I tried to put that command inside a timeout, or a function but nothing happened, I'm guessing there is something wrong with my declaration of the $stateProvider but I really can't figure out what that could be.. I also tried to copy and pasterino whole sections of working code from other projects...
I really need help!! Thank you!
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'm trying to use the Angular JS range slider with my ionic app but it displays as below:
range slider error
I've installed npm angularjs-slider but there is an error in the console - Uncaught ReferenceError: app is not defined. Can anyone help. app.js Code below followed by index.html code. Thanks
angular.module('ionicApp', ['ionic', 'ngAutocomplete', 'rzModule', 'ui.bootstrap'])
.controller("MainCtrl", function() {
console.log("Main Controller says: Hello World");
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
})
.state('page', {
url: "/page",
templateUrl: "templates/page.html",
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
});
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Range slider config
$scope.minRangeSlider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
});
<!DOCTYPE html>
<html ng-app="ionicApp">
<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 rel="stylesheet" type="text/css" href="css/rzslider.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script -->
<script src="cordova.js"></script>
<script src="ngautocomplete.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
<script src="js/rzslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="MainCtrl" disable-tap>
<ion-nav-view></ion-nav-view>
</body>
</html>
And I link it to my page template by:
<div class="wrapper">
<article>
<rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue" rz-slider-options="rangeSlider.options"></rzslider>
</article>
</div>
If you use jQuery 3.0.0, there is an incompatibility, try with jQuery 2.2.4
I open an issue on github :
https://github.com/angular-slider/angularjs-slider/issues/365
Try the new version 5.1.1, it could fix your issue.
Because you had referenced wrong scope variable, it should be minRangeSlider instead of rangeSlider
Markup
<rzslider
rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options">
</rzslider>
Edit
Remove angular.js cdn reference as you are already loading angular files from ionic-bundle.js
In my index.html I'm calling scripts ui-bootstrap-tpls.min.js version 0.14.3 and below, angular-ui-router.min.js version 0.2.15.
<!DOCTYPE html>
<html lang="pt-BR" ng-app="main">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="./favicon.ico">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./js/angular/main.js"></script>
<script type="text/javascript" src="./js/angular/controllers/carousels.js"></script>
</head>
<body ui-view="outside"></body>
</html>
And in the script main.js I call the directives ui.bootstrap and ui.router.
var app = angular.module("main", [
"ui.bootstrap",
"ui.router"
]);
And that's my route:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$urlRouterProvider.when("/", "/home");
$stateProvider.state("site", {
url: "/",
views: {
"outside#": {
templateUrl: "./pages/site/index/read.html"
}
}
}).state("home", {
parent: "site",
url: "home",
views: {
"inside#site": {
templateUrl: "./pages/site/home/read.html"
}
}
});
});
But when I go on any page to make call from any element of the UI Bootstrap, whether tooltips or carousel, returns me an error saying it can not load the template.
This started after I started using the UI Router.
Does anyone know how to solve this problem?
-- Edited --
I could finally figure out what is causing the problem.
In the script main.js I clean the cache of templates using the following code:
app.run(function($rootScope, $templateCache) {
$rootScope.$on("$stateChangeStart", function() {
$templateCache.removeAll();
});
});
And that is exactly what is causing all my problem.
But how can I clear the cache of templates in UI Router without the UI Bootstrap stop working?