Dynamic domain URL Rest factory AngularJS - javascript

I want change dynamic REST URL (for example if is stage or production) with a simple change in a server, but the URL don't change:
I have tried this:
.factory('Auth', ['$resource', 'Config', function($resource, Config) {
var URL = function(){
var random = Math.floor((Math.random() * 100) + 1);
window.localStorage.setItem("REST", "http://dynamic"+random+".com/");
return window.localStorage.getItem("REST");
}
return $resource(_url, {url:"url"}, {
login: { method:'POST', url: URL()},
})
}])
And this
// Generate random URL in the controller
.factory('Auth', ['$resource', 'Config', function($resource, Config) {
var URL = window.localStorage.getItem("REST");
return $resource(_url, {url:"url"}, {
login: { method:'POST', url: URL},
})
}])
But when I change the url ( I check this url in local storage and its change) the domain is the same anywhere unless that I reload the page, in this case works.
Thanks

You can do something like that:
Add a 2 new constant:
.constant('HOST_CDN', {
development: {
api: 'http://YOUR_LOCAL_DOMAIN',
},
production: {
api: 'http://YOUR_PRODUCTION_DOMAIN',
}
})
.constant('ENV', 'development')
Create new service:
var domain = null;
(function getDomains() {
domain = HOST_CDN[ENV];
if (!domain) {
throw 'Could not get domains';
}
domain.api = domain.api.concat('/')
.replace(/\/\/$/, '/');
})();
return {
api : domain.api
};

Related

server side pagination in Angular JS

I am trying to implement server side pagination in Angular JS .I have created my server response consisting of results and a variable called isMoreResults . When isMoreResults is true I can safely assume that it has more results to be displayed . Now how can I go about creating a pagination on angular Js side ,such that I can display PREVIOUS and NEXT . when user clicks on next I can call the server to fetch next response .Any leads on how can I implement and what is the correct format to implement pagination ? I have went through many sites and majoritily I could see client side validation .should I also switch to client side validation ?
You can do something like this.
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {
$scope.currentPage = 1;
$scope.limit= 10;
$scope.tracks = [];
getData();
function getData() {
$http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
.then(function(response) {
$scope.totalItems = response.data.artists.total
angular.copy(response.data.artists.items, $scope.tracks)
});
}
//get another portions of data on page changed
$scope.pageChanged = function() {
getData();
};
});
in html
<div ng-controller="PaginationDemoCtrl">
<h4>Sample Server Pagination</h4>
<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></uib-pagination>
</div>
Usually do this for pagination:
1 - Create an API that takes how many SKIP and how many TAKE .. somehting like:
http://www.test.com/api/Users?skip=0&take=10
Then:
2 - in Angular install this plugin: (maybe with bower or npm)
https://github.com/brantwills/Angular-Paging
3 - in your HTML something like:
<paging page="currentPage"
page-size="pageSize"
total="total"
paging-action="DoPaging(page, pageSize, total)">
</paging>
4 - In your Controller:
/**
* MainCtrl - controller
*/
"use strict";
angular
.module('demo')
.controller('UsersCtrl', [
"$scope",
"User",
"$state",
"$timeout",
function (
$scope,
User,
$state,
$timeout) {
var vm = this;
// Binded Functions
$scope.currentPage = 1;
$scope.pageSize = 10;
$scope.DoPaging = _doPaging;
// Page Load
init();
/////////////////////////////////
// PRIVATE FUNCTION
////////////////////////////////
//Page Load
function init() {
$scope.promUsers = User.GetUsers(0, 10).$promise.then(function (resp) {
vm.users = resp;
$scope.total = resp[0].total //<-- put in your Back End Entities a field where you store how many record you have on your DB (all)
}).catch(function (err) {
console.log(err);
});
}
function _doPaging(text, page, pageSize, total) {
var skip = pageSize * (page -1);
User.GetUsers(skip, pageSize).$promise.then(function(resp){
vm.users = resp;
$scope.total = resp[0].total
}).catch(function (err) {
console.log(err);
});
}
////////////////////////////////
}]);
5 - In your service:
"use strict";
angular
.module("demo")
.factory("User", [
"$resource",
"$q",
"enviroment",
"$timeout",
function (
$resource,
$q,
enviroment,
$timeout) {
// Private Filed
var _serviceBase = "api/User/";
// Private Method
//skip and take in query string
var resource = $resource(enviroment.apiUrl + _serviceBase, { skip: '#skip', take: '#take' }, {
query: { method: "GET", isArray: true },
create: { method: "POST", isArray: false },
update: { method: "PUT", isArray: false }
});
// Public Method
return {
GetUsers: function (skip, take) {
return resource.query({ skip: skip, take: take });
}
};
}]);

AngularJS module NgMockE2E's passThrough() method doesn't work

