AngularJS 模块分离不能正常工作

Question

我是angular js的新手，刚开始学习。我一直在学习 w3schools 教程，但我陷入了表单部分。原因如下：

教程中给出的代码如下，运行良好：

<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>

但我正在尝试的是分离模块，如他们的教程之一所示，但这根本不起作用。下面是我试过的。

<!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 包含以下代码

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();
});

和myApp.js如下：

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

但是当我尝试教程代码时，它给出了以下输出

形式={"firstName":"John","lastName":"Doe"} master = {"firstName":"John","lastName":"Doe"}

当我运行我尝试的结果低于输出

表格={{用户}}
大师= {{大师}}

为什么会这样？我也尝试将 angular.js link 保持在顶部，但结果仍然相同..

Answer 1

当 angular 似乎损坏时，例如您看到 {{ curly brackets }} 而不是任何渲染，很可能意味着引擎崩溃了。

发生这种情况时，您需要查找错误原因。它们显示在您的开发人员控制台中。

这里是如何使用 Google Chrome, and here using Firefox 打开它（或者只是 google "dev console browser" 对于任何其他浏览器）。

然后将错误粘贴到此处，以便我们帮助您理解并修复它。

Answer 2

首先，欢迎来到 Angular 开发者社区！

第一步： 请勿使用 IE 进行开发。尝试 Chrome 或 Firefox。

第二步： 您的 HTML 和 js 几乎没有错误。例如：

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

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

我为你创建了一个plunkr，所有小错误都已修复（你可以比较你的代码和我的代码来找到它）。在 Chrome 上一切正常。我无法检查 IE，因为根本没有它。

如果你还想使用 IE8，你可以捕获这样的错误：

<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>

但是您需要将该代码放在 HTML 中的所有其他脚本之前。

取自 that SO question

的代码示例

AngularJS 模块分离不能正常工作

AngularJS module separation doesnot work properly

javascript

model-view-controller

angularjs

angularjs-module