I'm pretty new with Ionic and AngularJS. I tried to create an app but it seems that the content of app.js is wrong .
This is my code look like :
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url: "/ListeUsers",
views: {
templateUrl: "templates/ListeUsers.html",
controller: 'UsersCtrl'
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/ListeUsers');
});
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>
<script src="lib/ionic/js/angular/angular-resource.min.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/UserControllerIonic.js"></script>
<script src="js/UsersServiceIonic.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
userControllerIonic.js
angular.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
$scope.Users=userService.getUsers();
});
UsersServiceIonic.js
angular.module('starter.services', ['ngResource'])
.factory('userService',function () {
var Users =[];
return{
getUsers:function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
users=response;
return users;
});
},
getUser : function(UserName) {
return $http.get("http://localhost:26309/api/User/getUserByNom/" + UserName).then(function (serviceResp) {
return serviceResp.data;
});
}
}
})
ListeUsers.html
<ion-list>
<ion-item ng-repeat="user in Users"
>{{user.nom}}</ion-item>
</ion-list>
i can't find the problem
There are 2 issues you need to fix here for your app to work:
You need to correct he default fallback url from /app/ListeUsers to /ListeUsers because /app/ListeUsers path will be valid if the state was a child-state of app. See more details here: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
Your service methods are returning promises. You cannot assign a promise to a $scope variable and expect the app to be working. Change your controller code to use the parameter from the .then method callback of the returned promise as below:
angular
.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
userService.getUsers()
.then(function (response) {
$scope.Users= response;
});
});
Related
I am trying to use ionic action sheet in my ionic project but in console it is showing error :-
Uncaught ReferenceError: angular is not defined
at controllers.js:1
Can you please help me to resolve this error.
Please see the below code of controllers.js file
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('myCtrl', function($scope, $ionicActionSheet) {
$scope.triggerActionSheet = function() {
// Show the action sheet
var showActionSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Edit 1' },
{ text: 'Edit 2' }
],
destructiveText: 'Delete',
titleText: 'Action Sheet',
cancelText: 'Cancel',
cancel: function() {
// add cancel code...
},
buttonClicked: function(index) {
if(index === 0) {
// add edit 1 code
}
if(index === 1) {
// add edit 2 code
}
},
destructiveButtonClicked: function() {
// add delete code..
}
});
};
})
And following is the code of index.html file
<!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">
<script src="js/controllers.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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-content>
<button class = "button">Action Sheet Button</button>
</ion-content>
</ion-pane>
</body>
</html>
You included controllers.js before including angular libary. Add angular first
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"/>
before including controllers.js
<script src="js/controllers.js"></script>
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.
I want my ionic project to take a screenshot and store it in camera roll.
currently the button is not able to take any screenshot. I am testing the app on an android device.
I am using this plugin: https://github.com/gitawego/cordova-screenshot
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<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="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-view>
<ion-content>
<button class="button" ng-click="$cordovaScreenshot.capture()">screenshot</button>
</ion-content>
</ion-view>
</body>
</html>
app.js
angular.module('starter', ['ionic','ngCordova'])
.service('$cordovaScreenshot', ['$q', function($q) {
return {
capture: function(filename, extension, quality) {
filename = filename || 'pic';
extension = extension || 'jpg';
quality = quality || '100';
var defer = $q.defer();
navigator.screenshot.save(function(error, res) {
if (error) {
console.error(error);
defer.reject(error);
} else {
console.log('screenshot saved in: ', res.filePath);
defer.resolve(res.filePath);
}
}, extension, quality, filename);
return defer.promise;
}
};
}]);
As a follow-up on my first comment. I think you need a controller between the view (HTML) and your Angular service. A HTML view can't directly communicate with a service, so we need a intermediate controller.
Something along the lines of:
angular.module('starter', ['ionic','ngCordova'])
.controller('myController', ['$cordovaScreenshot', function($cordovaScreenshot) {
$scope.captureScreenshot = function() {
$cordovaScreenshot.capture('filename', 'png', 100).then(function(result) {
// do something with result
}, function(error) {
// do something with error
});
};
}]);
As you can see, we're using dependency injection to inject the $cordovaScreenshot service.
And your view will trigger the captureScreenshot method:
<ion-content ng-controller="myController">
<button class="button" ng-click="captureScreenshot()">screenshot</button>
</ion-content>
Notice the ng-controller and a change in the ng-click method.
The problem was rectified.
The code can be found at
https://github.com/manik1596/coredovaScreenshotShare
This world is sad to cry , am blocked for two hours with a problem that i couldnt define ,i can't retrieve data from my json file ,everything in my code seems correct.
This is my factory:
'use strict';
angular.module('starter.services')
.factory('userService',function ($http) {
return{
getUsers:function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
return response.data;
});
}
}
});
and this controller :
'use strict';
angular.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
$scope.Users = [];
userService.getUsers().then(function (data) { $scope.Users= data.data; }); });
});
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>
<script src="lib/ionic/js/angular/angular-resource.min.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/UserControllerIonic.js"></script>
<script src="js/UsersServiceIonic.js"></script>
</head>
<body ng-app="starter" ng-controller="UsersCtrl">
<ion-view>
<div class = "list" >
<a class = "item" ng-repeat = "user in Users">
<h2>{{user.nom}}</h2>
</a>
</div>
</ion-view>
</body>
</html>
Thank you in advance
SOLUTION
i solved the problem by :
1- adding in the config.xml the permission <allow-navigation href="http://*/*"/>
2-installing cordova-plugin-whitelist ionic plugin add cordova-plugin-whitelist
3-add control-allow-origin extention to chrome :https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US
and finally : specifying the type of data returned by the back-end controller by adding this code to my Global.asax in Application_start method :config.Formatters.JsonFormatter.SerializerSettings.Formatting =
Newtonsoft.Json.Formatting.Indented;
config.Formatters.Remove(config.Formatters.XmlFormatter);
hope this helps someone
You don't want to resolve your $http call inside factory.
JS:
angular.module('app',[])
.controller('MainCtrl', function($scope, MyService){
var url = "http://jsonplaceholder.typicode.com/users";
MyService.getData(url).then(function(res){
console.log(res.data);
$scope.data = res.data;
});
})
.service('MyService', function($http){
return {
getData: function(url){
return $http.get(url);
}
}
})
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in data">{{item.name}}</li>
</ul>
</body>
</html>
The issue is that you are resolving the promise in service with the value response.data, and again expecting the resolved value to have data property. Change your service code as below:
'use strict';
angular
.module('starter.services')
.factory('userService',function ($http) {
return {
getUsers: function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
return response;
});
}
}
});
Or simply return the promise as below:
'use strict';
angular
.module('starter.services')
.factory('userService',function ($http) {
return {
getUsers: function(){
return $http.get("http://localhost:26309/api/User/getAll/");
}
}
});
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