I have a sails, node-js application in angular-js and I decided to make some tests for it, especifycally in the backend part, for which I am using Jasmine and ngMockE2E tools, because I want to test it with some real server side data.
Here is a part of the code I want to test:
app.controller('IdentificationCtrl', function($scope, $rootScope, ... , ajax) {
_initController = function() {
$scope.loginData = {};
};
$scope.doLogin = function(form) {
if (form.$valid) {
ajax.sendApiRequest($scope.loginData, "POST", "session/login").then(
function(response) {
//$state.go('app.dashboard');
window.localStorage.setItem("sesion", JSON.stringify(response.data));
$rootScope.userTest = response.data;
},
(function(error) {
console.log("error")
})
);
}
};
_initController();
});
Here is my service.js file, in which I provide the ajax service:
angular.module('common.services', [])
.service('ajax', function($http, $rootScope) {
if (window.location.hostname == "localhost") {
var URL = "http://localhost:1349/";
} else {
var URL = "http://TheRealURL/";
}
this.sendApiRequest = function(data, type, method) {
$rootScope.$broadcast('loading:show')
if (method == "session/login" || method == "session/signup") {
var authorization = "";
} else {
var authorization = JSON.parse(window.localStorage["sesion"]).id;
}
data_ajax = {
url: URL + method,
method: type,
headers: {
'Content-Type': 'text/plain',
'authorization': authorization
}
}
if (type === "GET" || type != "delete") {
data_ajax.params = data;
} else {
data_ajax.data = data;
}
if (window.localStorage['admin-language']) {
data_ajax.headers['accept-language'] = window.localStorage['admin-language'];
} else {
data_ajax.headers['accept-language'] = window.navigator.language.toUpperCase();
}
//The test arrives here perfectly
return $http(data_ajax).success(function(data, status, headers, config) {
//But does not enter here
return data;
$rootScope.$broadcast('loading:hide')
}).error(function(data, status, headers, config) {
//Nor here
return data;
$rootScope.$broadcast('loading:hide')
});
//And finally achieves this point, but without making the http call
}
})
Here is the html where I load Jasmine, ngMocks and the test file:
...
<!-- Testing files -->
<link rel="stylesheet" type="text/css" href="lib/jasmine-core/jasmine.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
<script type="text/javascript" src="lib/angular-mocks/angular-mocks.js"></script>
<script src="js/TestBackend.js"></script>
...
And here is the above referenced testBackend.js file, in which I intend to make the tests:
describe('FirstCycleController', function() {
beforeEach(module('myApp'));
beforeEach(module('ngMockE2E'));
var $controller;
var $rootScope;
var $httpBackend;
beforeEach(inject(function(_$controller_, _$rootScope_, _$httpBackend_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
}));
describe('User login', function() {
it('verifys that a user is correctly logged.', inject(function() {
var $identificationScope = {};
var identificationController = $controller('IdentificationCtrl', { $scope: $identificationScope });
var form = {
$valid: true
}
$identificationScope.loginData = {
email: 'user#test.com',
password: 'usertest'
};
$rootScope.userTest = null;
//pass through everything
$httpBackend.whenGET(/^\w+.*/).passThrough();
$httpBackend.whenPOST(/^\w+.*/).passThrough();
//call the login function simulating a login
$identificationScope.doLogin({ $valid: true });
setTimeout(function() {
expect($rootScope.userTest).not.toBe(null);
}, 150);
}));
});
});
The problem is that when running the testBackend.js test file, it doesn't make any http call. It seems that passThrough() function isn't doing his job correctly.
I faced and corrected the issue of not having defined the passThrough() function, which was because I didn't load the ngMockE2E module(instead of ngMock). But this time Jasmine is working fine and the error is simply that the spec is false:
Error: Expected null not to be null.
Apologies if this issue is already resolved, I couldn't find the solution anywhere.
There is detailed discussion around this on angular github issue

Showing 'details' of specific object- pass JSON value from one page to another to query API

