这个 AngularJS“HelloWorld”应用程序是如何工作的？关于Angular如何实现MVC模式的一些疑惑答案

【问题标题】：How works this AngularJS "HelloWorld" application? Some doubts about how Angular implement MVC pattern这个 AngularJS“HelloWorld”应用程序是如何工作的？关于Angular如何实现MVC模式的一些疑惑
【发布时间】：2016-02-04 02:50:13
【问题描述】：

我是 AngularJS 的新手，我正在学习一个展示 AngularJS 应用程序的第一个示例的课程，我对它的工作原理有些怀疑。

所以它是由这两个文件组成的：

1) index.htm：

<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
    <head>
        <title>Introduction to AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body
            {
                font-size: 1.1em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <!-- This div and its content is the view associated to the 'mainController': -->
            <div ng-controller="mainController">

                <h1>Hello world!</h1>

            </div>

        </div>

    </body>
</html>

2) app.js：

/* MODULE: one signgle object in the global namespace.
           Everything insise the element having ng-app="angularApp" custom attribute is connected to the angularApp variable into the
           global namespace
*/
var angularApp = angular.module('angularApp', []);

// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {

}]);

所以我对它的工作原理有些怀疑。

根据我对 app.js 文件的理解，它定义了一个模块，该模块基本上是定义到我的应用程序的全局命名空间中的单个对象。但是 AngularJS 中的 module 到底是什么？我来自 Spring MVC 框架（和其他一些经典 MVC），其中模块表示必须显示到视图中的数据。

在 Angular 中究竟代表什么？

因此，据我了解，该模块与整个 index.htm 页面绑定，因为在 HTML 中声明了：

<html lang="en-us" ng-app="angularApp">

所以我认为 html 页面上的 ng-app="angularApp" 意味着 angularApp 模块与 index 内部发生的事情有关。 html 页面。是我的推理正确还是错误？

然后在 app.js 文件中也定义了一个 controller：

// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {

}]);

这个 mainController 控制器（它是 mainController 控制器名称吗？）在 angularApp 模型对象上定义。

好的，我不太喜欢 JavaScript，但我认为它的工作方式如下：

mainController 变量是一个 JavaScript 对象，通过上一行，我添加了一个名为 mainController 的控制器字段，控制器逻辑由与此新对象关联的函数实现字段（因为在 JavaScript 中，函数可以是对象的字段）。

这是我的推理正确还是我错过了控制器声明的某些内容？

另一个疑问与 '$scope' 变量的使用有关。究竟是什么意思？以及语法 ['$scope', function ($scope) { ....CONTROLLER LOGIC....}] 的含义是什么？

此控制器与由 index.htm 页面的特定部分表示的特定视图相关联，即：

        <!-- This div and its content is the view associated to the 'mainController': -->
        <div ng-controller="mainController">

            <h1>Hello world!</h1>

        </div>

这让我有些困惑，因为它似乎与我在其他 Java MVC 实现中看到的完全不同。

与 Java MVC 实现不同的是，在 AngularJS 中，视图不是整个页面（因为在 Java 中可能是 .jsp 页面），而是通过 ng 绑定到特定控制器的 HTML 页面的一部分-controller="mainController" 自定义属性。是真的吗？

与 Java MVC 实现不同的是，在 AngularJS（或在前面的示例中）中，模型不仅是包含要显示到视图中的有效字段的对象，而且还是应用程序的全局命名空间中的对象。与在指定视图上执行操作的控制器（作为模型的字段）相关联。

我的推理是正确的还是我遗漏了什么？

【问题讨论】：

不要混淆模块和模型。
@KevinB 请给我更多信息:-)
我认为我无法在答案中提供您需要的大量信息。
这真的不是一个可以在没有大量澄清信息的情况下在一个答案中充分解决的问题。我会鼓励你转而加入聊天； JavaScript 频道中几乎总是有讨论，但我会在angular channel 上闲逛，与您进行具体讨论。

标签： javascript angularjs angularjs-scope javascript-framework

【解决方案1】：

一切都很好，您的控制器和视图都正常。下一步，您现在需要创建一个服务来绑定服务器 API 并像您的模型一样工作。

事实上，角度“控制器”可以像模型一样工作，但如果你只想在其中做控制器/监听器的事情，你需要创建一个像这样的真实服务：

示例：

app.service('ContactService', function () {

//'var' act like private
var contacts = [{
    id: 0,
    name: 'hello world'
}];

//'this' act like public (cool for java dev, you should feel like home :) )
this.save = function (contact) {
    //here connect to your api or stay offline
}

this.get = function (id) {

}

this.delete = function (id) {

}

this.list = function () {
    return contacts;
}
});

你的控制器

angularApp.controller('mainController', ['$scope','ContactService', function ($scope,ContactService) {
    $scope.contact = ContactService.get(0)
}]);

视图

    <div ng-controller="mainController">

        <h1>{{contact.name}}</h1>

    </div>

【讨论】：