Develop Reference

$resource is not changing the id of the url

I am in trouble to change the id param of a URL passed to $resource. Apparently the value isn't changing to the correct value that it recive from Resource.get(id:$routeParams.id), even when I put a fixed value (Resource.get(id:1)), resulting in the following error:
TypeError: encodeUriSegment is not a function
When I change the id param of the URL for a fixed value (baseURL+'client/1'), it works.
This is my font:
app.js
'use strict';
angular.module('serviceOrder',['ngRoute','ngResource'])
.config(function ($routeProvider,$locationProvider) {
/*$locationProvider.html5Mode({
enabled: true,
requireBase: false
});*/
$routeProvider.when('/clients', {
templateUrl: 'views/clients.html',
controller: 'ClientController'
});
$routeProvider.when('/newclient',{
templateUrl: 'views/client.html',
controller: 'NewClientController'
});
$routeProvider.when('/editclient/:id',{
templateUrl: 'views/client.html',
controller: 'EditClientController'
});
$routeProvider.otherwise({redirectTo: '/clients'});
});
controler.js
'use strict';
angular.module('serviceOrder')
.controller('EditClientController',['$scope','$routeParams','clientService',
function ($scope,$routeParams,clientService) {
$scope.message = 'Loading ...';
$scope.client = {};
$scope.phone = {id:'',brand:'',model:'',state:'',esn:''};
debugger;
clientService.getClients().get({id:$routeParams.id})
.$promise.then(
function (response) {
$scope.client = response;
},function (error) {
$scope.message = 'Error: ' + error;
}
);
}]);
service.js
'use strict';
angular.module('serviceOrder')
.constant('baseURL', 'http://localhost:8080/service-order-rest/rest/')
.service('clientService',['$resource','baseURL',function ($resource,baseURL){
this.getClients = function () {
return $resource(baseURL+'client/:id',null,{'update':{method:'PUT'}});
};
}]);

Your param defaults are not being configured properly. To achieve this, according to $resource's docs, you must especify the pattern of your API method that will receive params like { id: '#id' } instead of null.
$resource(baseURL + 'client/:id', //url
{ id: '#id' }, // parameters
{
'update': { method: 'PUT' } // methods
});

We have a bug here :
return $resource(baseURL+'client/:id',{id: youridhere} ,{'update':{method:'PUT'}});

How to handle http 302 response in angularjs

I have a java filter, that checks session attribute username. When the username is null then redirect to path /login.I access path /index.html when username is null, I got a HTTP code 302, so I add interceptor in angularjs. But I access /index.html got a error when username is null.
var testApp = angular.module('testApp', [ 'ngRoute', 'myApp' ]);
testApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/anchor/historyAttendance/:uid',{
templateUrl : 'anchor/historyAttendance.html',
controller : 'AnchorHistoryAttendanceCtrl'
}).when('/anchor/list', {
templateUrl : 'anchor/list.html',
controller : 'AnchorListCtrl'
}).otherwise({
redirectTo : '/'
});
} ]);
var app = angular.module('myApp', [ 'ngTable', 'ngFileUpload', 'ngDialog' ,'ui.colorpicker', 'ngCsv', 'ngSanitize'],function ($provide,$httpProvider) {
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q) {
return {
// optional method
'request': function(config) {
// do something on success
console.log(config);
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
console.log(rejection);
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
console.log(response);
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
console.log(rejection);
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
});
app.directive('fontColor', function () {
return {
restrict: 'E',
scope: {},
replace: false,
template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
link: function (scope) {
scope.selectedFontColor = '#f00';
scope.$on('colorPicked', function (event, color) {
scope.selectedFontColor = color;
});
}
}
});
the error in chrome like that:

You can not handle 302 response from a server because browsers do this before the Angular is notified. In a way, Angular response interceptor will never get a hand on this response.
It is properly explained here: Handle HTTP 302 response from proxy in angularjs or https://stackoverflow.com/a/29620184/2405040

It seems that you have created myApp after creation of testApp while you have injected myApp with testApp which does not look correct.
Make sure before injecting any of the module it should be available.
Try below code:
var app = angular.module('myApp', [ 'ngTable', 'ngFileUpload', 'ngDialog' ,'ui.colorpicker', 'ngCsv', 'ngSanitize'],function ($provide,$httpProvider) {
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q) {
return {
// optional method
'request': function(config) {
// do something on success
console.log(config);
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
console.log(rejection);
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
console.log(response);
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
console.log(rejection);
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
});
app.directive('fontColor', function () {
return {
restrict: 'E',
scope: {},
replace: false,
template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
link: function (scope) {
scope.selectedFontColor = '#f00';
scope.$on('colorPicked', function (event, color) {
scope.selectedFontColor = color;
});
}
}
});
var testApp = angular.module('testApp', [ 'ngRoute', 'myApp' ]);
testApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/anchor/historyAttendance/:uid',{
templateUrl : 'anchor/historyAttendance.html',
controller : 'AnchorHistoryAttendanceCtrl'
}).when('/anchor/list', {
templateUrl : 'anchor/list.html',
controller : 'AnchorListCtrl'
}).otherwise({
redirectTo : '/'
});
} ]);

