首页 > 编程语言> > javascript – AngularJS中的模块究竟是什么？

javascript – AngularJS中的模块究竟是什么？

2019-08-29 16:44:43 作者：互联网

我在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中的模块？

解决方法:

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

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

< html lang =“en-us”ng-app =“angularApp”>说< html>的内容标签由angularApp app控制,但index.html不是您可能认为的视图.您应该将视图视为指令附带的模板(即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

标签：javascript,angularjs,javascript-framework
来源： https://codeday.me/bug/20190829/1762187.html