AngularJS => Kontrolery

Składnia

<htmlElement ng-controller = "controllerName"> ... </htmlElement>
<script> app.controller ('controllerName', controllerFunction); </script>

Twój pierwszy kontroler

Kontroler jest podstawową strukturą używaną w Angular do zachowania zakresu i obsługi niektórych działań na stronie. Każdy kontroler jest połączony z widokiem HTML.

Poniżej znajduje się podstawowa płyta kotła do aplikacji Angular:

<!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>

Warto zwrócić uwagę na kilka rzeczy:

<html ng-app='MyFirstApp'>

Ustawienie nazwy aplikacji za pomocą ng-app umożliwia dostęp do aplikacji w zewnętrznym pliku JavaScript, który zostanie omówiony poniżej.

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

Będziemy potrzebować pliku JavaScript, w którym zdefiniujesz kontrolerów i ich działania / dane.

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

Atrybut ng-controller ustawia kontroler dla tego elementu DOM i wszystkich elementów, które są potomkami (rekurencyjnie) poniżej niego.

Możesz mieć wiele tego samego kontrolera (w tym przypadku MyController ), mówiąc ... as mc , dajemy temu wystąpieniu kontrolera alias.

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

Notacja {{ ... }} jest wyrażeniem kątowym. W takim przypadku ustawi to tekst wewnętrzny tego elementu <h1> na dowolną wartość mc.title .

Uwaga: Angular wykorzystuje dwukierunkowe wiązanie danych, co oznacza, że niezależnie od tego, jak zaktualizujesz wartość mc.title , zostanie ona odzwierciedlona zarówno w kontrolerze, jak i na stronie.

Zauważ również, że wyrażenia kątowe nie muszą odwoływać się do kontrolera. Wyrażenie kątowe może być tak proste, jak {{ 1 + 2 }} lub {{ "Hello " + "World" }} .

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

ng-click to dyrektywa Angular, w tym przypadku wiążąca zdarzenie click dla przycisku, aby uruchomić funkcję clicked() instancji MyController .

Mając to na uwadze, MyController kontrolera MyController . W powyższym przykładzie napiszesz ten kod w js/controller.js .

Najpierw musisz utworzyć instancję aplikacji Angular w JavaScript.

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

Pamiętaj, że nazwa, którą tutaj przekazujemy, jest taka sama, jak nazwa nadana w kodzie HTML w dyrektywie ng-app .

Teraz, gdy mamy obiekt aplikacji, możemy go użyć do tworzenia kontrolerów.

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()");
    };
});

Uwaga: do wszystkiego, co chcemy być częścią instancji kontrolera, używamy this słowa kluczowego.

To wszystko, co jest potrzebne do zbudowania prostego kontrolera.

Tworzenie kontrolerów

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

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

Uwaga: .$inject będzie upewnić się, że nie zostanie zależności jajecznica po minifikacji. Upewnij się również, że jest w porządku z nazwaną funkcją.

Tworzenie kontrolerów, bezpieczeństwo Minifikacji

Istnieje kilka różnych sposobów ochrony tworzenia kontrolera przed minimalizacją.

Pierwszy nazywa się wbudowaną adnotacją tablicy. Wygląda to następująco:

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

Drugi parametr metody kontrolera może akceptować tablicę zależności. Jak widać zdefiniowałem $scope i $http które powinny odpowiadać parametrom funkcji kontrolera, w której a będzie $scope , a b będzie $http . Zauważ, że ostatnim elementem w tablicy powinna być funkcja kontrolera.

Drugą opcją jest użycie właściwości $inject . Wygląda to następująco:

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

Działa to tak samo, jak adnotacja macierzy wbudowanej, ale zapewnia inny styl dla tych, którzy wolą jedną opcję od drugiej.

Kolejność wstrzykiwanych zależności jest ważna

Podczas wstrzykiwania zależności przy użyciu formularza tablicowego należy się upewnić, że lista zależności jest zgodna z odpowiednią listą argumentów przekazanych do funkcji kontrolera.

Zauważ, że w poniższym przykładzie $scope i $http są odwrócone. Spowoduje to problem w kodzie.

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

