Как работает это приложение AngularJS «HelloWorld»? Некоторые сомнения по поводу того, как Angular реализует паттерн MVC

Question

Как работает это приложение AngularJS «HelloWorld»? Некоторые сомнения по поводу того, как Angular реализует паттерн MVC

0

Я абсолютно новый в 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 framework (и некоторых других классических MVC), где модуль представляет данные, которые должны отображаться в виде.

В Angular что именно представляют?

Поэтому из того, что я понял, этот модуль связан со всей страницей index.htm, потому что в HTML объявлен:

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

поэтому я думаю, что ng-app = "angularApp" на странице html означает, что модуль angularApp связан с тем, что происходит на странице index.html. Это мои рассуждения правильные или это неправильно?

Затем в файле app.js также определяется контроллер:

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

}]);

Этот контроллер mainController (это mainController имя контроллера?) Определяется на объекте модели angularApp.

Хорошо, я не так в JavaScript, но я думаю, что это работает следующим образом:

Переменная mainController является объектом JavaScript, а по предыдущей строке я добавляю поле контроллера с именем mainController, а логика контроллера реализуется функцией, связанной с этим новым полем (потому что в JavaScript функция может быть полем объекта).

Является ли это моим рассуждением истинным, или я что-то пропустил в объявлении контроллера?

Другое сомнение связано с использованием переменной $ scope. Что именно означает? и что такое синтаксис ['$ scope', function ($ scope) {.... CONTROLLER LOGIC....}]?

Этот контроллер связан с определенным представлением, которое представлено конкретным разделом страницы 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 (или в предыдущем примере) модель является не только объектом, который содержит взвешенные поля для отображения в виде, но является объектом в глобальном пространстве имен приложения, к которому привязаны контроллеры (как поля модели), которые выполняют операцию на указанном представлении.

Правильны ли мои рассуждения или я что-то упускаю?

AndreaNobili 03 нояб. 2015, в 21:02

Источник

1

не путайте модуль и модель.
Kevin B 03 нояб. 2015, в 19:52
0

@KevinB, пожалуйста, вы можете дать мне больше информации :-)
AndreaNobili 03 нояб. 2015, в 19:53
0

Я не думаю, что смогу предоставить столько информации, сколько вам нужно в ответе.
Kevin B 03 нояб. 2015, в 19:54
0

это действительно не тот вопрос, который может быть адекватно рассмотрен в одном ответе без большого количества уточняющей информации, идущей туда-сюда. Я бы посоветовал вам перейти в чат; В канале JavaScript почти всегда идут обсуждения, но я немного потусуюсь на угловом канале, чтобы обсудить это с вами.
Claies 03 нояб. 2015, в 22:55

Показать ещё 2 комментария

Теги:

javascript

angularjs

angularjs-scope

javascript-framework

1 ответ

Ещё вопросы

@KevinB, пожалуйста, вы можете дать мне больше информации :-)
Я не думаю, что смогу предоставить столько информации, сколько вам нужно в ответе.
это действительно не тот вопрос, который может быть адекватно рассмотрен в одном ответе без большого количества уточняющей информации, идущей туда-сюда. Я бы посоветовал вам перейти в чат; В канале JavaScript почти всегда идут обсуждения, но я немного потусуюсь на угловом канале, чтобы обсудить это с вами.

David F. · Accepted Answer · 2015-11-03T20-23-00.000Z

Все в порядке, ваш контроллер и ваше мнение в порядке. Следующим шагом вам нужно создать службу для привязки API-интерфейса сервера и действовать как ваша модель.

Фактически, угловой "контроллер" может действовать как модель, но если вы хотите делать только функции контроллера/слушателей, вам нужно создать реальный сервис, подобный этому:

Exemple:

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>