AngularJS => Контроллеры

Синтаксис

<htmlElement ng-controller = "controllerName"> ... </ htmlElement>
<script> app.controller ('controllerName', controllerFunction); </ Скрипт>

Ваш первый контроллер

Контроллер - это базовая структура, используемая в Angular для сохранения области и обработки определенных действий внутри страницы. Каждый контроллер соединен с HTML-представлением.

Ниже приведен базовый шаблон для приложения «Угловое»:

<!DOCTYPE html>

<html lang="en" ng-app='MyFirstApp'>
    <head>
        <title>My First App</title>

        <!-- angular source -->
        <script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
        
        <!-- Your custom controller code -->
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <div ng-controller="MyController as mc">
            <h1>{{ mc.title }}</h1>
            <p>{{ mc.description }}</p>
            <button ng-click="mc.clicked()">
                Click Me!
            </button>
        </div>
    </body>
</html>

Здесь есть несколько вещей:

<html ng-app='MyFirstApp'>

Настройка имени приложения с помощью ng-app позволяет вам получить доступ к приложению во внешнем файле Javascript, который будет рассмотрен ниже.

<script src="js/controllers.js"></script>

Нам понадобится файл Javascript, в котором вы определяете свои контроллеры и их действия / данные.

<div ng-controller="MyController as mc">

Атрибут ng-controller устанавливает контроллер для этого элемента DOM и всех элементов, которые являются дочерними (рекурсивно) под ним.

У вас может быть несколько одинаковых контроллеров (в данном случае MyController ), говоря ... as mc , мы предоставляем этому экземпляру контроллера псевдоним.

<h1>{{ mc.title }}</h1>

Обозначение {{ ... }} - это угловое выражение. В этом случае этот внутренний текст этого элемента <h1> будет установлен независимо от значения mc.title .

Примечание. Угловое использование двухсторонней привязки данных, что означает, что независимо от того, как вы обновляете значение mc.title , оно будет отображаться как на контроллере, так и на странице.

Также обратите внимание, что угловые выражения не должны ссылаться на контроллер. Угловое выражение может быть таким же простым, как {{ 1 + 2 }} или {{ "Hello " + "World" }} .

<button ng-click="mc.clicked()">

ng-click является Угловой директивой, в этом случае связывания события щелчка на кнопку , чтобы вызвать clicked() функцию MyController экземпляра.

Имея это в виду, давайте напишем реализацию контроллера MyController . В приведенном выше примере вы должны написать этот код в js/controller.js .

Во-первых, вам нужно создать экземпляр приложения Angular в вашем Javascript.

var app = angular.module("MyFirstApp", []);

Обратите внимание, что имя, которое мы передаем здесь, совпадает с именем, указанным вами в вашем HTML, с директивой ng-app .

Теперь, когда у нас есть объект приложения, мы можем использовать его для создания контроллеров.

app.controller('MyController', function(){
    var ctrl = this;

    ctrl.title = "My First Angular App";
    ctrl.description = "This is my first Angular app!";

    ctrl.clicked = function(){
        alert("MyController.clicked()");
    };
});

Примечание. Для всего, что мы хотим быть частью экземпляра контроллера, мы используем this ключевое слово.

Это все, что требуется для создания простого контроллера.

Создание контроллеров

angular
    .module('app')
    .controller('SampleController', SampleController)

SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
    $log.debug('*****SampleController******');
    
    /* Your code below */
}

Примечание. В результате .$inject убедитесь, что ваши зависимости не будут скремблированы после минимизации. Кроме того, убедитесь, что это соответствует названной функции.

Создание контроллеров, защита от угроз

Существует несколько способов защитить создание контроллера от минимизации.

Первая называется аннотацией встроенного массива. Это выглядит так:

var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
    //logic here
}]);

Второй параметр метода контроллера может принимать массив зависимостей. Как вы можете видеть , я определил $scope и $http , которые должны соответствовать параметрам функции контроллера , в котором будет являться a $scope , и b будет $http . Обратите внимание, что последний элемент массива должен быть вашей функцией контроллера.

Второй вариант использует свойство $inject . Это выглядит так:

var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
    //logic here
}

Это делает то же самое, что и встроенное аннотирование массива, но предоставляет другой стиль для тех, кто предпочитает один вариант над другим.

Порядок вложенных зависимостей важен

При вводе зависимостей с использованием формы массива убедитесь, что список зависимостей соответствует соответствующему списку аргументов, переданных функции контроллера.

