VM73:49Uncaught ReferenceError: angular is not defined in jsfiddle

Question

I am trying to run an angularJS example in jsfiddle (ofcourse learning purpose) getting below errors in console.

When I add this cdn for angular compatibility: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js

I seen below error.

VM141 angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.6%2Fangular.min.js%3A21%3A19)

When I remove the external source, seen below error:

VM93:45 Uncaught ReferenceError: angular is not defined

Concern:

Do I need to add external source for angular example? If yes then what will be the correct way to add external resource. (like, search a cdn for that api and add).

Here's the code snippet:

html:

<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{$scope.name}}
</div>

js:

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope){
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});

Here's the fiddle: https://jsfiddle.net/supdas87/my1juu4e/2/

Click on the java script setting button, select a framework and copy the link from cdn or something of that framework and load-type "No-wrap in body" — Rakesh Chand
– Rakesh Chand, Commented Jul 13, 2016 at 12:26
Your code is running not mine!! You have changed my code in your way.. What I was thinking is even if my code are logical no problem with that,.. then why it failed to run. @Mistalis — MonsterJava
– MonsterJava, Commented Jul 19, 2016 at 11:59

Mistalis · Accepted Answer · 2016-07-20 06:43:13Z

2

I've added angular-1.0.1.js file to external resources (you just have to copy and paste the URL), and changed {{$scope.name}} by {{name}} on your HTML file. You do not have to write $scope when you use {{ }}, it is implicit.

Here is a working Fiddle based on the code you provided.

PS: I've added Angular 1.0.1, but of course you can use the version of Angular you want. You can see allreleases here.

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  Your name: <input type="text" ng-model="name" ng-click="displayName();">
  Hello {{name}}
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
  $scope.displayName = function(){
    alert("In right place");
    $scope.name = "Name";
  }
});

edited Jul 20, 2016 at 6:43

answered Jul 13, 2016 at 12:19

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

3 Comments

Rakesh Chand Over a year ago

What he needed was to know how to setup angularjs source file in jsfiddle, I can't see you explained that here.

Jalal Mostafa Over a year ago

give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime :)

Rakesh Chand Over a year ago

@JalalMostafa way to go haha

Collectives™ on Stack Overflow

VM73:49Uncaught ReferenceError: angular is not defined in jsfiddle

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related