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