Главная > Java-Скрипты > Руководство по работе с AngularJS: RESTful JSON-парсинг
Руководство по работе с AngularJS: RESTful JSON-парсинг17 сентября 2013, 14:30. Разместил: Design FactoRy |
В последние пару дней нам довелось поработать с AngularJS – javascript MVC-фреймворком, разработанным компанией Google. Теперь же AngularJS.js, пожалуй, один из наших любимых фреймворков для создания улучшенной архитектуры веб-проектов, особенно для веб-сервисов типа RESTful. Он позволяет усовершенствовать HTML новыми атрибутами и выражениями, которые позволяют создавать многофункциональные шаблоны прямо в вашей HTML-странице. Скачать скрипт | Демо Как это работает? Этап 1 Включаем директиву ng-app и id='ng-app' (для Internet Explorer) в тег 'html', чтобы Angular знал, когда и на какой странице нужно запускаться.
ng-app – объявляет элемент в качестве root-элемента приложения, что позволяет изменять среду посредством кастомных HTML-тегов. Этап 2 Вам нужно включить тег 'script' от Angular в раздел 'head'.
Этап 3 Доступ к директивам AngularJS осуществляется посредством HTML-атрибутов, здесь директива устанавливает пространство имен, где вы можете поместить javascript-код от Angular для управления данными и определять HMTL-выражения.
Posts.json Примерный JSON, содержащий данные из ленты блога.
Angular javascript Angular Ajax API-вызов
HTML – Привязка данных Мы можем отображать значения JSON-данных путем использования атрибутов в выражениях вроде {{post.title}}, {{post.url}}, и т.д... Здесь id="ng-app" наиболее важен для привязки данных браузера IE.
ng-controller - определяет класс javascript-контроллера, который определяет HTML-выражения. ng-repeat – единожды создает экземпляр элемента для коллекции. Фильтрация данных - ng-show Директива ng-show помогает вам отображать определенный результат.
* Демо (Отдельный результат) Верхний регистр Чтобы получить результат в верхнем регистре, вы можете воспользоваться CSS, прибавив стиль text-transform:uppercase;
Финальный код – index.html
Следующее руководство представит вам больше информации по поводу директив Angular. Вернуться назад |