I want to pass a value from one element, to another html page.
Very simply- I want to click an object (within an ng-repeat), and be directly to a page with more detail about that object only.
Take a value (product_id) from the $http getUrl (a value not a directive in my html- can javascript still find it?). Pass this value so it can be accessed if "more info" is requested.
Using a value from take the current product_id, and use that number to fill a getURL to pull a json object for the following "detail" page.
Using ui-sref it opens a new page (not a new URL address, just a different HTML document)
In this new page it should have the product details
This is my my attempt:
.factory('cardsApi', ['$http', function ($http) {
var apiUrl = 'http://stashdapp-t51va1o0.cloudapp.net/api/item/';
function productId(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var getApiData = function () {
return $http.get(apiUrl + productId(1, 50000))
};
var postRecordLikes = function (product_id) {
return $http.post('http://test.com/analytic/' + product_id);
}
return {
getApiData: getApiData,
postRecordLikes: postRecordLikes
};
}])
.controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
function ($scope, TDCardDelegate, cardsApi, $http) {
console.log('CARDS CTRL');
$scope.cards = [];
$scope.onSwipeRight = function (product_id) {
console.log(product_id)
}
$scope.onSwipeLeft = function (product_id) {
console.log(product_id)
}
// <====== Rewrite with accounts preferences
for (var i = 0; i < 7; i++) {
cardsApi.getApiData()
.then(function (result) {
//console.log(result.data) //Shows log of API incoming
$scope.cards.unshift(result.data);
$scope.product_id = result.data.product_id;
})
.catch(function (err) {
$log.error(err);
});
}
// Rewrite with accounts preferences =====>
$scope.$watchCollection('cards', function (newVal, oldVal) {
if (newVal < oldVal) {
cardsApi.getApiData()
.then(function (result) {
// console.log(JSON.stringify(result.data)); Shows log of API results
$scope.cards.unshift(result.data);
// console.log($scope.cards);
})
//.catch(function (err) {
// console.log(err);
//});
}
});
$scope.cardSwiped = function (card) {
console.log(card);
postRecordLikes(card);
};
//$scope.cards = Array.prototype.slice.call(cardTypes, 0);
//Removes card from top of stack
$scope.cardDestroyed = function (index) {
$scope.cards.splice(index, 1);
};
$scope.addCard = function () {
var newCard = $scope.cards[$scope.cards.length];
//newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
};
var postRecordLikes = function (product_id) {
cardsApi.postRecordLikes(product_id)
.then(function successCallback(product_id) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
])
.controller('ProductsCtrl', ['$scope', 'TDCardDelegate', 'productApi', '$http',
function ($scope, TDCardDelegate, cardsApi, $http) {
console.log('PRODUCTS CTRL');
}
])
.factory('productApi', ['$http',
function($http) {
var apiUrl = 'http://stashdapp-t51va1o0.cloudapp.net/api/item/' + product_id;
var getApiData = function() {
return $http.get(apiUrl)
};
return {
getApiData: getApiData
};
}]
)
My routing.js (trying to configure it to direct to any URL containing integers/numbers). This always redirects back to login...:
c
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'app/core/login/login.html'
}
},
controller: function ($ionicHistory, $scope) {
console.log('Clearing history!');
$ionicHistory.nextViewOptions({
historyRoot: true,
disableBack: true
});
}
})
.state('product', {
url: '/product',
when:('/product/?:product_id'),
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
})
a query string adds data to the end of a url, after a question mark. you then navigate to that url:
var myvar=234;
location="http://www.example.com/?"+myvar;
and in the second page get the variable by accessing the query string and stripping away the question mark:
var newvar=location.search.replace("?", ""); // 234
you would then use the 234 to make the specific ajax call, get the JSON, etc, etc

Bad request when using sharepoint REST Service in angular js using ng-resource

