这个AngularJS是如何工作的;HelloWorld"应用有些人怀疑Angular是如何实现MVC模式的

How works this AngularJS "HelloWorld" application? Some doubts about how Angular implement MVC pattern

本文关键字：Angular 怀疑 何实现 实现 模式 MVC HelloWorld 工作 何工作 AngularJS 这个      更新时间：2023-09-26

我是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中的模块究竟代表什么？我来自Spring MVC框架（以及其他一些经典MVC），其中的模块表示必须显示在视图中的数据。

在Angular中，究竟代表什么？

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

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

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

然后在app.js文件中，还定义了控制器：

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

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

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

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

我的推理是真的，还是我遗漏了控制器声明的一些内容？

另一个疑问与'$scope'变量的使用有关。究竟是什么意思？语法是什么意思？

该控制器与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页面），而是HTML页面的一部分，通过ng-controller="mainController"自定义属性绑定到特定的控制器。这是真的吗？

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

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

一切都很好，您的控制器和视图都很好。下一步，您现在需要创建一个服务来绑定服务器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>
相关文章：