I was trying to write a simple Angular app, when I came upon a problem. My perfectly simple and short boilerplate code runs entirely fine in a Codepen, but it fails to work in a JSFiddle. The snippet I created below works fine as well, but I cannot figure out why it does not work in JSFiddle. Could anyone point out what the problem is?
Codepen link: http://codepen.io/chalarangelo/pen/YWdvBV
JSFiddle link: https://jsfiddle.net/chalarangelo/1d12hm5f/1/
Code snippet:
var app = angular.module('myApp', []);
app.controller('myController', [
'$scope',
function($scope) {
$scope.demoText = 'AngularJS: This is some demo text!';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p>
{{ demoText }}
</p>
</div>
</div>
You should click the JAVASCRIPT button and select an Angular version under the FRAMEWORKS & EXTENSIONS dropdown, instead of including it as an external resource.
To fix your problem, you must select the LOAD TYPE as No wrap - in <head>.
Related
I am really new to AngularJS. So this question might be very basic but I don't get a clear answer from other post so I try to ask a new question.
I am woundering why angulars js ng-bind-html removes all script tags from the content I want to paste in my website.
I just try it with this code example from AngularJS documentation website which shows a simple bind-html example with a java script tag inside.
(function(angular) {
'use strict';
angular.module('bindHtml', ['ngSanitize'])
.controller('Controller', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>';
}]);
})(window.angular);
This code snippet shows the html template:
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
But the Chrome Inspector shows that AngularJS apparently removed all java script without a warning message. Exist a way to bypass this removing or do I have to rewrite all old style jquery and what ever javascript into AngularJS?
Screenshot from code inspector of Chrome
Thank you
You need to inject $sce service into your controller or Directive etc. and use $sce service like this :-
$scope.myHTML= $sce.trustAsHtml("I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>");
And bind this in your HTML page e.g;
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
Please see relevant jsFiddle
Within this file even though I included angular.sanitize.js I am not able to bind the html elements.
HTML Code:
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
JS Code:
var app = angular.module('HelloApp', ['ngSanitize'])
app.controller('MyCtrl', function($scope) {
$scope.myHTML = [];
$scope.myHTML.push('<li>Test1</li>');
$scope.myHTML.push('<li>Test2</li>');
});
Nothing is being displayed when running the jsFiddle. When debugging I am getting an injector error.
Please let me know if you need any more relevant information
Make sure ngSanitize is loaded after Angular. Updated working fiddle: http://jsfiddle.net/36qp9ekL/444/
For some experimenting, I need to put this Angular jQcloud at Plunker. I have put all the necessary codes provided by the plugin, still don't understand why that text cloud hasn't come at plunker. Can you please tell me what I have missed?
HTML:
<html ng-app="app" ng-controller="myCtrl">
<body>
<jqcloud words="words" width="500" height="350" steps="7"></jqcloud>
</body>
</html>
JS:
var app = angular.module('app', ['angular-jqcloud']);
app.controller('myCtrl', function ($scope) {
$scope.words = [/* ... */];
});
Plunker link
Here it is.
You forgot to load jquery and angular-jqcloud scripts. Use angular.js instead of angular.min.js whenever possible, it makes more sense in debuggers that don't support source maps (e.g Firebug). Don't add angular directives to <html>, Plunker doesn't like it. Devtools are your best friends ever, especially console and network tabs.
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/
How do I make a jsfiddle out of the following code:
<html>
<head>
</head>
<body>
<div ng-app ng-controller="MainCtrl">
<ul>
<li ng-repeat="num in nums">
{{num}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function MainCtrl($scope) {
$scope.nums = ["1","2"];
}
</script>
</body>
</html>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
#pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/cloudnine/trgrjwf1/7/
Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.
Sample HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="sample" placeholder="type something here...">
<span>{{sample}}</span>
</div>
Sample JS:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {});
https://jsfiddle.net/y170uj84/
Also tested with the latest Angular 1.6.4, by setting as External Resource.
For little experiments in angular 5, you can use https://stackblitz.com/.
This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav