We Keep Coding

$window resets my service

I am creating an login page using Angular. After I process my login in the backend, I set the values in MyService from my LoginCtrl and then move to the next page using $window.location.href= 'main.jsp'; . But when I call the values which I set in LoginCtrl from HomeCtrl, the values are empty?
I know that Services are singletons and will maintain the same state throughout the app. But in this case, It jut resets. I think it is because of using $window.location.href. Please help me solve my problem.
This is my service ( MyService ):
app.service('MyService', function() {
var user = {
name: '',
permissions: ''
};
this.getUser = function() {
return user;
}
this.setUser = function(userr) {
this.user = userr;
}
});
This my LoginCtrl: ( I've just posted the http.post part)
$http({
method: 'POST',
url: 'login',
data: JSON.stringify($scope.user),
headers: {
'Content-Type': 'application/json'
}
}).success(function(data) {
if (!("failure" == data)) {
console.log(data);
var user = MyService.getUser();
user.name = data.name;
user.permissions = data.permissions;
console.log(user);
console.log(MyService.getUser());
$window.location.href = 'main.jsp';
// MyService.changeLocation('main.jsp', true);
} else {
$scope.information = "Invalid username/password!"
}
}).error(function(data) {
console.log(data);
});
And this is my HomeCtrl:
app.controller('HomeCtrl', function($scope, $http,MyService) {
console.log(MyService.getUser());
var user = MyService.getUser();
$scope.flashMessage="Hello " + user.name;
});
Here user.name is empty.

You are changing your web page. The angular application is not persisted across the website boundary; remove the alteration to the window.location.href.
In order to simulate page changing in Angular consider using the official router (shipped with Angular 1.4+), ngRoute or Angular UI Router. These solutions use the HTML History Api and fallback to hashbang URLs to emulate the sort of thing you're trying to achieve.
This ends up creating a single-page application, which is what Angular is designed for.

In LoginCtrl, while reaching the success callback, you are not setting the response value(data in your case) to user object in MyService service.
You are getting the user object from the Service by
var user = MyService.getUser();
But setting the values to that object will not set the user object in the Service.
You need to use MyService.getUser(user); to set values in your service and the same will be available in your HomeCtrl
$http({
method: 'POST',
url: 'login',
data: JSON.stringify($scope.user),
headers: {
'Content-Type': 'application/json'
}
}).success(function(data) {
if (!("failure" == data)) {
console.log(data);
var user= {};
user.name = data.name;
user.permissions = data.permissions;
MyService.getUser(user); //set the values for user
var obj= MyService.getUser(); //get the values for user
console.log(obj);
//should display user object
//with respective name and permissions should be available
console.log(MyService.getUser());
$window.location.href = 'main.jsp';
// MyService.changeLocation('main.jsp', true);
} else {
$scope.information = "Invalid username/password!"
}
}).error(function(data) {
console.log(data);
});
UPDATE:
The reason why your code doesnt seem to work is: you are using $window incorrectly to change the route. $window.location.href = 'main.html' is somehow changing the route outside angular's context and hence not running the HomeCtrl. To fix this, you need to do the following:
First, define routes for your angular application (preferabbly using ui-router)
app.config(function($stateProvider){
$stateProvider
.state('login',{
url:'/',
templateUrl:'login.html',
controller:'LoginCtrl'
})
.state('main',{
url:'/main',
templateUrl:'main.html',
controller:'HomeCtrl'
})
.state("otherwise", { url : '/'})
})
Use $location.url('/main'). Notice it is same as the url pattern we defined for state: main. Or better, you should use $state.go('home'); to redirect the user to desirable state
Here's a working plunkr
Hope this helps!

Building an extremely simple auth system in ember.js

I'm trying to develop an extremely simple auth system in Ember.js 1.5 but I am having some trouble for the front-end part.
I am very new to ember so please excuse my ignorance.
So here are my routes and their implementations
App.Router.map(function() {
this.route('login');
this.resource("posts");
});
App.AuthenticatedRoute = Ember.Route.extend({
beforeModel: function(transition) {
if (Ember.isEmpty(App.Auth.get('authToken'))) {
this.transitionTo('login');
}
}
});
App.LoginRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('login_template');
},
actions: {
createSession: function() {
var router = this;
var email = this.controller.get('email_login');
var password = this.controller.get('password_login');
if (!Ember.isEmpty(email) && !Ember.isEmpty(password)) {
$.post('/api/v1/session', {email: email, password: password}, function(data) {
var authToken = data.session.auth_token;
var user_id = data.session.user_id;
App.Store.authToken = authToken;
App.Auth = Ember.object.create({
authToken: authToken,
user_id: user_id
});
router.transitionTo('index');
});
}
}
}
});
App.ApplicationRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.find('post');
}
});
App.ProceduresRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.all('post');
}
});
// Ommitting the models because they aren't necessary for this question
So the main concern of course is that App.Auth is initially undefined. I've copied most of the code from a tutorial and I don't know if ember has any session variables that I can initialize.
In any case, I can always just define App.Auth at the beginning with initial values of null for it's properties but that might have other consequences that I am not aware of (again I am new to ember).
So my question here is that how can I properly store the response from the server (auth_token and user_id) in a nice manner. Also, have the user redirected to the login route if auth_token is not set (which is what I am trying to do with the authenticated route part).
You do not need to provide a full answer if you cannot, even some tips / comments will be extremely helpful, thanks!

