Главная > Java-Скрипты > Руководство по работе с AngularJS: RESTful JSON-парсинг

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


17 сентября 2013, 14:30. Разместил: Design FactoRy
В последние пару дней нам довелось поработать с 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.
Вернуться назад