Обратите внимание, что в следующем примере $scope и $http отменены. Это вызовет проблему в коде.

// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
    $http.get('sample.json');
}]);

Использование контроллеров в Угловой JS

В Angular $scope - это клей между контроллером и представлением, который помогает со всеми нашими требованиями к привязке данных. Контроллер. Как другой способ привязки контроллера и просмотра и в основном рекомендуется использовать. В основном это две конструкции контроллера в Angular (т.е. $ scope и Controller As).

Различные способы использования контроллера Как есть -

controllerAs View Синтаксис

<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

controllerAs Синтаксис контроллера

function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

controllerAs с vm

function CustomerController() {
    /*jshint validthis: true */
    var vm = this;
    vm.name = {};
    vm.sendMessage = function() { };
}

controllerAs является синтаксическим сахаром над $scope . Вы все еще можете связываться с видом и по- прежнему получить доступ к $scope методов. Использование controllerAs - одна из лучших практик, предложенная группой углового ядра. Есть много причин для этого, немногие из них -

$scope представляет элементы из контроллера в представление через посреднический объект. Установив this.* , Мы можем разоблачить только то, что хотим отобразить с контроллера на представление. Он также соответствует стандартным способам использования JavaScript в JavaScript.
используя синтаксис controllerAs , у нас есть более читаемый код, а родительское свойство можно получить, используя псевдоним родительского контроллера вместо использования синтаксиса $parent .
Это способствует использованию привязки к «пунктируемому» объекту в представлении (например, customer.name вместо имени), который является более контекстуальным, более простым для чтения и позволяет избежать каких-либо проблем с исходными данными, которые могут возникнуть без «точечного».
Помогает избежать использования $parent вызовов в Views с вложенными контроллерами.
Используйте переменную захвата для этого при использовании синтаксиса controllerAs . Выберите имя постоянной переменной, например vm , что означает ViewModel. Поскольку this ключевое слово является контекстуальным и при использовании внутри функции внутри контроллера может изменить свой контекст. Захват контекста этого позволяет избежать этой проблемы.

ПРИМЕЧАНИЕ. Использование синтаксиса controllerAs добавляет ссылку на текущую область действия на текущий контроллер, поэтому она доступна как поле

<div ng-controller="Controller as vm>...</div>

vm доступен как $scope.vm .

Создание интеллектуальных угловых контроллеров

Чтобы создать интеллектуальные угловые контроллеры, вы измените параметры функции controller .

Второй аргумент функции module.controller должен быть передан массивом , где последним параметром является функция контроллера , и каждый параметр перед этим является именем каждого введенного значения.

Это отличается от обычной парадигмы; который выполняет функцию контроллера с введенными аргументами.

Дано:

var app = angular.module('myApp');

Контроллер должен выглядеть так:

app.controller('ctrlInject', 
    [
        /* Injected Parameters */
        '$Injectable1', 
        '$Injectable2', 
        /* Controller Function */
        function($injectable1Instance, $injectable2Instance) {
            /* Controller Content */
        }
    ]
);

Примечание . Имена введенных параметров не обязательно должны совпадать, но они будут привязаны по порядку.

Это будет означать что-то похожее на это:

var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);

Процесс минимизации заменяет каждый экземпляр app a каждый экземпляр $Injectable1Instance с b и каждый экземпляр $Injectable2Instance с c .

Вложенные контроллеры

Контроллеры вложенности также объединяют $scope . Изменение переменной $scope во вложенном контроллере изменяет одну и ту же переменную $scope в родительском контроллере.

.controller('parentController', function ($scope) {
    $scope.parentVariable = "I'm the parent";
});

.controller('childController', function ($scope) {
    $scope.childVariable = "I'm the child";

    $scope.childFunction = function () {
        $scope.parentVariable = "I'm overriding you";
    };
});

Теперь давайте попробуем обработать их обоих, вложенных.

<body ng-controller="parentController">
    What controller am I? {{parentVariable}}
    <div ng-controller="childController">
        What controller am I? {{childVariable}}
        <button ng-click="childFunction()"> Click me to override! </button>
    </div>
</body>

Контроллеры гнездования могут иметь свои преимущества, но при этом нужно иметь в виду одну вещь. Вызов директивы ngController создает новый экземпляр контроллера, который может часто создавать путаницу и неожиданные результаты.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

AngularJS
Контроллеры

Поиск…