Пришло время дать этим веб -страницам некоторые динамические функции - используйте AngularJS! Мы добавили тест для контроллера, который будет добавлен позже.
Существует много типов архитектур кода для приложения. Для приложений AngularJS мы поощряем использование режима модели-контроллера (MVC) для отделки кода и отдельных проблем. Имея это в виду, мы используем AngularJS, чтобы добавить некоторые модели, представления и контроллеры в наше приложение.
Пожалуйста, сбросьте рабочий каталог:
Кода -копия выглядит следующим образом:
GIT Checkout -f шаг -2
Наше приложение теперь имеет список из трех телефонов.
Наиболее важные различия между шагом 1 и шагом 2 перечислены ниже. Вы можете пойти в GitHub, чтобы увидеть полную разницу.
Виды и шаблоны
В AngularJS представление является отображением после того, как модель отображается через шаблоны HTML **. Это означает, что независимо от того, когда изменяется модель, AngularJS будет обновлять точки соединения в режиме реального времени и обновлять представление.
Например, компонент представления строится AngularJs, используя следующий шаблон:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
...
<script src = "lib/angular/angular.js"> </script>
<script src = "js/controllers.js"> </script>
</head>
<body ng-controller = "phonelistctrl">
<ul>
<li ng-repeat = "Телефон в телефонах">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</body>
</html>
Мы только что заменили статически кодированный список мобильных телефонов, потому что мы можем достичь того же эффекта, используя директиву NgrePeat и два выражения AngularJS, завернутых в Curly Braces - {{phone.name}} и {{phone.snippet}}.
1. Оператор NG-Repeat = "Телефон в телефонах" в теге <li> является итератором AngularJS. Этот итератор говорит Angularjs использовать первый тег <li> в качестве шаблона для создания элемента <li> для каждого телефона в списке.
2. Как мы узнали на шаге 0, кудрявые скобки, обернутые вокруг телефона. Name и Phone.snippet идентифицируют привязку данных. В отличие от постоянных вычислений, выражение здесь на самом деле представляет собой ссылку на модель данных, которую мы применили, и мы установили их в контроллере PhonelistCtrl.
Модели и контроллеры
Модель данных инициализирована в контроллере PhonelistCtrl (здесь просто функция, содержащая массив, а объекты, хранящиеся в массиве, являются мобильными данными):
app/js/controller.js:
Кода -копия выглядит следующим образом:
Функция phonelistctrl ($ scope) {
$ scope.phones = [
{"name": "nexus s",
«Спрыг»: «Быстрый только что стал быстрее с Nexus S.»},
{"name": "Motorola xoom ™ с Wi-Fi",
«Спрыг»: «Следующее, планшет следующего поколения.»},
{"name": "Motorola xoom ™",
«Спрыг»: «Следующее, планшет следующего поколения.»}
];
}
Хотя контроллер, похоже, не играет очень важной роли, он играет важную роль здесь. Учитывая контекст нашей модели данных, контроллер позволяет нам устанавливать привязку данных между моделью и представлением. Вот как мы связываем уровень презентации, данные и логические компоненты:
1. Phonelistctrl - Имя метода контроллера (в файловых контроллерах js) соответствует значению директивы ngcontroller в теге <body>.
2. Данные мобильного телефона теперь связаны с областью применения ($ accope), введенной в нашу функцию контроллера. Когда приложение запускается, создается корневая область, а область контроллера является типичным преемником корня. Область этого контроллера действительна для привязки данных внутри всех тегов <body ng-controller = "phonelistctrl">.
Теория областей Angularjs очень важна: область можно рассматривать как бондер для шаблонов, моделей и контроллеров для совместной работы. AngularJS использует области, а также информацию, модели данных и контроллеры в шаблонах. Они могут помочь разделить модель и представление, но они действительно синхронизированы! Любые изменения в модели будут немедленно отражены на представлении; Любые изменения в представлении будут отражены в модели немедленно.
Для более глубокого понимания области AngularJS, пожалуйста, обратитесь к документации AngularJS Scope.
тест
«Метод AngularJS» позволяет легко тестировать код во время разработки. Давайте посмотрим на следующий модульный тест, недавно добавленный для контроллера:
тест/единица/Controllersspec.js:
Кода -копия выглядит следующим образом:
описать ('Phonecat Controllers', function () {
описать ('Phonelistctrl', function () {
Это («должно создать модель« телефонов »с 3 телефонами», function () {
var scope = {},
ctrl = new Phonelistctrl (Scope);
Ожидайте (scope.phones.length) .tobe (3);
});
});
});
Этот тест подтверждает, что в нашем массиве мобильных телефонов есть три записи (в настоящее время не нужно понимать этот тестовый сценарий). Этот пример показывает, насколько легко создать модульный тест для кода AngularJS. Поскольку тестирование является неотъемлемой частью разработки программного обеспечения, мы облегчаем создание тестов в AngularJS, чтобы побудить разработчиков писать больше из них.
При написании тестов разработчики AngularJS, как правило, используют синтаксис в рамках развития, управляемого поведением, BBD). Хотя AngularJS не заставляет вас использовать жасмин, все тесты, которые мы проводим в учебном пособии, написаны на жасмине. Вы можете получить соответствующие знания на официальной домашней странице Жасмин или на вики Jasmine.
Проекты на основе AngularJS предварительно настроены для использования JStestDriver для проведения модульных тестов.
Вы можете запустить тест таким образом:
1. На отдельном терминале введите каталог Angular-Phonecat и запустите ./scripts/test-server.sh, чтобы запустить тест (пожалуйста, введите ./scripts/test-server.bat в командной строке Windows, чтобы запустить скрипт, и команды скрипта запускаются следующим образом);
2. Откройте новое окно браузера и перейдите по адресу http: // localhost: 9876;
3. Выберите «Захватить этот браузер в строгом режиме».
В настоящее время вы можете оставить свое окно в покое и забыть об этом. JStestdriver завершит тест и выведет результаты на ваш терминал.
4. запустить ./scripts/test.sh для тестирования.
Вы должны увидеть результаты, аналогичные следующим:
Кода -копия выглядит следующим образом:
Chrome: Runner Reset.
Полем
Всего 1 теста (прошло: 1; сбой: 0; ошибки: 0) (2,00 мс)
Chrome 19.0.1084.36 Mac OS: запустить 1 тесты (прошло: 1; сбой: 0; ошибки 0) (2,00 мс)
ага! Тест прошел! Или нет ... Примечание: если ошибка возникает после запуска теста, закройте браузер и вернитесь к терминалу и закройте скрипт, а затем повторите шаги выше.
упражняться
Добавьте еще одно привязку данных для index.html. Например:
Кода -копия выглядит следующим образом:
<p> Общее количество телефонов: {{phones.length}} </p>
Создайте новое свойство модели данных и свяжите его с шаблоном. Например:
Кода -копия выглядит следующим образом:
$ scope.hello = "Привет, мир!"
Обновите свой браузер и убедитесь, что "Привет, мир!" появляется
Создайте простую таблицу с итератором:
Кода -копия выглядит следующим образом:
<Таблица>
<tr> <hl> номер строки </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</table>
Теперь пусть I выражения модели данных увеличится на 1:
Кода -копия выглядит следующим образом:
<Таблица>
<tr> <hl> номер строки </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i+1}} </td> </tr>
</table>
Обязательно измените Tobe (3) на Tobe (4), а затем снова запустите скрипт ./scripts/test.sh
Суммировать
Теперь у вас есть динамическое применение модели, просмотра, разделения контроллера, и вы всегда тестируете. Теперь вы можете перейти к шагу 3, чтобы добавить полнотекстовый функцию поиска в приложение.