I am learning angularjs and following tutorial from - here
Here is my index.jsp -
<!doctype html>
<html lang="en" ng-app="phoneCatApp">
<head>
<title>Angular Example</title>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="app/js/controllers.js"></script>
</head>
<body ng-controller="phoneListCtrl">
Search : -
<input ng-model="query"/> Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="-age">Oldest</option>
</select>
<p>Total number of phones: {{phones.length}}</p>
<ul>
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"><span>{{phone.name}}</span>
<p>{{phone.snippet}}</p></li>
</ul>
</body>
</html>
this version of controller.js works -
var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('phoneListCtrlOld', function($scope) {
$scope.phones = [ {
'name' : 'Nexus S',
'snippet' : 'Fast just got faster with Nexus S.',
'age' : 1
}, {
'name' : 'Motorola XOOM™ with Wi-Fi',
'snippet' : 'The Next, Next Generation tablet.',
'age' : 2
}, {
'name' : 'MOTOROLA XOOM™',
'snippet' : 'The Next, Next Generation tablet.',
'age' : 3
} ];
$scope.orderProp = 'age';
});
but in the next step i tried fetching this json data with ajax call so controller look like this -
var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('phoneListCtrl', function($scope, $http) {
$http.get('app/js/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
But this gives me following error -
TypeError: dbg is undefined. debuggerLib.js (line 530)
I can see in firebug the ajax call is happening with code 304 Not Modified. and i can see data in response. but response content type is not json.
Please look into it and say what is the problem? Am i missing any js file to include or something else.
I have had this same error, and after some head scratching found a cause. I can't be sure whether this is your same cause.
Restarting Firefox, rebooting the PC, removing Firebug, reinstalling, optimizing, running registry clean, etc. -- nothing helped. I got error in debuggerLib.js line 556, dbg being undefined.
However, it turns out that I have installed Firebug back in the days, and it created a directory in my Roaming profile:
C:\Users\Leonardo\AppData\Roaming\Mozilla\Firefox\Profiles\Leonardo.Serni\firebug
In that directory there is a lot of JSON files, but none of them dated today, which is when I removed and reinstalled Firebug. So I wondered, "What if the new Firebug is loading something obsolete from this directory?".
I closed Firefox, renamed the directory from "firebug" to "bugfire", reopened Firefox.
Firebug is running perfectly and the error has disappeared. I had done the same thing without renaming the directory and the error did not disappear, so I'm confident that my hypothesis was correct.
The directory has been re-created, but there are now only two files in there - "annotations.json" and "breakpoints.json", both 0 bytes in size. Possibly some day I'll try adding the files from the old directory to see when the error comes back.
Update (thanks to DevNull's comment)
Possibly it is not necessary to nuke the whole directory. Verify that the annotations.json file is zero length. If it is not, just rename it to annotations.old while Firefox is not running.
I'm beginning to suspect that the dbg is actually debugging Firebug itself, and we do not have it defined because we aren't Firebug developers. It has nothing to do with the Firebug debugger that debugs our scripts.
You're probably using FireFox with firebug activated.
Turn off firebug and your issue will go away.
I had the same problem, other browsers had no issue and the console showed the error coming from debuggerLib.js (line 556). Deactivating it removed the error and allowed my application to run as expected.
use this code html head tag.
<base href="/">
....
Try this,
First initialize JSON array value is an empty.so initialize
$scope.phones = '';
Explanation of #LSerni seems correct.
For Linux system simply remove and reinstall your Firebug plugin. The system auto deletes all related files/folders and recreates it.
This worked for me.
The error you are having is with your JSON file. It should look like this:
[{
"name" : "Nexus S",
"snippet" : "Fast just got faster with Nexus S.",
"age" : 1
}, {
"name" : "Motorola XOOM™ with Wi-Fi",
"snippet" : "The Next, Next Generation tablet.",
"age" : 2
}, {
"name" : "MOTOROLA XOOM™",
"snippet" : "The Next, Next Generation tablet.",
"age" : 3
}]
Remember the square brackets.
Use .then rather than .success. This is an improved version of .success handling all the callbacks and calls more efficiently. It brings back the entire promise and you resolve it by referencing the .data part i.e. response.data
$http.get('app/js/phones.json').then(function(response) {
$scope.phones = response.data;
});
DEMO - Using .success
DEMO - Using .then promise
You are using the number so please use number or parse value to number example below.
<code>
var myApp = angular.module('MyApp',[]);
myApp.controller("myController",function($scope){
$scope.width=50;
$scope.height=50;
});
</code>
for me the problem was that I had forgotten to define in the controller the library
app.controller("MyCtrl", function($scope, $http) { //<- here $timeout was missing
$http.get(someUrl)
.then(function(myResponse) {
$scope.myData = myResponse.data;
$timeout(function() { //<- here $timeout was called without being defined
enableWatchers = true;
});
});
});
It works after I have changed the first line of my code to:
app.controller("MyCtrl", function($scope, $http, $timeout) { //<- here I put the $timeout
Related
After months of working without any trouble, now when trying to make login, this error appears. The code shown is simplified, when it arrives at "Parse.User.logIn" is when the error happens. There are some similar questions here, but all of them are related to CORS, and I don´t know how or where to make something like the line below:
Access-Control-Expose-Headers: x-parse-job-status-id
CODE:
$scope.signin = function () {
var email = $scope.login.email;
var pass = $scope.login.pass;
Parse.User.logIn(email, pass, {
success: function (user) {
Stuff after successful login
}
});
},
error: function (user, error) {
stuff after unsuccessful login
}
});
}
}
Any help would be appreciated.
Fix can be found here. We tried it and worked like a charm 👍
https://github.com/parse-community/Parse-SDK-JS/issues/622
Edit:
Solution (can be found in link)
"I believe you're using the unpkg version:
https://unpkg.com/parse/dist/parse.js, and the minified production version is at https://unpkg.com/parse/dist/parse.min.js.
Which is automatically pointing to the latest release, you should use:
https://unpkg.com/parse#1.11.1/dist/parse.js
As you are now pointing to the SDK v2.0 which contains that issue."
I have a separate language json file for each partial/controller. To avoid loading all the json files at once, I have added the addPart statement in the controller instead of the module config:
$translatePartialLoader.addPart('editName');
When I browse to the partial, I see that the json file is requested from the server only when needed. But when I keep refreshing the partial by clicking the function key F5, at random times, the json file is not requested from the server and the text displayed on the view is not translated. Not sure what I can do to fix this. Any help is greatly appreciated. Here is the code:
angular.module('pp')
.controller('informationList', [
'$scope', '$rootScope', '$location', '$translatePartialLoader', '$translate',
function($scope, $rootScope, $location, $translatePartialLoader, $translate) {
$translatePartialLoader.addPart('informationList');
$translate.refresh();
}
]);
Your issue sounds similar to mine.
This (called from app config) works:
angular.module('myApp').config(function ($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
'urlTemplate': '{part}-{lang}.json'
});
$translateProvider.preferredLanguage('EN');
$translatePartialLoaderProvider.addPart('headline');
$translatePartialLoaderProvider.addPart('languages');
});
This (called from controller) does not:
angular.module('myApp').controller('Ctrl', ['$scope', '$translate', '$translatePartialLoader', function ($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('headline');
$translatePartialLoader.addPart('languages');
$translate.refresh();
}]);
Here is a plunker to demonstrate the problem.
http://plnkr.co/edit/sZC2XST8BMZcMCYbgtxt?p=preview
Could you just add a
$translateProvider.use('EN');
to the config - section just right below the "preferredLanguage('EN');" - line?
This should solve your problem.
It is in in fact currently needed to define that additional line - even though it might sound a bit like "duplication" :-).
Following is the content of my JSON File -
{
"tags": [
"Red",
"Green",
"Blue",
"Yellow"
]
}
I checked this with jsonlint but still I am getting the following error in firefox.
Timestamp: Wednesday 18 June 2014 10:39:41 IST Error: not well-formed
Source File:
file:///home/trialcode/trialcode/Projects/ang/18-06-2014/ang/content.json
Line: 1, Column: 1 Source Code: {
I am not sure what I am doing wrong if any.
FYI -
OS - Linux Ubuntu 12.04
Firefox - 24.0
EDIT
I am using the content of content.json file in angular controller via $http.get method.
I explored more about this kind of error and found it is related with the Content-Type setting.
Following is the full code -
<!doctype html>
<html lang="en" ng-app="app">
<head>
<title>JSON Read In Angularjs</title>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http){
$scope.data = {};
$http.get('content.json').success(function(data) {
$scope.data = data;
});
});
</script>
</head>
<body ng-controller="myCtrl">
<ul>
<li ng-repeat="em in data.tags">{{em}}</li>
</ul>
</body>
</html>
How do I set the content type if that is a problem. I searched HERE but unable to fix it. Help me Please if any.
After few hours of searching I came across that -
Chrome and other modern browsers have implemented security
restrictions for Cross Origin Requests, which means that you cannot
load anything through file:/// , you need to use http:// protocol at
all times, even locally -due Same Origin policies.
Source -
Cross Origin Script Stackoverflow Answer
Simple Solution For Local Cross Origin Requests
I am new to angular and trying to integrate it within my application. I am attempting to use a simple ng-repeat (which works perfectly in an example project i setup). However, in the current project, i am using the Swig templating language, which fetches data from a .JSON file using {{ }} e.g:
person.html file:
<div> {{ myFirstName }} </div>
<div> {{ mySurName }} </div>
person.json file:
{
"myFirstName" : "Joe",
"mySurName" : "Bloggs",
}
I think the problem i am facing, is that Swig uses {{ }} to get data from .JSON files, and Angular uses {{ }} too.
Here is my simple ng-repeat:
<ul ng-controller="MyCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
</ul>
Here is my simple controller:
require(['app'], function(app) {
'use strict';
app.controller("MyCtrl", function($scope) {
$scope.countries = [
{name: 'France', population: 63.1},
{name: 'United Kingdom', population: 61.8}
];
});
});
When opening my HTML page, all that is displayed is:
has population of
has population of
Any ideas of how i can get around this?
Thanks
UPDATE
I would like angular to retrieve the data from the .JSON file
UPDATE Folloiw David Beech's recommendation
Application Tree:
- application
- resources
- CSS
- img
- JS
- data
- countries-data.json
- pages
- countries.html
In the example solution below my $http.get was
$scope.countries = [];
$http.get('/resources/data/countries-data.json', function(data){
Error shown in Firebug: "NetworkError: 404 Not Found - http: // localhost:8000/resources/data/countries-data.json"
To answer part 2 of your question and get angular to retrieve the json file use the $http service. http://docs.angularjs.org/api/ng/service/$http
app.controller("MyCtrl", function($scope, $http) {
$scope.countries = [];
$http.get('/path/to/data.json', function(data){
$scope.countries = data;
}, function(error) {
//handle error here
});
});
And to answer part 1:
I'm not familiar with swig and after a quick google I notice this is available server-side on node or client side and you don't specify how you are using it.
If you are using it server-side I would recommend you check it's documentation about escaping certain bindings to ensure pages are being delivered with the bindings in the html (you can check this by 'view page source' option in chrome).
UPDATE: http://paularmstrong.github.io/swig/docs/api/#SwigOpts
I notice here you can set the varControls binding to something other then '{{' and '}}'.
If you are using it client side then I would ask why you need it at all.. angular works best when you give it as close to complete and exclusive control over the DOM as possible. I'm sure anything that is possible in most templating engines is possible in angular with a little more learning and training and there are plenty of resources for that if you just do a little googling.
Hope this helps.
You can change the start and end interpolation tags using interpolateProvider service.
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}
);
http://docs.angularjs.org/api/ng.$interpolateProvider
I was trying to understand how to use the chrome.storage.api.
I have included the following in my manifest.json:
"permissions": [
"activeTab","storage"
],
Than, I opened a new tab with the devtools and switched the <page context> to the one of my chrome-extension. Than I typed:
chrome.storage.sync.set({"foo":"bar"},function(){ console.log("saved ok"); } );
and got:
undefined
saved ok
Than I tried getting this stored value:
chrome.storage.sync.get("foo",function(data){ console.log(data); } );
but this got me:
undefined
Object {}
Than I did the same, but instead of sync I used local and this worked as expected:
chrome.storage.local.set({"foo":"bar"},function(){ console.log("saved ok"); } );
..and the retrieval:
chrome.storage.local.get("foo",function(data){ console.log(data); } );
Which got me: Object {foo: "bar"} as it should.
Is this because I am not signed in to my account on chrome? But in that case, isn't chrome.storage.sync designed to fallback into storing the data locally?
EDIT
Strangely, when i type this straight on console it seems to be working, but this code doesn't run from background.js code inside a click listener:
var dataCache = {};
function addStarredPost(post)
{
var id = getPostId(post);
var timeStamp = new Date().getTime();
var user = getUserName();
dataCache[id] = {"id":id,"post":post,"time":timeStamp,"user":user};
chrome.storage.sync.set(dataCache,function(){ console.log("Starred!");});
}
After this is ran, chrome.storage.sync.get(null,function(data){ console.log(data); }); returns an empty object as if the data wasn't stored. :/
This code seems to be working perfect with chrome.storage.local instead.
chrome.runtime.lastErros returns undefined
The max size for chrome local storage is 5,242,880 bytes.
To extend the storage you can add on the manifest.json :
"permissions": [
"unlimitedStorage"
]
The max size for chrome sync storage is:
102,400 bytes total
8,192 bytes per item
512 items max
1,800 write operations per hour
120 operations per minutes
(source)
Whoops!
The problem was I was trying to sync data that exceeded in size. (4096 Bytes per item)
I wasn't getting chrome.runtime.lastError because I was mistakenly putting it inside the get function scope, instead of the set function which was producing the error. Hence, I'm posting this answer so it might help others who share the same confusion.
You should check chrome.runtime.lastError inside each api call, like so:
chrome.storage.local.set(objectToStore, function(data)
{
if(chrome.runtime.lastError)
{
/* error */
console.log(chrome.runtime.lastError.message);
return;
}
//all good. do your thing..
}
This ran OK with chrome.storage.local because according to the docs you only have this limitation with sync.
printing chrome.runtime.lastError gave me: Object {message: "QUOTA_BYTES_PER_ITEM quota exceeded"}