AngularJS 中的模块到底是什么?

What exactly is a module in AngularJS?

我绝对是 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?

中的模块到底是什么?

要理解Angularjs,一定不能只停留在MVC模式,有了angular就可以用这个模式,但更多的是MV*,Model View随便你。

因此变量 angularApp 包含 angularApp 模块及其所有依赖项、控制器、提供程序、服务等...,模块可以是应用程序的一部分或整个应用程序你.

你真的应该读一读 https://docs.angularjs.org/guide. There is also a very nice tutorial that answers all your questions https://docs.angularjs.org/tutorial

最后,我发现没有办法。 AngularJs 是一个复杂的框架,学习曲线陡峭。


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

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

Module - a container for the different parts of an app including controllers, services, filters, directives which configures the Injector

View - what the user sees (the DOM)

Controller - the business logic behind views

来自 angularjs.org 文档

What is a Module? You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Why? Most applications have a main method that instantiates and wires together the different parts of the application.

Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:

The declarative process is easier to understand. You can package code as reusable modules. The modules can be loaded in any order (or even in parallel) because modules delay execution. Unit tests only have to load relevant modules, which keeps them fast. End-to-end tests can use modules to override configuration.

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