—»     —»   Руководство по работе с AngularJS: RESTful JSON-парсинг
  Раздел: Java-Скрипты   Комментариев: 2  

Руководство по работе с AngularJS: RESTful JSON-парсинг



В последние пару дней нам довелось поработать с AngularJS – javascript MVC-фреймворком, разработанным компанией Google. Теперь же AngularJS.js, пожалуй, один из наших любимых фреймворков для создания улучшенной архитектуры веб-проектов, особенно для веб-сервисов типа RESTful. Он позволяет усовершенствовать HTML новыми атрибутами и выражениями, которые позволяют создавать многофункциональные шаблоны прямо в вашей HTML-странице.

Руководство по работе с AngularJS: RESTful JSON-парсинг

Скачать скрипт | Демо

Как это работает?

Этап 1

Включаем директиву ng-app и id='ng-app' (для Internet Explorer) в тег 'html', чтобы Angular знал, когда и на какой странице нужно запускаться.

<!doctype html>
<html lang="en" ng-app id="ng-app">

ng-app – объявляет элемент в качестве root-элемента приложения, что позволяет изменять среду посредством кастомных HTML-тегов.

Этап 2

Вам нужно включить тег 'script' от Angular в раздел 'head'.

<script src="js/angular.js"></script>

Этап 3

Доступ к директивам AngularJS осуществляется посредством HTML-атрибутов, здесь директива
<i>ng-controller</i>
устанавливает пространство имен, где вы можете поместить javascript-код от Angular для управления данными и определять HMTL-выражения.

<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
{{post.description}}
</div>

Posts.json

Примерный JSON, содержащий данные из ленты блога.

[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Ravi Tamada"
},
....
....
....
]

Angular javascript

Angular Ajax API-вызов

<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>

HTML – Привязка данных

Мы можем отображать значения JSON-данных путем использования атрибутов в выражениях вроде {{post.title}}, {{post.url}}, и т.д... Здесь id="ng-app" наиболее важен для привязки данных браузера IE.

<div id="ng-app" ng-app ng-controller="PostsCtrlAjax"> 

<div ng-repeat="post in posts">
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>

</div>

ng-controller - определяет класс javascript-контроллера, который определяет HTML-выражения.

ng-repeat – единожды создает экземпляр элемента для коллекции.

Фильтрация данных - ng-show

Директива ng-show помогает вам отображать определенный результат.

<div id="ng-app" ng-app ng-controller="PostsCtrlAjax" ng-show="post.author== 'Ravi Tamada'">

Демо (Отдельный результат)

Верхний регистр

Чтобы получить результат в верхнем регистре, вы можете воспользоваться CSS, прибавив стиль text-transform:uppercase;

<h2>
{{post.title | uppercase}}
</h2>

Финальный код – index.html

<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="js/angular.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">

<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>

</div>
</body>
</html>

Следующее руководство представит вам больше информации по поводу директив Angular.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: JSON, javascript
Опубликовал Design FactoRy   Прочитано (раз): 11352   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 сентября 2013 @ 23:43
Написал: almidi — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересно надо будет попробовать на досуге
Комментарий #2: 25 марта 2014 @ 14:10
Написал: Ann — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо большое за статью! Только начинаю вникать в AngularJS. Ваша статья мне очень помогла в его понимании. smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930