0

I am a newbie to angular js and I have just started learning it. I was been going through w3schools tutorials and I got stuck in forms part. The reason being is below:

The code given in tutorial is as below and it works fine:

<div ng-app="" ng-controller="formController">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};
</script>

But what I am trying is separation of modules as shown in one of their tutorail but that doesn't work at all. Below is what I tried.

<!DOCTYPE html>
    <head>
        <title>
            Angular JS
        </title>
    </head>
    <script src="Scripts/angular.min.js"></script>
    <body>
    <div data-ng-app="myApp" data-ng-controller="formController">
        <form novalidate>
            <table>
                <tr>
                    <td>
                        First Name : 
                    </td>
                    <td>
                        <input type="text" data-ng-model="user.firstName">
                    </td>
                </tr>
                <tr>
                    <td>
                        Last Name : 
                    </td>
                    <td>
                        <input type="text" data-ng-model="user.lastName">
                    </td>
                </tr>
                <tr>
                    <button data-ng-click="reset()">Reset</button>
                </tr>

            </table>
        </form>
        <table>
            <tr>
            <td>
                form = {{user}}
            </td>
            </tr>

            <tr>
            <td>
                master= {{master}}
            </tr>
            </tr>
        </table>

    </div>
    <script src="Scripts/myApp.js"></script>
    <script src="Scripts/myCtrl.js"></script>
    </body>
</html>

myCtrl.js contains below code

app.controller("myCtrl",function($scope)
        {
        $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
        });

app.controller("formController",function($scope)
{
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});

and myApp.js is as below:

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

But when I try the tutorial code it gives me below output

form = {"firstName":"John","lastName":"Doe"} master = {"firstName":"John","lastName":"Doe"}

and when I run what I tried it gives below output

form = {{user}}
master= {{master}}

Why is this happening so? I have also tried keeping angular.js link at the top but still the result is same..

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200

2 Answers2

2

First of all, Welcome to Angular developers community!

The first step: Do not use IE for development. Try Chrome or Firefox.

The second step: Your HTML and js have little errors. For example:

    <table>
        <tr>
        <td>
            form = {{user}}
        </td>
        </tr>

        <tr>
        <td>
            master= {{master}}
        </tr>           <--- need to be </td>
        </tr>
    </table>

I create a plunkr for you, all little errors are fixed(you can compare your code and mine to find it). Everything works fine on Chrome. I can't check on IE, cause don't have it at all.

If you still want to use IE8, you can catch errors like that:

<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
   // Note that col & error are new to the HTML 5 spec and may not be 
   // supported in every browser.  It worked for me in Chrome.
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;

   // You can view the information in an alert to see things working like         this:
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of 
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};
</script>

But you need to place that code before all other scripts in your HTML.

Code sample taken from that SO question

Community
  • 1
  • 1
Harry Burns
  • 770
  • 5
  • 19
  • I don't think there is any error because I added the code mentioned by you but there wasn't any alert poping up. I made changes you pointed out still the result is same in IE. Tested in chrome and firefox and its working fine. So I think the problem is with IE version. Thanks for the suggestion. – Guruprasad J Rao Feb 25 '15 at 07:30
  • @GuruprasadRao could you tell use the angular version and the IE version? That could help the community in case you faced an imcompatibility. – floribon Feb 25 '15 at 08:03
  • Sure.. IE version 8 and Angular JS Version 1.2.26 – Guruprasad J Rao Feb 25 '15 at 08:12
1

When angular seems to be broken, for instance you see the {{ curly brackets }} instead of any rendering, most likely it means the engine crashed.

When this happens, you need to look for what was the error. They are displayed in your developper console.

Here is how to open it using Google Chrome, and here using Firefox (or just google "dev console browser" for any other browser).

Then paste the error here so we can help you understand it and fix it.

floribon
  • 19,175
  • 5
  • 54
  • 66