How do inject services to Link function contained directive?

I am trying to inject services to the below directive which is used link function instead of controller.
(function() {
angular
.module("myApp")
.directive('myDirective',['$scope','myService','myData',function($scope,myService,myData) {
return {
restrict'AE',
replace:'true',
templateUrl :'/myApp/directive/my-directive',
scope: {
userId: "#"
}
},
link:function(scope,elem,attr)
{
//Code for link function goes here ...
scope.myUsersArray [];
scope.getUserDetails = function()
{
//code for getUserdetails goes here...
}
}
}]);
})();
When i run this code, i am getting exception like [$injector:unpr] Unkown Provider <_ $scope error. If i remove the injected services, i am not getting any error. Error throws at angular.js file so i don't have any clue to fix it :(

You have several syntax issues. Your code should look like this:
.directive('myDirective', ['$scope', 'myService', 'myData', function($scope, myService, myData) {
return {
restrict: 'AE',
replace: 'true',
templateUrl: '/myApp/directive/my-directive',
scope: {
userId: "#"
},
link: function(scope, elem, attr) {
//Code for link function goes here ...
scope.myUsersArray = [];
scope.getUserDetails = function() {
//code for getUserdetails goes here...
};
}
};
}]);
You may have more problems as its not evident as to why you are injecting $scope, myService, and myData

"No pending request to flush" in unit test for $asyncValidators using $http

