Для обработки xml в angularJs доступны 2 библиотеки на Angular-xml и x2js. В этом примере я покажу как можно быстро вывести xml feed у себя на сайте. Пример нашего xml файла.
Создадим новый файл products.js и подключим наши модуль , а также создадим контроллер ProductCtrl через который мы будем обрабатывать наш xml файл.
Подключим все js библиотеки и выведем содержимое xml файла. Также я подключил стили materilize для более красивого оформления.
И вот наш результат :
Давайте установим эти две библиотеки с помощью bower. Создадим bower.json и внесем эти данные.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "xml-products", | |
| "version": "0.1", | |
| "license": "MIT", | |
| "main": "products.js", | |
| "ignore": [], | |
| "dependencies": { | |
| "angular":"latest", | |
| "angular-xml": "latest", | |
| "x2js": "latest" | |
| } | |
| } |
Создадим новый файл products.js и подключим наши модуль , а также создадим контроллер ProductCtrl через который мы будем обрабатывать наш xml файл.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('products', ['xml']) | |
| .config(function ($httpProvider) { | |
| $httpProvider.interceptors.push('xmlHttpInterceptor'); | |
| }) | |
| .controller('ProductCtrl',function ($scope, $http) { | |
| $http.get('goods.xml').success(function (data) { | |
| $scope.offers = data.yml_catalog.shop.offers.offer; | |
| }); | |
| }); |
Подключим все js библиотеки и выведем содержимое xml файла. Также я подключил стили materilize для более красивого оформления.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app="products"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Products</title> | |
| <link rel="stylesheet" href="materialize.min.css"> | |
| <script src="bower_components/angular/angular.min.js"></script> | |
| <script src="bower_components/x2js/xml2json.min.js"></script> | |
| <script src="bower_components/angular-xml/angular-xml.min.js"></script> | |
| <script src="products.js"></script> | |
| </head> | |
| <script> | |
| </script> | |
| <body> | |
| <div class="container" ng-controller="ProductCtrl"> | |
| <div class="row"> | |
| <div class="col s6 l2" ng-repeat="offer in offers"> | |
| <div class="card" > | |
| <div class="card-image"> | |
| <img src="{{offer.picture}}" > | |
| <span class="card-title" ></span> | |
| </div> | |
| <div class="card-content" > | |
| <p ng-bind="offer.name" ></p> | |
| </div> | |
| <div class="card-action"> | |
| <a href="{{offer.url}}" class="waves-effect waves-light btn modal-trigger" >Просмотреть</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
И вот наш результат :
Комментариев нет:
Отправить комментарий