在 AngularJS 中将 XML 转换为 JSON
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
在这篇文章中，我们将谈谈如何在Angular JS中将XML文件转换为JSON。大家都知道AngularJS是开发应用程序的框架。所以基本上AngularJS期望得 到的响应式JSON格式的。因此，在你开始对数据进行操作之前，建议返回JSON格式的数据。在这篇文章中，我们会使用AngularJS $http服务加载一个本地的XML文件，并将这个XML文件转换成JSON。如果你是Angular JS新手，请阅读《AngularJS》。希望你会喜欢这篇文章。
我曾发表过一篇有关于AngularJS $http服务的文章：《 $http Service In Angular JS 》
下载源代码： XML to JSON Source Code
首先创建一个HTML页面。
&!DOCTYPEhtml&
&title&ConvertXMLtoJSONInAngularJS-SibeeshPassion&/title&
现在，如下添加所需的引用。
&scriptsrc= "jquery-2.1.3.min.js" &&/script&
&scriptsrc= "angular.min.js" &&/script&
&scriptsrc= "xml2json.js" &&/script&
你注意到了吗，我已经添加了xml2json.js文件？这就是将要转换的文件。你可以从 https://code ./ p/x2js/ 下载文件。
现在创建一个控制器和应用程序指令，如下所示。
&divng-app= "httpApp" ng-controller= "httpController" &
接下来我们需要做的是添加服务。你可以按如下方式添加$http服务。
varapp=angular.module( 'httpApp' ,[]);
app.controller( 'httpController' ,function($scope,$http){
$http.get( "Sitemap.xml" ,
transformResponse:function(cnv){
varx2js= new X2JS();
varaftCnv=x2js.xml_str2json(cnv);
return aftC
.success(function(response){
console.log(response);
这里的httpApp是我们的应用程序，httpController是我们的控制器。我们使用函数transformResponse转换响应。
转换请求和响应
在Angular JS中，请求可以使用transformRequest函数转换，如果是响应的话，可以通过函数transformResponse转换。这些函数返回转换后的值。
下面是我们使用transformResponse函数的一个例子。
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftC
这个x2js.xml_str2json（CNV）将返回JSON对象，并从transformResponse函数返回aftCnv。听起来不错吧？一旦准备就绪，我们只要在浏览器控制台写JSON对象，就可以看到该对象了。
在Angular JS中转换XML为JSON，就是这么简单。祝大家Happy coding！
欢迎大家的火眼金睛。如果我有什么遗漏或写错的地方，请不吝指正。希望大家能够喜欢这篇文章。
译文链接： /article/angularjs-xml-to-json.html
英文原文： Convert XML to JSON In Angular JS
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(1138)
CodeSecTeam微信公众号
排队的时候你会发现一个规律：另一排总是动的比较快，当你换到另一排，你会发现，你原来站的那一排就开始动的比较快了。你站的越久，越可能感觉自己是站错了排。这就是神奇的墨菲定理。所以，不让自己后悔的最好办法，就是坚持。坚持你的人生梦想，而不去张望别人并受之影响。坚信自己当下的选择，不犹疑，不浮躁，心怀梦想，务实前行！相信成功就是将别人坚持不下来的事情坚持做下去。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netangular 跳转页面传参数，参数是对象
angular 路由如何跳转页面传参数，这个参数是一个对象或者数组，为什么有时候好用，有时候不好用呢？我是吧这个对象转换成了字符串，然后转码var str=encodeURI(JSON.stringify(data));$state.go('article.managerList',{data:str});这是路由里的：.state('article.managerUpdate', {
url: '/articleList/manager/：data',//冒号后面是参数
title: '文章列表修改',
hide:'true',
cache:'false',
templateUrl: 'views/pages/articleList-manager.html',
controller: 'articleListUpdate',
resolve: {这是跳转后的页面，在获取，转码过来：$scope.type=JSON.parse(decodeURI($stateParams.data));为什么有时候能获取到数据，有时候报错：SyntaxError: Unexpected token u in JSON at position 0如果我写的有问题，请问那该怎么传对象这样的参数，谢谢了
谢谢回答，我先查一下，如果不明白，可能还要劳烦给解释一下
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2在 AngularJS 应用中通过 JSON 文件来设置状态_Linux编程_Linux公社-Linux系统门户网站
你好，游客
在 AngularJS 应用中通过 JSON 文件来设置状态
来源：oschina.net &
作者： CodingKu
想象一个使用简单的angular UI路由的 angularjs 应用:
&!DOCTYPE html&&html&&head&& & &meta charset="utf-8"&& & &title&Example&/title&& & &script src="bower_components/angular/angular.js"&&/script&& & &script src="bower_components/angular-ui-router/release/angular-ui-router.js"&&/script&& & &script src="js/app.js"&&/script&
&/head&&body ng-app="App" ng-controller="MainController"&
&div ui-view&&/div&&/body&&/html&
angular.module('App', ['ui.router'])
& & .config(function ($stateProvider, $urlRouterProvider, routerProvider) {& & & & $stateProvider& & & & & & .state('home', {& & & & & & & & url: '/home',& & & & & & & & templateUrl: 'templates/home.html'& & & & & & });
& & & & $urlRouterProvider.otherwise('/home');& & })
& & .controller('MainController', function ($scope, router) {& & & & $scope.reload = function() {& & & & & & router.setUpRoutes();& & & & };& & });
我们仅定义了一个称为 'home'的状态。如果我们需要更多的状态，只需要在 config() 增加更多的function即可。在这篇文章中，我们将会使用JSON文件方式添加更多的状态，而不是在代码中去写死。
Linux下JSON库的编译及代码测试
jQuery 获取JSON数据[$.getJSON方法]
用jQuery以及JSON包将表单数据转为JSON字符串
下面是我们在JSON中定义的状态:
{& & "xxx": {& & & & "url": "/xxx",& & & & "templateUrl": "templates/xxx.html"& & },
& & "yyy": {& & & & "url": "/yyy",& & & & "templateUrl": "templates/yyy.html"& & },
& & "zzz": {& & & & "url": "/zzz",& & & & "templateUrl": "templates/zzz.html"& & }}
现在我们的应用变成这样了:
angular.module('App', ['ui.router', 'Routing'])
& & .config(function ($stateProvider, $urlRouterProvider, routerProvider) {& & & & $stateProvider& & & & & & .state('home', {& & & & & & & & url: '/home',& & & & & & & & templateUrl: 'templates/home.html'& & & & & & });
& & & & $urlRouterProvider.otherwise('/home');
& & & & routerProvider.setCollectionUrl('js/routeCollection.json');& & })
& & .controller('MainController', function ($scope, router) {& & & & $scope.reload = function() {& & & & & & router.setUpRoutes();& & & & };& & });
我们可以看到现在正在使用 'Routing'
angular.module('Routing', ['ui.router'])& & .provider('router', function ($stateProvider) {
& & & & var urlC
& & & & this.$get = function ($http, $state) {& & & & & & return {& & & & & & & & setUpRoutes: function () {& & & & & & & & & & $http.get(urlCollection).success(function (collection) {& & & & & & & & & & & & for (var routeName in collection) {& & & & & & & & & & & & & & if (!$state.get(routeName)) {& & & & & & & & & & & & & & & & $stateProvider.state(routeName, collection[routeName]);& & & & & & & & & & & & & & }& & & & & & & & & & & & }& & & & & & & & & & });& & & & & & & & }& & & & & & }& & & & };
& & & & this.setCollectionUrl = function (url) {& & & & & & urlCollection =& & & & }& & })
& & .run(function (router) {& & & & router.setUpRoutes();& & });
'Routing' 提供了一个叫做 'router' 的provider方法可以获取到JSON文件并构建各种状态。
这是一个设想的证明过程。
还有一些问题 (如果你知道怎么解决请告诉我):
直到我们从一个http请求加载了各种状态为止, angular 应用在加载的时候没有得到所有的状态, 所以我们要使用老的方式至少加载第一个状态。
我们可以在应用运行的时候重新加载状态。我们可以新加状态，但是我们没法改变已经存的的状态。
你可以在我的
帐户上看例子。
带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
AngularJS 之 Factory vs Service vs Provider
AngularJS 的详细介绍：AngularJS 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
& (08/11/:34)
& (06/01/:15)
& (08/11/:41)
& (06/04/:30)
& (02/17/:35)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款