AngularJS on JSFiddle

Question

I'm new AngularJS, I'm trying to test the most basic form using AngularJS in JSFiddle. I'm not sure if I forget to configure anything in JSFiddle, but it is not working and it should.

I followed a basic sample from here.

I also include the CDN from here.

Here is the Angular code:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});

Link to my Fiddle: http://jsfiddle.net/bheng/tth4guev/

Settings

include

How would one go about debugging this further?

did the answer help

Sajeetharan
– Sajeetharan

2018-02-18 03:38:49 +00:00
Commented Feb 18, 2018 at 3:38 — Sajeetharan
– Sajeetharan, Commented Feb 18, 2018 at 3:38

Sajeetharan · Accepted Answer · 2018-02-16 19:06:29Z

1

There are two things missing

(i) You need to add ng-app directive as follows,

<div ng-app="myApp" ng-controller="formCtrl">

(ii) Change the angular.js script version above 1.1 to use without a global controller, and change load type as No wrap in <head>

WORKING FIDDLE

answered Feb 16, 2018 at 19:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Akash · Accepted Answer · 2018-02-16 18:28:15Z

1

I see, you did not add a name to your controller,and Angular App but in the JS you are accessing 'formctrl'. Go ahead and add a div around the form and add a ng-app='myApp' and a ng-controller='form-ctrl' to your form and it should work.

answered Feb 16, 2018 at 18:28

Akash

364 bronze badges

1 Comment

code-8 Over a year ago

I think I forgot this line completely. <div ng-app="myApp" ng-controller="formCtrl">

Rushikumar · Accepted Answer · 2018-02-16 18:32:28Z

1

You need to wrap the form tag in a div tag with ng-app attribute. Your h1 tag should be encapsulated within the div tag as well...

Here's a working example:

<div ng-app="">
  <form>
  First Name: <input type="text" ng-model="firstname">
  </form>
  <h1>You entered: {{firstname}}</h1>
</div>

answered Feb 16, 2018 at 18:32

Rushikumar

1,8305 gold badges22 silver badges28 bronze badges

Comments

Soul Eater · Accepted Answer · 2018-02-16 21:29:32Z

So here's the thing I saw with your code: You need to add the name of the App and the controller to the div.

Also you are repeating the name of the person in both fields, if you wish you can make an object with the person information to access each of his data fields:

<div ng-app="myApp" ng-controller="formCtrl">
   <form>
      Email: <input type="text" ng-model="person.firstname" />
      Password: <input type="text" ng-model="person.password" />
   </form>

   <h1>You entered: {{ person.firstname }}</h1>
</div>

<script>
   var myApp = angular
       .module("myApp",[])
       .controller("formCtrl", function($scope) {
          //here's the object called "person":
          var person = {
             firstname: "John",
             password: "password"
          };

          $scope.person = person;
   });
</script>

Collectives™ on Stack Overflow

AngularJS on JSFiddle

Settings

include

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Settings

include

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related