I'd probably use the container to register an auth manager, and inject it into everything.
App.initializer({
name: "auth",
before: ['ember-data'],
initialize: function (container, application) {
var auth = Ember.Object.extend({
isAuthenticated: Em.computed.notEmpty('authToken')
});
application.register("my:authToken", auth);
application.inject("controller", "auth", "my:authToken");
application.inject("route", "auth", "my:authToken");
application.inject("store:main", "auth", "my:authToken");
application.inject("adapter", "auth", "my:authToken");
}
});
Then on your adapter you could hook up headers easily (if needed)
App.ApplicationAdapter = DS.RESTAdapter.extend({
headers: function() {
return {
authToken: this.get('auth.authToken')
};
}.property("auth.authToken")
});
From any controller/route you could easily access the auth property from this.auth
App.AuthenticatedRoute = Ember.Route.extend({
beforeModel: function(transition) {
if (!this.auth.get('isAuthenticated')) {
this.transitionTo('login');
}
}
});
Here's an example with the injection (note, I'm using Ember Data 1.0 beta 8, some of this functionality, the headers, isn't available in older versions of Ember Data).
http://emberjs.jsbin.com/OxIDiVU/639/edit

How to setup CURD with KendoUI grid for use with Kendo-Angular and an Angular OData factory?

