Simple AngularJS example with a module and controller in jsFiddle

Question

This probably a combo jsFiddle/Angular question, but I'm trying to learn me some basic Angular and I'm not sure why it only works when I include the controller JS in the HTML pane. jsFiddle here

Basically the following works:

<div ng-app="myAppModule" ng-controller="someController">
<!-- Show the name in the browser -->
 <h1>Welcome {{ name }}</h1>

<p>made by : {{userName}}</p>
<!-- Bind the input to the name -->
<input ng-model="name" name="name" placeholder="Enter your name" />
</div>
<script>
var myApp = angular.module('myAppModule', []);
myApp.controller('someController', function($scope) {
    // do some stuff here
    $scope.userName = "skube";
});
</script>

But if I try to move the JS within the script tag to the JavaScript pane, it fails.

I swear I tried that, but you're correct. What does "No wrap - in <head>" mean? It doesn't make sense to me — skube
– skube, Commented Jan 28, 2014 at 22:00
jsFiddle wraps your code in a ready or load event by default, and Angular might not find what it needs in the global scope when compiling your template at the time is needed. No wrap in <head> just loads the script in the head, without a wrap. — elclanrs
– elclanrs, Commented Jan 28, 2014 at 22:04

dimirc · Accepted Answer · 2014-01-28 22:31:05Z

5

Take a look at this article for some info about jsFiddle with Angular

Also more examples on AngularJS Wiki that you could use: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

answered Jan 28, 2014 at 22:31

dimirc

6,7753 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simple AngularJS example with a module and controller in jsFiddle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related