I have a JSON data array which is the response of the predict(...) call from Clarifai recognition and I am trying to display the array of data in my HTML. I use ng-repeat to display the array but it doesn't work. How can I display the array in the HTML? Below is my code snippet for the JS file and the HTML file.
var app = angular.module("starter",['ionic']);
app.controller("myCtrl", function($scope,$rootScope) {
const app = new Clarifai.App({ apiKey: 'e7f899ec90994aeeae109f6a8a1fafbe' });
$rootScope.records = [];
// predict the contents of an image by passing in a url
app.models.predict("pets",'https://samples.clarifai.com/puppy.jpeg').then(
function(response) {
// The JSON.stringify() method converts a JavaScript value to a
// JSON string optionally replacing values if a replacer function
// is specified, or optionally including only the specified
// properties if a replacer array is specified.
for(var i=0; i < 2; i++) {
$rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name);
console.log(`module concept = ${$rootScope.records[i]}`);
alert($rootScope.records[i]);
}
},
function(err) {
console.error(err);
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!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">
-->
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.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>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter"ng-controller="myCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<h1 ng-repeat="x in records">{{x}}</h1>
</ion-content>
</ion-pane>
</body>
</html>
I suggest manually triggering a digest cycle because your predict call is asynchronous.
// add a reference to $timeout
app.controller("myCtrl", function($scope, $rootScope, $timeout) {
// ...
// predict the contents of an image by passing in a url
app.models.predict("pets",'https://samples.clarifai.com/puppy.jpeg').then(
function(response) {
for(var i=0; i < 2; i++) {
$rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name);
console.log(`module concept = ${$rootScope.records[i]}`);
// add the following $timeout call to manually trigger a digest cycle
$timeout(() => {}); /* OR */ $scope.$digest();
}
},
function(err) {
console.error(err);
}
);
});
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>
So I am using this plugin: http://ngcordova.com/docs/plugins/pushNotificationsV5/ Which is cordovaPushV5 and I am trying to get my device token to send to my nodejs server. Here is my code:
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($http, $cordovaPushV5) {
var options = {
android: {
senderID: "12345679"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
// initialize
$cordovaPushV5.initialize(options).then(function() {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function(data) {
// `data.registrationId` save it somewhere;
})
});
// triggered every time notification received
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
// e.message
});
});
<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="lib/ngCordova/dist/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>
When I run it in ionic serve (browser) i get this console error: ReferenceError: Can't find variable: PushNotification
Does anyone know what this means?
Comment above was 100% correct. That error only shows in the browser because this plugin only works on devices
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
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;
});
});
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)
}