In a previous project, where I was not using Angular, I setup a Kendo.DataSource that used an OData endpoint as follows:
var userDS = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "/api/Users?$filter=USERGROUPS/any(usergroup: usergroup/ID eq '" + groupData.ID + "')", // only need to expand users for the selected group
dataType: "json", // the default result type is JSONP, but WebAPI does not support JSONP
},
update: {
url: function (data) {
// TODO: write UpdateEntity controller method
return "/api/Users(" + groupData.ID + ")";
},
dataType: "json"
},
destroy: {
url: function (data) {
// TODO: write Delete controller method
return "/api/Users(" + groupData.ID + ")";
},
dataType: "json"
},
parameterMap: function (options, type) {
// this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
var parameterMap = kendo.data.transports.odata.parameterMap(options);
return parameterMap;
}
},
Now, introducing AngularJS into the mix, I would like to know how to define the read, update and destroy events using my AngularJS factory, where there is no URL.
My factory contracts are setup as follows:
contentTypesFactory.getList()
contentTypesFactory.insert(contentType)
contentTypesFacotry.remove(id)
The first problem I see with .getList() is that it doesn't take in any query string parameters, like $orderby and $inlinecount=allpages which I need for use with the KendoUI Grid. It is inside this factory that the URL is defined, then calls an abstract factory (see below).
I need to somehow pass in the URL and the entity name to my factory from the kendo.datasource url: function (remember, that the grid control will append whatever OData querystring parameters are required).
So, how I would setup the factory to output the data expected for each of the CRUD events.
Data source definition:
$scope.contentTypesDataSource = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
//url: "/api/UserGroups?$orderby=GROUPNAME",
url: '/odata/ContentTypes',
//function (data) {
// pass in the URL to the abstract factory
//},
dataType: "json" // the default result type is JSONP, but WebAPI does not support JSONP
},
update: {
},
destroy: {
},
parameterMap: function (options, type) { ...
Abstract repository:
app.factory('abstractRepository', [function () {
// we will inject the $http service as repository service
// however we can later refactor this to use another service
function abstractRepository(repositoryService, whichEntity, odataUrlBase) {
//this.http = $http;
this.http = repositoryService;
this.whichEntity = whichEntity;
this.odataUrlBase = odataUrlBase;
this.route;
}
abstractRepository.prototype = {
getList: function () {
return this.http.get(this.odataUrlBase);
},
get: function (id) {
return this.http.get(this.odataUrlBase + '/' + id);
},
insert: function (entity) {
return this.http.post(this.odataUrlBase, entity);
},
update: function (entity) {
return this.http.put(this.odataUrlBase + '/' + entity.ID, this.whichEntity);
},
remove: function (id) {
return this.http.delete(this.odataUrlBase + '/' + id);
}
};
abstractRepository.extend = function (repository) {
repository.prototype = Object.create(abstractRepository.prototype);
repository.prototype.constructor = repository;
}
return abstractRepository;
}]);
ContentTypesFactory.js:
// each function returns a promise that can be wired up to callback functions by the caller
// the object returned from the factory is a singleton and can be reused by different controllers
app.factory('contentTypesRepository', ['$http', 'abstractRepository', function ($http, abstractRepository) {
var odataUrlBase = '/odata/ContentTypes'
var whichEntity = 'ContentTypes';
function contentTypesRepository() {
abstractRepository.call(this, $http, whichEntity, odataUrlBase);
}
abstractRepository.extend(contentTypesRepository);
return new contentTypesRepository();
}]);
After looking at kendo-examples-asp-net, I'm thinking that I should do away with the ContentTypesFactory and the abstract repository and call the OData endpoint directly - of course this is relatively easy.
However, my initial reason for creating an Angular repository was so that I could do JS unit testing on the data functions. To retain this feature, how can I call the abstract repository directly from the data source functions, and this the recommended way of accomplishing this?

Cache from $resource service with specific querys

I'm extending $resource with some methods, which using query, just for example:
var Resource = $resource(url, {}, {
query: {
cache: true
}
})
Resource.getByCategory = function (categoryId) {
return Resource.query({ categoryId: categoryId })
}
Resource.getBySearch = function (text) {
return Resource.query({ search: text })
}
I want to cache only the data which comes from getByCategory. as you can see, both methods use query, so I cannot define in the query configuration level - as I'm doing now and the data is cached for the both methods.
Any ideas? I thought about somehow using decorator for cached methods, not sure if it is going to help.

Default $resource POST data

That might be strange but I need to specify some default POST data for my $resource using the factory method of the module.
Does anyone have an idea of how to do that in AngularJS ?
EDIT :
Well, i want to do something like this :
/**
* Module declaration.
* #type {Object}
*/
var services = angular.module("services", ["ngResource"]);
/**
* Product handler service
*/
services.factory("Product", function($resource) {
return $resource("http://someUrl", {}, {
get : {method: "GET", params: {productId: "-1"}},
update: {method : "POST", params:{}, data: {someDataKey: someDataValue}}
});
});
Where data is the default data for my future POST requests.

This is not really the angular way to do such a thing as you lose data consistency if you do it and it doesn't reflect in your model.
Why?
The resource factory creates the object and uses object instance data as POST. I have looked at the documentation and angular-resource.js and there doesn't seem to be a way to specify any default custom properties for the object being created by resource without modifying angular-resource.js.
What you can do is:
services.factory("Product", function($resource) {
return $resource("http://someUrl", {}, {
get : {method: "GET", params: {productId: "-1"}},
update: {method : "POST"}
});
});
and in your controller:
$scope.product = {}; // your product data initialization stuff
$scope.product.someDataKey = 'someDataValue'; // add your default data
var product = new Product($scope.product);
product.$update();

I think it will depend on how you call the update function. If you read the angular main page's tutorial, under "Wire up a Backend", the mongolab.js provides a 'Project' factory. Copied verbatim:
angular.module('mongolab', ['ngResource']).
factory('Project', function($resource) {
var Project = $resource('https://api.mongolab.com/api/1/databases' +
'/angularjs/collections/projects/:id',
{ apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
update: { method: 'PUT' }
}
);
Project.prototype.update = function(cb) {
return Project.update({id: this._id.$oid},
angular.extend({}, this, {_id:undefined}), cb);
};
Project.prototype.destroy = function(cb) {
return Project.remove({id: this._id.$oid}, cb);
};
return Project;
});
The usage is that you first get an instance of the Project:
project = Project.get({id:1});
Then do an update after some changes:
project.update(someFunction);
In your case, you can change the update to always add the data you need:
Product.prototype.update = function(cb) {
return Product.update({},
angular.extend({}, this, {someDataKey: someDataValue}), cb);
};
Otherwise, you can most likely put the key/value pair in the params:
update: {method : "POST", params:{someDataKey: someDataValue}}
It will be POSTed with the key/value pair in the URL, but most app servers nowadays will throw the pair into the params object anyway.

I think most have missed a tiny gem in the documentation here.
non-GET "class" actions: Resource.action([parameters], postData, [success], [error])
This suggests you can do the following.
var User = $resource('/user');
postData = { name : 'Sunil', 'surname' : 'Shantha' };
var user = User.save({notify:'true'}, postData, function() {
// success!
});
The second parameter when doing a save action (post) is post data.

Wrapper function will work.
function myPost(data) {
return $http.post('http://google.com', angular.extend({default: 'value'}, data))
}
myPost().success(function(response) { ... });

Might this solve your problem?
services.factory("Product", function($resource) {
return $resource("http://someUrl", {}, {
get : {method: "GET", params: {productId: "-1"}},
update: {method : "POST", params:{}, data: {someDataKey: someDataValue}}
});
});
services.factory("DefaultProduct", function(Product) {
return function(){
return new Product({
data:"default";
});
};
});
services.controller("ProductCTRL",function($scope,DefaultProduct){
$scope.product = new DefaultProduct();
});

You can just merge your params with the default. Everything not available in params will be provided by the default object. Everything available will be overwritten by myParams
services.factory("Product", function($resource) {
return $resource("http://someUrl", {}, {
get : {method: "GET", params: {productId: "-1"}},
update: {method : "POST", params:angular.extend(myDefault, myParams);}
});
});
where myParams would be your list of variables and myDefault your default values as a json object.

You can set default fields on your request by using transformRequest option for your $resource's actions that use the POST method.
For example something like this
function prependTransform(defaults, transform) {
// We can't guarantee that the default transformation is an array
defaults = angular.isArray(defaults) ? defaults : [defaults];
// Append the new transformation to the defaults
return [transform].concat(defaults);
}
ctrl.factory('MyResource', ['$resource', '$http',
function($resource, $http) {
return $resource('/path/to/myresource/:id', {id : '#id'},
{
create : {
method : 'POST',
transformRequest : prependTransform($http.defaults.transformRequest,
function(data, headers) {
return addDefaultField(data);
}
),
},
});
}
]);