I've yet to find an answer on SO, blogs or even Angular issues. I've got other services and controllers that use $http and $resource and their unit tests use $httpBackend.when() to mock the API and $httpBackend.flush() to return a response.
I'm having no luck with this directive, though.
I've created an asynchronous validator, based around the sample code in AngularJS docs. I have verified that the $http.get() is getting called before $httpBackend.flush() with console.log(). However, I get "No pending request to flush" for $httpBackend.flush(). Incidentally, I have also tried $httpBackend.expectGET(), and that expectation fails.
Directive code
'use strict';
angular.module('myApp')
.directive('myServerValidate', function ($q, $http) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attributes, ngModel) {
ngModel.$asyncValidators.server = function (modelValue, viewValue) {
return $http.get('http://myserver/api/System/ValidateField', {
params: {
field: scope.validationConfig.field,
value: '' + (modelValue || viewValue)
}
}).
then(function (successData) {
if (angular.isEmpty(successData) || angular.isEmpty(successData.Status)) {
return $q.reject();
} else if (!successData.Status) {
return $q.reject(successData.Message || '');
} else if (successData.Status) {
return $q.resolve(successData.Message || '');
}
}, function (rejectionData) {
return $q.reject(rejectionData);
});
};
}
};
});
Unit test
'use strict';
describe('Directive: myServerValidate', function () {
beforeEach(module('myApp'));
var form,
scope,
$httpBackend;
afterEach(function () {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
beforeEach(inject(function ($rootScope, $injector, $compile) {
scope = $rootScope.$new();
$httpBackend = $injector.get('$httpBackend');
$httpBackend.
when('GET', /ValidateField/).
respond(function () {
if (form.num === '1') {
return [200, {Status: true, Message: ''}, {}];
} else if (form.num === '2') {
return [200, {Status: false, Message: 'Invalid'}, {}];
} else {
return [404, {}, {}];
}
});
var element = angular.element('<form name="form">' +
'<input type="text" name="num" ng-model="model.num" hc-server-validate>' +
'</form>');
scope.model = {
num: null
};
scope.validationConfig = {
field: 'num'
};
$compile(element)(scope);
form = scope.form;
}));
it('should validate numeric value against server API', function () {
form.num.$setViewValue('1');
scope.$digest();
$httpBackend.flush();
expect(scope.model.num).toEqual('1');
expect(form.num.$valid).toBeTruthy();
});
});
I expected the scope.$digest() to kick off the validation (which it does), which would then call $http.get() (which happens), but $httpBackend somehow doesn't detect the call, or possibly $http doesn't generate the GET request.

Error: Unknown provider: SessionProvider <- Session AngularJS

I am aware that the error which is in the title of this question is basically because in my controller I am injecting a Session service in my controller that has not been defined. I am currently looking at: Angular Devise for which I am rolling out in an application that is using rails but have angular and rails separate. My setup on the angular side is as followed:
main.js
angular.module('App.controllers', []);
angular.module('App.config', []);
angular.module('App.directives', [])
angular.module('App.resources', ['ngResource']);
angular.module('App.services', []);
var App = angular.module("App", [
"ngResource",
"ngCookies",
"$strap.directives",
"App.services",
"App.directives",
"App.resources",
"App.controllers",
"TotemApp.config"
], function ($routeProvider, $locationProvider, $httpProvider) {
var interceptor = ['$rootScope', '$q', function (scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
window.location = "/login";
return;
}
return $q.reject(response);
}
return function (promise) {
return promise.then(success, error);
}
}];
});
Session.js
App.service('Session',[ '$cookieStore', 'UserSession', 'UserRegistration', function($cookieStore, UserSession, UserRegistration) {
this.currentUser = function() {
return $cookieStore.get('_angular_devise_user');
}
this.signedIn = function() {
return !!this.currentUser();
}
this.signedOut = function() {
return !this.signedIn();
}
this.userSession = new UserSession( { email:"sample#email.com", password:"password", remember_me:true } );
this.userRegistration = new UserRegistration( { email:"sample#email.com", password:"password", password_confirmation:"password" } );
}]);
sessions_controller
App.controller('SessionsController', ['$scope', '$location', '$cookieStore', 'Session', function($scope, $location, $cookieStore, Session) {
$scope.session = Session.userSession;
$scope.create = function() {
if ( Session.signedOut ) {
$scope.session.$save().success(function(data, status, headers, config) {
$cookieStore.put('_angular_devise_user', Session.userSession.email);
$location.path('/todos');
});
}
};
$scope.destroy = function() {
$cookieStore.remove('_angular_devise_user');
$scope.session.$destroy();
};
}]);
routes.js
'use strict';
App.config(function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main/home.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'views/sessions/new.html',
controller: 'SessionsController'
})
.when('/sign_up', {
templateUrl: 'views/registrations/new.html',
controller: 'RegistrationsController'
})
.otherwise({
redirectTo: '/'
});
});
This error occurs when I try to access the login page or register page. If someone can shed some light that would be greatly appreciated. Not entirely sure how to resolve this Error: Unknown provider: $SessionProvider <- $Session error

At first glance this looks correct. I can only assume that perhaps you've not included Session.js in your index.html file?
Angular clearly doesn't know what 'Session' service is so there's something wrong there either file not loaded, not loaded correctly or something along those lines as far as I can see.
Edit: Does the error say 'SessionProvider <- Session' or '$SessionProvider -< $session' because if it's the latter, then something is named wrong somewhere in your app since your service is named 'Session' not '$Session'.

When you have syntax error in other javascript or typescript files. You will get the same error. Please make sure that you have no syntax error.