AngularJS中的模块究竟是什么？

Question

我在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时遇到了一些困难。

所以在我看来，理解在html标签上定义的ng-app =“angularApp”属性：

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

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

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

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

Answer 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视为directive s（即Angular组件）附带的模板。

这里有一个Angular概念的快速回顾： https ： //docs.angularjs.org/guide/concepts

模块 - 应用程序不同部分的容器，包括控制器，服务，过滤器，配置注入器的指令

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

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

Answer 2

来自angularjs.org文档

什么是模块？ 您可以将模块视为应用程序不同部分的容器 - 控制器，服务，过滤器，指令等。

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

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

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

据说模块是你应用程序中的应用程序..在你的模块中你可以拥有控制器和模型..

Answer 3

要了解Angularjs，你不能只停留在MVC模式中，使用angular可以使用此模式，但它更多MV *，模型视图无论你需要什么。

因此变量angularApp包含angularApp模块及其所有依赖项，控制器，提供程序，服务等...，模块可以是由您自己决定的部件或整个应用程序。

AngularJS中的模块究竟是什么？

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-11-06 14:51:58

解决方案2
2 2015-11-06 14:57:35

解决方案3
1 2015-11-06 14:48:40

AngularJS中的模块究竟是什么？

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-11-06 14:51:58

解决方案2 2 2015-11-06 14:57:35

解决方案3 1 2015-11-06 14:48:40

解决方案1
2 已采纳 2015-11-06 14:51:58

解决方案2
2 2015-11-06 14:57:35

解决方案3
1 2015-11-06 14:48:40