I am attempting to integrate Filestack into an existing app. I think I am having issues with how those modules are configured, but can't get the ordering correct. I receive this error:
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=TypeError%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A20%3A156)
Here is the routing file:
(function () {
var app = angular.module('myApp', ['ngRoute', 'angular-filepicker']);
// ROUTING
app.config(['$routeProvider', function($routeProvider, filepickerProvider){
$routeProvider
.when('/home', {
templateUrl: "views/home.html",
controller: "HomeController"
})
.when('/shopping-list/:id', {
templateUrl: "views/shopping-list.html",
controller: 'ShoppingListController'
})
.when('/add-list', {
templateUrl: "views/add-list.html",
controller: 'AddListController'
})
.otherwise({
redirectTo: '/home'
});
filepickerProvider.setKey('XXXXXXX');
}]);
Here is the index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- CDN SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js"></script>
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tara's Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Imported Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Shopping List</title>
</head>
<body>
<div ng-include="'partials/header.html'"></div>
<main ng-view></main>
<!--ANGULAR SCRIPTS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="/bower_components/filepicker-js/filepicker.js"></script>
<script src="/bower_components/angular-filepicker/dist/angular_filepicker.js"></script>
<script type="text/javascript" src="//api.filestackapi.com/filestack.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/controllers/controller-header.js"></script>
<script type="text/javascript" src="js/controllers/controller-home.js"></script>
<script type="text/javascript" src="js/controllers/controller-add-list.js"></script>
<script type="text/javascript" src="js/controllers/controller-shopping-list.js"></script>
</body>
</html>
And the controller that is using Filestack:
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('ShoppingListController', ['$scope', '$http', '$routeParams', 'API_BASE', '$location', function($scope, $http, filepickerService, $routeParams, API_BASE, $location){
// GET SPECIFIC LIST
$scope.list = [];
var id = $routeParams.id;
$http({
method: 'GET',
url: API_BASE + 'shopping-lists/' + id
}).then(function successCallback(response) {
$scope.list = response.data[0];
}, function errorCallback(response) {
console.log('it did not work');
console.log(response.statusText);
});
// REMOVE LIST
$scope.removeList = function(){
var id = $scope.list.id;
console.log(id);
$http.delete(API_BASE + 'shopping-lists/' + id)
.success(function (data, status, headers, config) {
console.log('you deleted :' + $scope.list);
})
.error(function (data, status, header, config) {
});
$location.path('/home');
};
// RANDOM ID
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
text += Date.now();
return text;
}
// ADD ITEM
$scope.addItem = function(){
var created = new Date();
var newID = makeid();
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
name : $scope.newItem.name,
priority : $scope.newItem.priority,
note: $scope.newItem.note,
picture: $scope.newItem.picture,
isChecked: false,
listId: $scope.list.id,
created: created,
id: newID
});
// console.log($scope.list.items);
$http.put(API_BASE + 'shopping-lists/', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
// Reset input fields after submit
$scope.newItem = {
name: "",
priority: "",
note: ""
};
};
// ADD ITEM IMAGE
$scope.upload = function(){
filepickerService.pick(
{
mimetype: 'image/*',
language: 'en',
services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE','IMAGE_SEARCH', 'FACEBOOK', 'INSTAGRAM'],
openTo: 'IMAGE_SEARCH'
},
function(Blob){
console.log(JSON.stringify(Blob));
$scope.newItem.picture = Blob;
$scope.$apply();
});
};
// REMOVE ITEM
$scope.removeItem = function(item){
var removedItem = $scope.list.items.indexOf(item);
$scope.list.items.splice(removedItem, 1);
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// CLEAR ITEMS
$scope.clearItems = function(){
$scope.list.items.length = 0;
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// CLEAR CHECKED ITEMS
$scope.clearCheckedItems = function(){
var length = $scope.list.items.length-1;
for (var i = length; i > -1; i--) {
if ($scope.list.items[i].isChecked === true) {
$scope.list.items.splice(i,1);
}
}
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
//Edit Items / Checked Items
$scope.editItem = function(){
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// SORT ITEMS
$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};
}]);
}());
Right now, I can't get the page to load at all. Something isn't being called properly, I just can't figure out how to get the page to load (getting the Filestack to function properly is secondary right now).
Any suggestions with the configuration?
You do not have to declare a module for your controller,
var app = angular.module('myApp');
Change like this also you are missing 'filepickerService' while inecting,
angular.module('myApp').controller('ShoppingListController', ['$scope', '$http','filepickerService', '$routeParams', 'API_BASE', '$location', function($scope, $http, filepickerService, $routeParams, API_BASE, $location){
Related
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First AngularJS Application</title>
<script src="scripts/angular.js"></script>
</head>
<body ng-app = "myAngularApp">
<div>
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}
</div>
</div>
<script>
var myApp = angular.module('myAngularApp', []);
myApp.controller("myController", function ($scope, $http) {
var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};
var onError = function (data, status, headers, config) {
$scope.error = status;
}
var promise = $http.get("index.html");
promise.success(onSuccess);
promise.error(onError);
});
</script>
</body>
This is the html file and when I load the page the data were not retrieved. I'm not sure if I have some little mistakes since I copy pasted it in the tutorial.
This will be the output.
Folder Structure
The script tag is wrong in your case. You are using lowercase in your code but your folder structure shows uppercase Scripts
<script src="Scripts/angular.js"></script>
Update
If you are using latest version of angularjs, try the below code since success and error are deprecated.
var myApp = angular.module('myAngularApp', []);
myApp.controller("myController", function ($scope, $http) {
var onSuccess = function (data) {
$scope.data = data.data;
};
var onError = function (data) {
$scope.error = data;
}
var promise = $http.get("index.html");
promise.then(onSuccess);
promise.catch(onError);
});
For more Info : Why are angular $http success/error methods deprecated? Removed from v1.6?
Use then rather than success and use catch rather than error
Example:
<div>
<div ng-controller="myController">
Response Data: <span ng-bind-html="data"></span> <br />
Error: {{error}}
</div>
</div>
<script>
var myApp = angular.module('myAngularApp', []);
myApp.controller("myController", function ($scope, $http, $sce) {
var onSuccess = function (data, status, headers, config) {
$scope.data = $sce.trustAsHtml(data.data);
};
var onError = function (data, status, headers, config) {
$scope.error = data;
}
var promise = $http.get("index.html");
promise.then(onSuccess);
promise.catch(onError);
});
</script>
I'm not too much angularjs information . I want to make the ionic foursquare integration . But do not resolve the error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error:
[$injector:modulerr] Failed to instantiate module ngFoursquare due to:
Error: [$injector:nomod] Module 'ngFoursquare' is not available!
You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
app.js
angular.module('starter', ['ionic', 'starter.controllers' ,'ngFoursquare'])
.constant('CLIENT_ID', 'X4ITCR1UHKU2EKFVIBEZRRYX52W2I2I3I3ZN5K0A2M3YDIKS')
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (cordova.platformId === 'ios' && 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, FoursquareProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
//$urlRouterProvider.otherwise('/app/playlists');
$urlRouterProvider.otherwise({
resolve : {
token: function ($location) {
var match = $location.path().match(/access_token=(.*)/)
if(match){
FoursquareProvider.token = match[1]
}
}
}
,templateUrl: 'templates/login.html'
,controller:'LoginCtrl'
})
});
controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.loginData = {};
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeLogin = function() {
$scope.modal.hide();
};
$scope.login = function() {
$scope.modal.show();
};
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('LoginCtrl', function($scope,Foursquare, $log, CLIENT_ID, $location) {
var match = $location.path().match(/access_token=(.*)/)
$scope.userId = 'self'
$scope.client_id = CLIENT_ID
$scope.redirect_uri = encodeURIComponent(location.origin+location.pathname)
$scope.access_token = match && match[1] || ''
$scope.clear = function () {
$scope.userId=null
$scope.venueId=null
$scope.ll=null
$scope.checkinId=null
}
$scope.getUser = function (userId) {
$scope.data = Foursquare.Users.get({
userId: userId
},function (data) {
$scope.user = data.response.user
})
}
$scope.getUserLists = function (userId) {
$scope.data = Foursquare.Users.lists({
userId: userId
})
}
$scope.searchVenues = function (ll) {
$scope.data = Foursquare.Venues.search({ll:ll})
}
$scope.getVenue = function (venueId) {
$scope.data = Foursquare.Venues.get({
venueId:venueId
})
}
$scope.addCheckin = function (venueId,broadcast) {
$scope.data = Foursquare.Checkins.add({
venueId:venueId,
broadcast:broadcast
})
}
$scope.getCheckin = function (checkinId) {
$scope.data = Foursquare.Checkins.get({
checkinId:checkinId
})
}
$scope.search = function () {
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.$apply(function () {
$scope.pos = pos
$scope.data = Foursquare.search(pos)
})
})
}
$scope.getList = function (listId) {
$scope.data = Foursquare.Lists.get({
listId:listId
})
}
$scope.addList = function (name) {
$scope.data = Foursquare.Lists.add({
name:name
})
}
})
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">
-->
<script src="js/platformOverrides.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/foursquare.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
foursquare.js
angular.module('ngFoursquare',["ngResource"])
.constant('BASE_API_URL','https://api.foursquare.com/v2')
.constant('encodeParam',function (data) {
return data && Object.keys(data).map(function (k) {
return encodeURI(k)+'='+encodeURI(data[k])
}).join('&')
})
.config(function ($provide,$resourceProvider,$httpProvider) {
var $hp = angular.copy($httpProvider)
,$rp = angular.copy($resourceProvider)
i = 0
$provide.decorator('$cacheFactory',function ($delegate) {
return function (cacheId,options) {
if(cacheId=='$http'){
cacheId+=''+i++
}
$delegate(cacheId,options)
}
})
delete $hp.defaults.headers.common["X-Requested-With"]
$provide.provider('$customHttp',$hp)
$rp.$get[0]="$customHttp"
$provide.provider('$customResource',$rp)
})
.provider('Foursquare',function (encodeParam) {
var FoursquareProvider = {
'$get': function ($customResource,$q,BASE_API_URL) {
var $resource=$customResource
,params = {
oauth_token: FoursquareProvider.token || ''
,v: '20130425'
}
,Foursquare = {
token: function (token) {
FoursquareProvider.token = token
}
,Users: $resource(BASE_API_URL+'/users/:userId/:action',
{},{
lists:{
method:'GET',
params: angular.extend({action:'lists'},params)
},
get:{
method:'GET',
params: params
}
})
,Venues : $resource(BASE_API_URL+'/venues/:venueId/:action',
{},{
search: {
method: 'GET'
,params: angular.extend({action:'search'},params)
},
get: {
method: 'GET',
params: params
}
})
,Checkins: $resource(BASE_API_URL+'/checkins/:checkinId/:action',
{},{
add: {
method: 'POST',
params: angular.extend({action:'add'},params),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: encodeParam
},
get: {
method: 'GET',
params: params
}
})
,Lists: $resource(BASE_API_URL+'/lists/:listId/:aspect/:action',
{},{
get: {
method:'GET',
params: params
},
add: {
method: 'POST',
params: angular.extend({action:'add'}, params),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: encodeParam
}
})
,search:function (position) {
return $q.when(position).then(function (pos) {
var c = pos.coords,
ll = "" + c.latitude + "," + c.longitude
return ll
})
.then(function (ll) {
var deferred = $q.defer()
Foursquare.Venues.search({
ll:ll
},deferred.resolve,deferred.reject)
return deferred.promise
})
}
}
return Foursquare
}
}
return FoursquareProvider
})
I think you have not included angular-resource.js in your index.html.
You need to include it first.Then after your ngFoursquare module is created
and then it is available for injection in other module.
Here is my home.html:
<ion-view view-title="Home">
<ion-content>
<h1>here is home </h1>
</ion-content>
</ion-view>
here my 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('starter', ['ionic','ionic.service.core', 'starter.controllers', 'starter.services','ui.bootstrap'])
.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();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.home', {
cache:false,
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/form-connection.html',
controller: 'LoginConnect'
}
}
})
.state('app.registre', {
url: '/registre',
views: {
'menuContent': {
templateUrl: 'templates/registre.html',
controller: 'registreCtrl'
}
}
})
.state('app.facturer', {
url: '/facturer',
views: {
'menuContent': {
templateUrl: 'templates/facturer.html',
controller: 'facturerCtrl'
}
}
})
.state('app.params', {
url: '/params',
views: {
'menuContent': {
templateUrl: 'templates/parametres.html',
controller: 'parametresCtrl'
}
}
})
.state('app.documents', {
url: '/documents',
views: {
'menuContent': {
templateUrl: 'templates/documents.html',
controller: 'documentsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
and here 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 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/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<link rel="stylesheet" href="lib/angular-ui-bootstrap/dist/ui-bootstrap-csp.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<link rel="stylesheet" href="lib/angular-ui-bootstrap/dist/bootstrap.min.css">
<link rel="stylesheet" href="lib/angular-ui-bootstrap/dist/bootstrap-theme.min.css">
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<!-- your app's js -->
<!-- ionic/angularjs js -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
and here the controller :
angular.module('starter', [])
.controller('homeCtrl', function($scope, $stateParams) {
})
.controller('registreCtrl', function($scope, $stateParams) {
})
.controller('facturerCtrl', function($scope, $stateParams) {
})
.controller('documentsCtrl', function($scope, $stateParams) {
})
.controller('parametresCtrl', function($scope, $stateParams) {
})
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
])
//controller pour connection to API
.controller('LoginConnect', ['$scope', 'connecting','sendtoken',
function($scope,connecting,sendtoken){
$scope.user = {};
var users = $scope.user;
$scope.connect = function (users) {
var log = $scope.user.login;
var pass = $scope.user.password;
var mydata = {};
connecting.login(log,pass).then(function(result){
console.log(result);
var montoken = result.data.token;
sessionStorage.setItem('token',montoken);
console.log(montoken);
});
var mytoken = sessionStorage.getItem('token');
console.log(mytoken);
sendtoken.send(mytoken).then(function(userdata){
$scope.datab = userdata;
});
};
}
])
//factory pour aller chercher le token
.factory('connecting', ['$http','$q', function ($http,$q){
var ConnectingFactory = {};
ConnectingFactory.login = function(log,pass){
var deferred = $q.defer();
$http({
method: 'POST',
url: "http://api.tiime-ae.fr/0.1/request/login.php",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data: {login: log, password: pass}
})
.success(function(result){
deferred.resolve(result);
// var promise = deferred.promise;
// promise.then(function(result){
// var mydata = result["data"];
// console.log(mydata);
// }
//);
});
return deferred.promise;
};
return ConnectingFactory;
}])
//END factory pour aller chercher le token
//Factory pour envoyer le token
.factory('sendtoken', ['$http','$q', function ($http,$q){
var tokenreceipt = {};
tokenreceipt.send = function(mytoken){
var deferred = $q.defer();
$http({
method: 'POST',
url: "http://api.tiime-ae.fr/0.1/request/settings-get.php",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data: {token : mytoken}
})
.success(function(userdata){
deferred.resolve(userdata);
// var promise = deferred.promise;
// promise.then(function(result){
// var mydata = result["data"];
// console.log(mydata);
// }
//);
});
return deferred.promise;
};
return tokenreceipt;
}]);
//END Factory pour envoyer le token
;
//envoie du token
// var deferredd = $q.defer();
//
// $http({
// method: 'POST',
// url: "http://api.tiime-ae.fr/0.1/request/settings-get.php",
// headers: {'Content-Type': 'application/x-www-form-urlencoded'},
// data: {token: $scope.user.token}
// })
// .success(function(mesdatas){
// deferredd.resolve(mesdatas);
// var promises = deferredd.promises;
// promises.then(function(mesdatas){
// $scope.datab = mesdatas;
// $scope.user.datab = mesdatas["data"];
// // jsonTab = angular.fromJson(result);
//
//
// });
// })
// console.log($scope.user.token);
//fin envoie token
//user connection
// End of user connection
// .controller('ButtonsCtrl', function ($scope) {
// $scope.singleModel = 1;
//
// $scope.radioModel = 'Middle';
//
// $scope.checkModel = {
// left: false,
// middle: true,
// right: false
// };
//
// $scope.checkResults = [];
//
// $scope.$watchCollection('checkModel', function () {
// $scope.checkResults = [];
// angular.forEach($scope.checkModel, function (value, key) {
// if (value) {
// $scope.checkResults.push(key);
// }
// });
// });
// })
My issue : i got nothing (white page ) when i go to url : http://localhost:8100/home
i only have "Cannot GET /home" and nothing in the console
I'm new in angularJs someone can explain to me my issue ?
You should be going to #/home:
http://localhost:8100/#/home
Try the following url and sure your controller is loading:
http://localhost:8100/#/app/home
Please double check your app.routing.module.ts, there might be a problem on path declaration.
i am trying angular for the first time. i am trying to sign in with google account. But It is not working. When i load the page the button appears and then after loading it hides. and the code is not working to.
here is my app.html
<body >
<div ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="update()">Post data</button>
</div>
<div ng-controller="SignCtrl">
<span id="signinButton" >
<span class="g-signin" ng-click="signIn()"></span>
</span>
<button onclick="SignedOut();">SignedOut</button>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript" src="appMy1.js"></script>
<script type="text/javascript" src="GSignIn.js"> </script>
</body>
Here is my controller
var app = angular.module("app", []);
app.factory("GPlusAuthService", function ($q, $window) {
var signIn;
signIn = function () {
var defered = $q.defer();
$window.signinCallback = function (response) {
$window.signinCallback = undefined;
defered.resolve(response);
};
gapi.auth.signIn({
clientid: "389760997134-uredjv5rat0k3vsjaqlt7nn4pbgtqrat.apps.googleusercontent.com",
cookiepolicy: "single_host_origin",
requestvisibleactions: "http://schemas.google.com/AddActivity",
scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
callback: "signinCallback"
})
return defered.promise;
};
return {
signIn: signIn
}
});
app.controller("AppCtrl", function($scope,$http) {
$scope.update=function(){
$http.post("/user/signup",{Name:'Mr.x',Email:'AX#gmail.com',Organisation:'Ruet',PlacesLived:'dhaka',Img_url:'xyz'})
.success(function(data, status, headers, config) {
console.log(headers);
})
.error(function(data, status, headers, config) {
//console.log(data);
console.log(headers);
});
}
}),
app.controller('SignCtrl', function ($scope, GPlusAuthService) {
$scope.signIn = function() {
GPlusAuthService.signIn().then(function(response) {
});
}
});
Any clue what i am doing wrong?
The error is "cookiepolicy is a required field". But i have mentioned the cookiepolicy.
I'm trying to use the Bing maps REST api from within angular. Fiddler shows a 200 response for both requests below, but Angular fails both, the $hhtp with "No Access-Control-Allow-Origin header is present' and the $request with "Unexpected token : "
I've not tried to do a cross-origin request with angular before but clearly I'm missing something. Any help would be appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-resource.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl"></div>
<script type="text/javascript">
var myapp = angular.module('myapp', ['ngResource']).config(['$httpProvider', function ($httpProvider) {
// delete header from client:
// http://stackoverflow.com/questions/17289195/angularjs-post-data-to-external-rest-api
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
myapp.controller('myctrl', ["$scope", "$resource", "$http", function ($scope, $resource, $http) {
var t = $resource('http://dev.virtualearth.net/REST/v1/Locations?locality=Redmond&adminDistrict=WA&key=MAPKEY&o=json',
{
callback: 'JSON_CALLBACK'
}, {
jsonpquery: { method: 'JSONP', isArray: false }
});
var x = t.jsonpquery().$promise;
debugger;
x.then(function (data) {
debugger;
console.log(data);
});
$http.get('http://dev.virtualearth.net/REST/v1/Locations?locality=Redmond&adminDistrict=WA&jsonp=jsonp&key=MAPKEY')
.success(function(data) {
debugger;
})
.error(function(data, status, error, thing) {
debugger;
console.log(data);
});
}]);
</script>
</body>
</html>
You'll need a map key from https://www.bingmapsportal.com/ to make a request though.
Any help appreciated, otherwise I'll drop down to using jQuery
Use $http.jsonp instead of $http.get. The following code works:
var url = "http://dev.virtualearth.net/REST/v1/Locations?locality=Redmond&adminDistrict=WA&jsonp=JSON_CALLBACK&key=YOUR_BING_MAPS_KEY";
$http.jsonp(url)
.success(function (data) {
debugger;
})
.error(function (data, status, error, thing) {
debugger;
console.log(data);
});