I'm a AngularJS newbie. I have to learn it to help maintain an existing site. I made a simple angularjs app to just print hello but it is not working. What is wrong with my code. Thank you.
Codepen: https://codepen.io/centem/pen/pozRNqN?editors=1010
html
<div ng-app="testApp" ng-controller="testController">
{{test}}
</div>
angularjs code
var app = andgular.module('testApp', [])
app.controller('testController', function($scope) {
$scope.test = 'hello'
})
andgular in your js code is a typo. Just replace with angular.
Related
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>.
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/
Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.
I am trying to introduce angular.js into a legacy system.
the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.
my brief html will look like this
<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>
and my javascript legacy code looks like
$('#dyncontent').load('/showviewcontent');
I added in the dynamic content, some angular directive and binding instruction
my angular code is like this
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
.....
});
How to make the binding / angular directive works on the newly added content?
You need to manually start the angular module using angular.bootstrap
$('#dyncontent').load('/showviewcontent', function() {
angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});
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/