I've been developing a chrome extension and am using AngularJS. I am using angular to create a list that updates every time a user puts in new information and clicks the link.
<!doctype html>
<html ng-app="Ladybug">
<head>
<script type="text/javascript">
var application = angular.module('Ladybug', []);
function URLController($scope){
$scope.newSite=""
$scope.sites=['www.facebook.com'];
$scope.addSite=function(){
$scope.sites.push($scope.newSite);
}
}
</script>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"</script>
<div ng-controller="URLController">
Enter A URL : <input type="text" ng-model="newSite">
<button ng-click="addSite()">Add</button>
<hr/>
List of Blacklisted Sites :
<ul><li ng-repeat="site in sites">{{site}}</li></ul>
</div>
</body>
</html>
When I run the code online on http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default the code works perfectly fine but when I upload the code to the chrome extension developer and run the extension it does not display the list or update. The extension loads just fine and the buttons work it just doesn't update. Does anyone know why it works online but not uploaded? Any help will be greatly appreciated
Related
I'm currently trying to get the preview functionality from the Eclipse Web Page Editor with AngularJS up and running. Unfortunately nothing happens (see attached image) when I try to run the provided code.
It seems to run here.
The code runs in every web browser - so the question is why is it not working in the "Preview Tab" of the Eclipse Web Page Editor? Any ideas?
My Setup:
Eclipse Mars.1 Release (4.5.1) for Web Developers
AngularJS Eclipse 1.1
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
enter image description here
I am facing a peculiar issue while incorporating angularjs as front end for spring boot mvc project. I cant figure out the root cause of why this is happening. My angularjs template and angular controller codes are listed below.As long as I have angularjs script/controller within 'script' tags of the template file the code works fine and I get the desired result.However as soon as I create a seperate javascript file for the controller in resource/static/app folder of Spring Boot project directory and import using src(as shown below) then the angularjs stops working. Would be great if someone can help me understand why is this happening. Is there some other configuration that needs to be done for importing javascript file in Spring boot templates?
1. spring boot html template file
<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<meta charset="ISO-8859-1"></meta>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Spring MVC+Angular</title>
<!-- <script type="text/javascript" src="../static/app/controller.js"></script> -->
<script type="text/javascript" src="../static/app/controller.js"></script>
<!-- <script type="text/javascript">
var app = angular.module('myapp', []);
app.controller("mycontroller" , function($scope){
$scope.name = "myapp controller456...." ;
});
</script>-->
</head>
<body>
<div>
<div data-ng-controller="mycontroller" >
<p>Input something in the input box:</p>
<p>Name : <input type="text" data-ng-model="name" placeholder="Enter name here123456..."></input></p>
<h1>Hello {{name}}</h1>
</div>
</div>
</body>
</html>
2. angularjs controller
// please note that the same controller when included within script tag of template file works however if included as separate javascript file does not work//
var app = angular.module('myapp', []);
app.controller("mycontroller" , function($scope){
$scope.name = "myapp controller456...." ;
});
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'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.