Поскольку вы сказали в своем посте, что вы не уверены в части контроллера, я объясню, что это такое. Контроллер в AngularJS находится под видом и контролирует , что делает представление. Вот небольшой пример из документов:
<html ng-app="phonecatApp">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
Это вид. Давайте разберемся с этим!
- Вы увидите
ng-controller="PhoneListController. Это объявляет контроллер для этого представления.
- Далее вы увидите
ng-repeat="phone in phones". Думайте об этом как для цикла. Переменная цикла называется phone, и она перебирает массив телефонов, объявленный в контроллере, который можно определить здесь:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});
Вот контроллер! Это то, что контролирует представление. Давайте разберемся и с этим!
var phonecatApp = angular.module('phonecatApp', []); по сути вытягивает экземпляр модуля phonecatApp в ваш файл. Думайте о модуле как о контейнере. Вы можете добавить в контейнер такие вещи, как контроллеры, сервисы и различные зависимости. phonecatApp.controller('PhoneListController', function PhoneListController($scope) эта строка добавляет новый контроллер в модуль с именем PhoneListController помните, когда мы использовали директиву ng-controller="PhoneListController в представлении? Параметр $scope позволяет нам получить доступ к переменным в представлении, как переменная phones, о которой мы говорили. $scope.phones вот как мы объявляем переменную, которую мы намерены использовать в представлении. Когда мы добавляем $scope. перед переменной, мы теперь можем получить к ней доступ в представлении. Вы заметите, что $scope.phones - это массив объектов.
При использовании ng-repeat он ожидает массив объектов, потому что когда мы используем переменную цикла, о которой мы говорили, мы можем получить доступ к свойствам объектов в представлении! Это можно увидеть здесь!
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
Это доступ к каждому объекту в массиве phones и присвоение этого объекта переменной с именем phone, после чего мы можем вывести свойства объекта phone с помощью точечной нотации!
В общем, этот ng-repeat создает новый элемент li для каждого объекта в массиве phones, который был объявлен с использованием нотации $scope! Теперь это может быть очень мощным! Вы можете сделать что-то вроде этого!
$scope.name = "Marcus"
Тогда в представлении я мог бы:
<p>{{name}}</p>
Тогда представление покажет, какая переменная name находится в моем контроллере!