I am using the ng-resource module to call rest services in my angular js app. I based my angular js code in another one I used using the cross domain library for a sharepoint hosted app.
The old code was like this:
Now in my new angular js code looks like this:
My ProductResource.js
I had to use a substring because the app its a SPA and the routing adds a # at the end, so with that it also had a bad request, but I believe its better to remove it.
(function () {
"use strict";
angular
.module("common.services")
.factory("productResource",
["$resource",
productResource]);
function productResource($resource) {
var listName = "Products";
var n = SPAppWebUrl.indexOf("#");
var resUrl = SPAppWebUrl.substring(0, n);
// the url to use for the REST call.
var url = resUrl + "/_api/SP.AppContextSite(#target)" +
// this is the location of the item in the parent web. This is the line
// you would need to change to add filters, query the site etc
// "/web/lists/getbytitle('" + listName + "')/items?" +
"/web/lists/getbytitle('" + listName + "')/items?$select=Id,productName,productCode,releaseDate,description,cost,price,category,tags,imageUrl" +
"&#target='" + SPHostUrl + "'";
//return $resource(url);
//return $resource("/api/products/:productId")
return $resource(url, {}, {
query: {
method: 'GET',
headers: { "Accept": "application/json; odata=verbose" }
},
create: { method: 'POST' }
});
}
}());
ProductListCtrl, which uses the query method
(function () {
"use strict";
angular
.module("productManagement")
.controller("ProductListCtrl",
["productResource",
ProductListCtrl]);
function ProductListCtrl(productResource) {
var vm = this;
productResource.query(function (data) {
vm.products = data;
});
vm.showImage = false;
vm.toggleImage = function () {
vm.showImage = !vm.showImage;
}
}
}());
and App.js which might not be relevant
var SPHostUrl;
var SPAppWebUrl;
var ready = false;
$(document).ready(function () {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var param = params[i].split("=");
switch (param[0]) {
case "SPAppWebUrl":
SPAppWebUrl = decodeURIComponent(param[1]);
break;
case "SPHostUrl":
SPHostUrl = decodeURIComponent(param[1]);
break;
}
}
});
(function () {
"use strict";
var app = angular.module("productManagement",
["common.services",
"ui.router",
"ui.mask",
"ui.bootstrap"]);
app.config(["$stateProvider",
"$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "../Scripts/app/welcomeView.html"
})
// Products
.state("productList", {
url: "/products",
templateUrl: "../Scripts/app/products/productListView.html",
controller: "ProductListCtrl as vm"
})
.state("productEdit", {
abstract: true,
url: "/products/edit/:productId",
templateUrl: "../Scripts/app/products/productEditView.html",
controller: "ProductEditCtrl as vm",
resolve: {
productResource: "productResource",
product: function (productResource, $stateParams) {
var productId = $stateParams.productId;
return productResource.get({ productId: productId }).$promise;
}
}
})
.state("productEdit.info", {
url: "/info",
templateUrl: "../Scripts/app/products/productEditInfoView.html"
})
.state("productEdit.price", {
url: "/price",
templateUrl: "../Scripts/app/products/productEditPriceView.html"
})
.state("productEdit.tags", {
url: "/tags",
templateUrl: "../Scripts/app/products/productEditTagsView.html"
})
.state("productDetail", {
url: "/products/:productId",
templateUrl: "../Scripts/app/products/productDetailView.html",
controller: "ProductDetailCtrl as vm",
resolve: {
productResource: "productResource",
product: function (productResource, $stateParams) {
var productId = $stateParams.productId;
return productResource.get({ productId: productId }).$promise;
}
}
})
}]
);
}());
The error is bad request, but I cant find nothing wrong with the REST url.
"https://levalencia-00346f286827fc.sharepoint.com/sites/dev/CoreAngularJSCRUDSPList/_api/SP.AppContextSite(#target)/web/lists/getbytitle('Products')/items?$select=Id,productName,productCode,releaseDate,description,cost,price,category,tags,imageUrl&#target='https://levalencia.sharepoint.com/sites/dev'"
See my console error here:
http://screencast.com/t/uxNh781s
that is probably because you are sending problematic values on your request (such a https:// inside your url). try to modify your config file with like the following:
<configuration>
<system.web>
<pages validateRequest="false"/>

How to change resource's headers in angularjs

I'm trying to set the headers of a resource (code bellow).
It happens that, when I instantiate my resource ($scope.user = new rsrUser;) angularjs fetches the cookies that aren't yet defined (an "undefined" error is fired from inside "getHMAC()"). The cookies will only be defined when "$scope.login()" is fired (it happens when the user clicks a button in the interface).
Is there a better way of doing this?
controllers.js
angularjsWebInterfaceControllers.controller('loginCtrl', ['$scope', 'rsrUser',
function($scope, rsrUser){
$cookieStore.put("username","therebedragons");
$cookieStore.put("password","therebedragons");
$scope.user = new rsrUser;
$scope.user.username = ""; //bound to input field in interface
$scope.user.password = ""; //bound to input field in interface
$scope.login = function() {
$cookieStore.put("username", $scope.user.username);
$cookieStore.put("password", $scope.user.password);
$cookieStore.put("state", "loggedOUT");
$scope.user.$logIn(
function(){
$cookieStore.put("state", "loggedIN");
}, function() {
$cookieStore.put("username","therebedragons");
$cookieStore.put("password","therebedragons");
$cookieStore.put("state", "loggedOUT");
}
)
};
}]);
services.js
angularjsWebInterfaceServices.service('rsrUser', [ '$resource', '$cookieStore',
function($resource, $cookieStore){
var req = "/login"
var timestamp = getMicrotime(true).toString();
var username = $cookieStore.get("username");
var key = $cookieStore.get("password");
return $resource(baseURL + req, {}, {
logIn: {method:'POST',
isArray:false,
headers:{
'X-MICROTIME': timestamp,
'X-USERNAME': username,
'X-HASH': getHMAC(username,timestamp,req,key)
}
}
});
}]);
EDIT: Actually, the cookies are defiend as soon as the controller is instantiated;
The value for a header can be a function that returns a string (see arguments here: http://docs.angularjs.org/api/ng/service/$http#usage). That way the cookie isn't accessed in your resource until the logIn method is called.
return $resource(baseURL + req, {}, {
logIn: {method:'POST',
isArray:false,
headers: {
'X-MICROTIME': timestamp,
'X-USERNAME': function() {
return $cookieStore.get("username");
},
'X-HASH': function() {
var username = $cookieStore.get("username");
return getHMAC(username,timestamp,req,key)
}
}
}
});

Categories

Resources