I've set up a small AngularJS/Firebase (AngularFire) page that updates the DOM with a textbox (the classic example). The code works fine in Chrome and Firefox, but not IE10. I've tried the recommended fixes for IE7 and lower but they haven't worked.
HTML:
<!DOCTYPE html>
<html ng-app="myModule">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="https:/cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body ng-controller="myApp">
<div>
<input type="text" ng-model="name" /> Hi {{name}}
</div>
</body>
main.js
angular.module('myModule', ['firebase']).controller('myApp', ['$scope', 'angularFire',
function($scope, angularFire) {
var url = new Firebase('https://myaccount.firebaseio.com/example');
angularFire(url, $scope, 'name', '');
}
]);
What could be causing the problem?
Thanks.
I assume and hope you've solved this already, but anyway: you have one slash ('/') missing from the URL pointing to firebase.js which makes IE to trip over. Interestingly, other browsers seem to be able to load the script.
You are also missing the starting <head> element.
Related
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
I am working on a Firefox add-on that uses AngularJS.
The issue is with 'ng-src'. It does not load the referenced image.
When I switch to 'src' the image loads fine.
Example.html and 'icon-32.png' are within same folder.
Appreciate your help in making sense of this issue.
Below are the code snippets.
Example.html
<html ng-app="MyAddon" ng-csp>
<head>
</head>
<body ng-controller="MainCtrl" dir="{{dirr}}">
<div border="0">
<img ng-src="{{logo}}" width="32" align="center">
<input id="textbox" type="text"> </input>
<button id="textboxbutton" type="button"> {{ButtonText}}</button>
</div>
<script src="lib/angular.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
app.js:
function MainController($scope) {
$scope.ButtonText= 'Hit me!';
$scope.dirr = 'rtl';
$scope.logo= 'icon-32.png';
};
var MyModule = angular.module('MyAddon', [])
.controller('MainCtrl', MainController)
It is because angular keeps adding unsafe: to your image url. I think this is the solution, please try: Angular changes urls to "unsafe:" in extension page
and whitelist the resource:// urls. without unsafe: it works.
I saw this from using DOM Inspector:
I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
When I try to run page as described in https://www.firebase.com/docs/angular/
<html ng-app="sampleApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleController">
<input type="text" ng-model="text"/>
<h1>You said: {{text}}</h1>
</body>
</html>
and app.js:
angular.module("sampleApp", ["firebase"])
.factory("sampleService", ["$firebase", function($firebase) {
var ref = new Firebase("https://sizzling-fire-8112.firebaseio.com/");
return $firebase(ref);
}])
.controller("SampleController", ["$scope", "sampleService",
function($scope, service) {
service.$bind($scope, "text");
}
]);
There is: You said: {{text}} on the web screen.
What I did wron?
Thanks ;)
I suppose you are opening this page not via webserver, but directly from filesystem.
If so, never do that way. There can be various restrictions with AJAX, canvas, etc.
In your example you're trying to load outer scripts with protocol relative URLs.
In case of opening page from filesystem, URLs are being transformed into file://... format.
To solve this problem you should use a webserver. If you can't use it for some reasons, add http: to the beginning of the outer URLs, so it will be:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js
instead of
//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js