AngularJS 中的模块到底是什么？答案

【问题标题】：What exactly is a module in AngularJS?AngularJS 中的模块到底是什么？
【发布时间】：2016-02-07 17:45:29
【问题描述】：

我是 AngularJS 的新手，我在试图理解它是如何实现 MVC 模式时发现了一些困难。

所以我对这个例子有第一个疑问，其中我有 2 个文件：

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 indise 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) {

}]);

我在试图确定谁是 MODEL、谁是 CONTROLLER 以及谁是 VIEW 时发现了一些困难。

所以在我看来，ng-app="angularApp" 属性定义在 html 标签上：

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

将整个 index.htm 页面绑定到 angularApp 变量

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

那么 angularApp 变量究竟代表什么？它是 Angular 模块吗？ Angular 中的模块到底代表什么？

【问题讨论】：

我自己对 Angular 的经验很少，但据我了解，该模块在 MVC 模式中扮演着控制器的角色。并且在模块中是视图中每个动态元素的“模型”。这些是这样声明的 $scope.PropertyA = blah; 或者可能是一个函数而不是一个值。
@Nick 所以我可以说 $scope 对象类似于 Java MVC 应用程序的模型对象 (POJO)？
我无法真正权威地回答这个问题，因为我没有 Java 经验。
$scope 不是 POJO，因为它不是。除了模型属性之外，它还包含一堆特定于范围的东西。您可以通过记录它或检查 $rootScope 文档来弄清楚。
如果你想通过例子学习，我推荐 John Papa (github.com/johnpapa/ng-demos/tree/master/modular/src/client/app) 的模块化角度演示。你可以从他如何构建他的项目及其模块中学到很多东西。这是一个示例应用程序，实现了同一作者著名的样式指南github.com/johnpapa/angular-styleguide。该演示完全改变了我对在应用程序中使用多个模块是否有用以及如何有用的想法。

标签： javascript angularjs javascript-framework

【解决方案1】：

您真的应该阅读https://docs.angularjs.org/guide。还有一个很好的教程可以回答你所有的问题https://docs.angularjs.org/tutorial。

最终，我发现没有办法绕过它。 AngularJs 是一个复杂的框架，学习曲线陡峭。

<html lang="en-us" ng-app="angularApp"> 表示<html> 标签的内容是由angularApp app 控制的，但index.html 并不是你想象的view。您应该将view 视为directives（即Angular 组件）附带的模板。

这里是 Angular 概念的快速回顾：https://docs.angularjs.org/guide/concepts

模块 - 应用程序不同部分的容器，包括控制器、服务、过滤器、配置喷油器

查看 - 用户看到的内容（DOM）

控制器 - 视图背后的业务逻辑

【讨论】：

【解决方案2】：

来自angularjs.org 文档

什么是模块？你可以把一个模块想象成一个容器应用程序的不同部分——控制器、服务、过滤器、指令等。

为什么？大多数应用程序都有一个实例化和连接的主要方法将应用程序的不同部分组合在一起。

Angular 应用没有 main 方法。而是以声明方式模块指定应如何引导应用程序。有几种这种方法的优点：

声明式过程更容易理解。可以打包代码作为可重用的模块。模块可以按任何顺序加载（甚至并行）因为模块延迟执行。单元测试只需要加载相关模块，使它们保持快速。端到端测试可以使用覆盖配置的模块。

据说模块是您应用程序中的一个应用程序。在您的模块中，您可以拥有控制器和模型..

【讨论】：

【解决方案3】：

要理解 Angularjs，你不能只停留在 MVC 模式中，有了 Angular 你可以使用这种模式，但它更多的是 MV*，Model View 随你所想。

所以变量 angularApp 包含 angularApp 模块及其所有依赖项、控制器、提供程序、服务等...，一个模块可以是一个部分或整个应用程序，这取决于你。

【讨论】：