AngularJS实现从本地读取静态JSON数据

最近有个功能需求,需要在Ionic框架下实现手机从本地加载JSON配置文件。AngularJS有个$http服务,可以实现读取远程服务器的数据。自己稍加改动,将其用于读取本地的JSON数据。

从$http说起

关于$http官方文档有一个严谨的说法:

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.

这里出现了JSONP,那它和JSON有关系么?我们知道JavaJavaScript的关系就跟雷锋与雷峰塔的关系一样,但是,JSONP,全称JSON with Padding,是JSON的一种『使用模式』,显然和JSON的关系很密切。

$http有一些快捷方法,其中一个是$http.get(url),它的语法如下:

$http.get('/someUrl', config).then(successCallback, errorCallback);

为了实现需要的功能,本地需要有JSON文件。在Cmd窗口中输入ionic start your-app-name blank回车,新建Ionic空白项目后,可在your-app-name\www\js\下新建data\data.json,写入如下一段数据:

{
"records": [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "biebu.xin",
"City": "Shanghai",
"Country": "China"
}]
}

这里顺手推荐一个网站JSONLint,可以在线校验和格式化JSON,方便好用。

控制器

your-app-name\www\js\controllers.js中写入:

angular.module('starter.controllers', [])
.controller('httpCtrl', function($scope, $http) {
var url = "";
if(ionic.Platform.isAndroid()){
url = "/android_asset/www/";
}
$http.get(url+"js/data/data.json")
.success(function(response) {$scope.names = response.records;});
});

这里先判断系统平台是否为安卓,如果是,相对路径则为/android_asset/www/,如果是IOS,url只需指向/www/文件夹即可。

$http.get(url)/android_asset/www/js/data/data.json中顺利读取出静态JSON数据,注意$scope.names为数组类型。

注意将控制器模块添加到your-app-name\www\js\app.jsangular.module

angular.module('starter', ['ionic', 'starter.controllers'])

HTML

先在your-app-name\www\index.html中链接controllers.js

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

再在<ion-content></ion-content>标签内写入:

<div ng-controller="httpCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>

ng-controller指令定义了AngularJS控制器,这里对应controllers.js中的httpCtrl
ng-repeat指令用在数组names上,会重复一个HTML元素。因为在控制器中已经添加$scope对象了,视图(HTML)可以获取属性names

测试

先输入cd your-app-name回车,进入到Ionic项目根目录下。再输入ionic platform add android回车,添加安卓平台。然后就可以通过ionic serve在浏览器(强烈建议Chrome)中或者通过ionic run android在安卓手机中看到本地JSON数据被读取并打印到屏幕的效果了。