Update: When I posted this question, I had been executing the code directly from my desktop. I just put my cookie sample into some angular code running in my localhost server, and I can now successfully create and read cookies from all browsers: Chrome, IE, and Firefox. Are there rules that Chrome follows in regards to creating/reading cookies when code is not being served up from a server?
Original question:
I've created a very simple angularjs application, trying to use make use of angular cookies, and although it works in Firefox and IE, it doesn't seem to work in Chrome.
Here is my html code:
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-cookies.js"></script>
<script src="js/cookieApp.js"></script>
</head>
<body ng-controller="mainCtrl">
</body>
</html>
Here is my angular code:
(function () {
angular.module('myApp', ['ngCookies'])
.controller('mainCtrl', ['$cookies', function($cookies) {
$cookies.put('myFavorite', "cheese");
var favoriteCookie = $cookies.get('myFavorite');
console.log("myFavorite = " + favoriteCookie);
}]);
})();
When I run this code from Firefox and IE, I can see in the console log:
myFavorite = cheese
However, when I run this in Chrome, I see this in the console log:
myFavorite = undefined
The version of Chrome that I'm using is "Version 65.0.3325.181 (Official Build) (64-bit)".
Am I doing something wrong here or is there a setting in Chrome that needs to be adjusted to allow cookies?
Related
This has been frustrating me a bit. I have a restful services giving JSON data running on the link:
http://localhost:51133/API/SalesSystem/
So its running locally on my computer. I can get the data from this service with no problem using my WPF based interface.
Another service I am testing with is this one:
http://rest-service.guides.spring.io/greeting
But from my own service something seems to go wrong somehow and I cannot figure out what goes wrong. I have even tried just taking the full response and printing it. With the second service, I get a long list of data regarding the response, but with my own I still get nothing. As if the function was not used at all.
This is my Angular code:
angular.module('demo', [])
.controller('Hello', function ($scope, $http) {
$http.get('http://localhost:51133/api/salessystem/').
//http://rest-service.guides.spring.io/greeting
//http://localhost:51133/API/SalesSystem/
then(function (response) {
$scope.hello = 'hello';
$scope.district = response;
});
});
and this is my html code:
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="Scripts/hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<li>Id: <button>{{hello}}</button></li>
<li>Area: {{district}}</li>
<ul ng-repeat="obj in hello">
<li>Area: {{obj.area}}</li>
</ul>
<p>The ID is {{hello.Id}}</p>
<p>The content is {{hello.Area}}</p>
</div>
</body>
</html>
Can anyone see the problem? The spring rest service shows all kinds of data about the response and it also shows the button with "hello" inside it. But when I use my own service link it seems there is no $scope returned at all.
Oh, and this is the json returned when I just visit the link directly in the browser: (its an array of 3 districts)
[{"Id":1,"Area":"North Denmark","PrimarySalespersonID":1,"PrimarySalesperson":{"Id":1,"Name":"Tom B. Erichsen"},"SecondarySalespersons":null,"Stores":null},{"Id":2,"Area":"Southern Denmark","PrimarySalespersonID":2,"PrimarySalesperson":{"Id":2,"Name":"Eric B. Thomsen"},"SecondarySalespersons":null,"Stores":null},{"Id":3,"Area":"Eastern Denmark","PrimarySalespersonID":3,"PrimarySalesperson":{"Id":3,"Name":"Ben Anderson"},"SecondarySalespersons":null,"Stores":null}]
Simple AngularJS script with user:passw and server.ip
<!DOCTYPE html>
<html >
<script src= "angularjs/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<p>{{ names }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http', function($scope,$http) {
$http.get('http://user:passwd#server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010')
.success(function (data) {
$scope.names = data.rows;
});
}]);
</script>
</body>
</html>
If I use url & put in address bar in my browser, everything works fine
http://user:passwd#server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010
I mean I get json data.
When I use previous script I get
Remote Address:server.ip:5984
Request URL:http://server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010
Request Method:GET
Status Code:401 Unauthorized
How can I get json data from CouchDB with authorization header in AngularJS?
CouchDB & AngularJS are on the same server!
I read all 111 q/a (AngularJS CouchDB) from stackoverflow and I didn't find right answer.
I have enable CORS!
You have to send the username/password pair in an Authorization header. (as #pankajparkar has answered correctly before)
The reason why it simply works in the browser address bar is that the browser does this step automatically for you.
With 1.4 version of AngularJS, is it possible to create persistent cookies with $cookies?
I want data to be stored once I login, for 7 days say. In version 1.3.X, it is not possible to set Expiration date even. But with 1.4, they have deprecated $cookieStore and set an option in $cookies for expiration date.
I want to know whether this one creates cookies for desired longer periods rather than I close the browser and everything is gone.
You can set the expires property on the $cookiesProvider to change the default behaviour of the $cookies service. $cookiesProvider is available with version 1.4. For more info, see here.
The code below do what you want. When you are writing the cookie you can tell the expiration date. You can close the browser and the cookie will remain active.
Setting expiry dates PREVENT it from being deleted when the browser is closed.
setting persistent cookies with javascript
<!DOCTYPE html>
<html ng-app="cookiesExample">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular-cookies.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<script>
angular.module('cookiesExample', ['ngCookies'])
.controller('MainCtrl', ['$cookies', '$scope', function($cookies, $scope) {
// Retrieving a cookie
var favoriteCookie = $cookies.get('myFavorite');
$scope.name = (favoriteCookie) ? 'welcome back' : 'first time';
// Setting a cookie
var now = new Date();
now.setDate(now.getDate() + 7);
$cookies.put('myFavorite', 'oatmeal', {
expires: now
});
}]);
</script>
</body>
</html>
I've an app that retrieve server data using ajax. I've tested in localhost, the loader work fine, but when I install my extension and click on the browser action popup, the loader won't show. The little popup delayed for 2 second and shows the result.
popup.html
<div class="cssLoader" ng-show="loader">Fetching...</div>
js
app.controller('MainControl', function($scope, $http){
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET",
}).success(function(data) {
$scope.data = data;
$scope.loader = false;
});
});
Without seeing more of your code it is difficult to know for sure. Nonetheless, my suspicion (based upon the fact that your code works outside of the Chrome extension environment but not inside that environment) is that since you're operating in a Chrome Extension environment, you'll need to include the ng-csp directive (see Chrome documentation or Angular documentation).
I developed an Angular app inside a chrome extension and I needed to use ng-csp in order for Angular to load and fully function properly.
Essentially, Chrome extensions (and even more apps) place a number of restrictive security permissions on the browser environment and ng-csp tells Angular to operate in a way that is more consistent with a strict CSP.
I have included an example below that shows loading the entire Angular application properly:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp>
<head>
<meta charset="utf-8">
<title>My Extension</title>
<link href="css/index.css" rel="stylesheet">
<!-- Include in the next line your Angular library code -->
<script type="text/javascript" src="js/angular-lib.js"></script>
<!-- Include in the next line your custom Angular code such as the $http to load the loader -->
<script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
<!-- Place your HTML code for the 'Fetching' anywhere here in the body -->
</body>
</html>
According to the docs, CSP "is necessary when developing things like Google Chrome Extensions" (more info can be found on the linked page).
Furthermore, besides defining ng-csp on your root element, there is on more crucial point (which affects ngShow/ngHide):
CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.
I found this to be necessary only if the angular.js script is defined inside the app's context.
In any case, here is the source code of minimal demo extension that seems to work fine for me:
Structure:
extension-root-dir/
|_____manifest.json
|_____popup.html
|_____popup.js
|_____angular.js
|_____angular-csp.css
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"browser_action": {
"default_title": "Test Extension",
//"default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
//},
"default_popup": "popup.html"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Extension</title>
<link rel="stylesheet" href="angular-csp.css" />
</head>
<body ng-csp ng-app="myApp" ng-controller="mainCtrl">
<div ng-show="loader">Fetching...</div>
<div ng-hide="loader">{{status}}</div>
<script src="angular.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js:
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($http, $scope) {
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET"
}).finally(function () {
$scope.loader = false;
}).then(function (response) {
$scope.data = response.data;
$scope.status = 'Success !';
}, function (response) {
$scope.status = 'ERROR !';
});
});
(BTW, I am using AngularJS v1.2.16.)
I have looked at a lot of examples related to setting up the app, and everything I'm doing seems correct but I'm still getting the error above. Here's my setup.
_Layout.cshtml
<!DOCTYPE html>
<html data-ng-app="homePricesApp">
<head>
<script src="libs/angular.1.0.8.min.js"></script>
<script src="controllers.js"></script>
<title></title>
</head>
<body >
<div data-ng-controller="PricesController"></div>
</body>
</html>
controllers.js
var app = angular.module("homePricesApp", []);
app.controller('PricesController', ['$scope', function ($scope) {
$scope.items = [];
} ]);
So what I'm doing is creating a new homePricesApp module, and when the page is loaded, because I have data-ng-app="homePricesApp", it initializes the homePricesApp module. I then create the controller. But when the page loads I get the error:
"Argument 'PricesController' is not a function, got undefined".
Any ideas would be greatly welcome.
UPDATE
After much reading I came across the idea of manually bootstrapping the app using the code below, which worked, as in it now hits my controller, but the error is being thrown by angular.js before it hits the controller code.
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('pricesResults'), ['homePricesApp']);
});
Your code works for me.
Your angular is loaded correctly? try this
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js