Korzystanie z ControllerAs in Angular JS

W Angular $scope jest klejem między Administratorem a Widokiem, który pomaga we wszystkich naszych potrzebach wiązania danych. Kontroler jako inny sposób powiązania kontrolera i widoku i jest najczęściej zalecany do użycia. Zasadniczo są to dwie konstrukcje kontrolerów w Angular (tj. $ Scope i Controller As).

Różne sposoby korzystania z kontrolera, takie jak -

controllerAs View Składnia

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

controllerAs Controller Składnia

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

controllerAs with vm

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

controllerAs to cukier składniowy w $scope . Nadal możesz połączyć się z widokiem i nadal uzyskać dostęp do metod $scope . Korzystanie z controllerAs jest jedną z najlepszych praktyk sugerowanych przez zespół Angular Core. Jest tego wiele przyczyn, kilka z nich to -

$scope wystawia członków z kontrolera na widok za pośrednictwem obiektu pośredniego. Ustawiając this.* , Możemy ujawnić tylko to, co chcemy odsłonić od kontrolera do widoku. Postępuje również zgodnie ze standardowym sposobem korzystania z JavaScript.
przy użyciu składni controllerAs Ponieważ mamy bardziej czytelny kod, do właściwości nadrzędnej można uzyskać dostęp za pomocą aliasu kontrolera nadrzędnego zamiast przy użyciu składni $parent .
Promuje użycie wiązania do „kropkowanego” obiektu w Widoku (np. Nazwa klienta.nazwa zamiast nazwy), który jest bardziej kontekstowy, łatwiejszy do odczytania i pozwala uniknąć problemów z odniesieniami, które mogą wystąpić bez „kropkowania”.
Pomaga uniknąć używania wywołań $parent w widokach z zagnieżdżonymi kontrolerami.
Użyj do tego zmiennej przechwytywania podczas korzystania ze składni controllerAs . Wybierz spójną nazwę zmiennej, taką jak vm , która oznacza ViewModel. Ponieważ this słowo kluczowe jest kontekstowe i użyte w funkcji wewnątrz kontrolera może zmienić jego kontekst. Uchwycenie kontekstu tego pozwala uniknąć tego problemu.

UWAGA: przy użyciu składni controllerAs dodać do bieżącego zakresu odniesienia do bieżącego kontrolera, więc jest on dostępny jako pole

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

vm jest dostępny jako $scope.vm .

Tworzenie bezpiecznych dla minimalizacji sterowników kątowych

Aby stworzyć kontrolery kątowe bezpieczne dla minimalizacji, zmień parametry funkcji controller .

Drugi argument funkcji module.controller powinien zostać przekazany do tablicy , w której ostatnim parametrem jest funkcja kontrolera , a każdy parametr przed nią to nazwa każdej wprowadzonej wartości.

Różni się to od normalnego paradygmatu; która przejmuje funkcję kontrolera z wprowadzonymi argumentami.

Dany:

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

Kontroler powinien wyglądać następująco:

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

Uwaga: Nazwy wstrzykiwanych parametrów nie muszą być zgodne, ale zostaną powiązane w kolejności.

Spowoduje to zmniejszenie do czegoś podobnego do tego:

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

Proces minimalizacji zastąpi każdą instancję app słowem a , każdą instancję $Injectable1Instance Injectable1Instance literą b , a każdą instancję $Injectable2Instance Injectable2Instance literą c .

Zagnieżdżone kontrolery

Zagnieżdżanie kontrolerów $scope również łańcuch $scope . Zmiana zmiennej $scope w zagnieżdżonym kontrolerze zmienia tę samą zmienną $scope w kontrolerze nadrzędnym.

.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";
    };
});

Teraz spróbujmy obsłużyć oba, zagnieżdżone.

<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>

Zagnieżdżanie kontrolerów może mieć swoje zalety, ale należy przy tym pamiętać o jednej rzeczy. Wywołanie dyrektywy ngController tworzy nową instancję kontrolera - co często może powodować zamieszanie i nieoczekiwane wyniki.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

AngularJS
Kontrolery

Szukaj…