Отображение повторной информации
Иногда нам может потребоваться отобразить список элементов в представлении, поэтому вопрос заключается в том, как мы можем отобразить список элементов, определенных в нашем контроллере, на нашей странице представления.
Angular предоставляет директиву ng-repeat, которая может использоваться для отображения повторяющихся значений, определенных в нашем контроллере.
Давайте посмотрим на пример того, как мы можем достичь этого.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body > <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> <h1>Topics</h1> <ul><li ng-repeat="tpname in TopicNames"> {{tpname.name}} </li></ul> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoController', function($scope){ $scope.TopicNames =[ {name: "What controller do from Angular's perspective"}, {name: "Controller Methods"}, {name: "Building a basic controller"}]; }); </script> </body> </html>
Объяснение кода:
- В контроллере мы сначала определяем наш массив элементов списка, которые мы хотим определить в представлении. Здесь мы определили массив с именем «TopicNames», который содержит три элемента. Каждый элемент состоит из пары имя-значение.
- Массив TopicsNames затем добавляется в переменную-член, называемую «themes», и присоединяется к нашему объекту области.
- Мы используем HTML-теги <ul> (неупорядоченный список) и <li> (список элементов) для отображения списка элементов в нашем массиве. Затем мы используем директиву ng-repeat для прохождения каждого элемента в нашем массиве. Слово «tpname» является переменной, которая используется для указания на каждый элемент в массиве themes.TopicNames.
- В этом мы будем отображать значение каждого элемента массива.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод. Вы увидите все элементы массива (в основном TopicNames в темах).
Вывод:
Angularjs несколько контроллеров
Усовершенствованным примером контроллера может быть концепция наличия нескольких контроллеров в угловом приложении JS.
Возможно, вы захотите определить несколько контроллеров для разделения различных функций бизнес-логики. Ранее мы упоминали о наличии в контроллере разных методов, в которых один метод имел отдельные функции для сложения и вычитания чисел. Ну, вы можете иметь несколько контроллеров, чтобы иметь более продвинутое разделение логики. Например, у вас может быть один контроллер, который выполняет только операции над числами, а другой — над строками.
Давайте рассмотрим пример того, как мы можем определить несколько контроллеров в приложении angular.JS.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body > <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-app="DemoApp"> <div ng-controller="firstcontroller"> <div ng-controller="secondcontroller"> {{lname}} </div> </div> </div> <script> var app = angular.module('DemoApp',[]); app.controller('firstcontroller', function($scope){ $scope.pname="firstcontroller"; }); app.controller('secondcontroller', function($scope){ $scope.lname="secondcontroller"; }); </script> </body> </html>
Объяснение кода:
- Здесь мы определяем 2 контроллера, которые называются «firstController» и «secondController». Для каждого контроллера мы также добавляем некоторый код для обработки. В нашем firstController мы присоединяем переменную с именем «pname», которая имеет значение «firstController», а в secondController мы добавляем переменную с именем «lname», которая имеет значение «secondController».
- По нашему мнению, мы обращаемся к обоим контроллерам и используем переменную-член от второго контроллера.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод. Вы увидите весь текст «secondController», как и ожидалось.
Вывод:
Резюме
- Директива ng-repeater может использоваться для отображения нескольких повторяющихся элементов.
- Мы также взглянули на усовершенствованный контроллер, который рассмотрел определение нескольких контроллеров в приложении.