基于Angular的【微信精选】应用
2017-03-07 本文已影响547人
无穷369
angular.png
最近学习了一下AngularJS这个框架，并且运用聚合的API写了一个微信精选应用。现来和大家分享一下我的学习心得。
效果图如下
1234.png
Angular.js 是一个MVC模式的JavaScript框架。它使用了不同的方法，去尝试补足HTML本身在构建应用方面的缺陷。它可以让浏览器识别新的语法，例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
那么我们是如何来集成这个框架的呢？很简单，首先我们去官网下载Angular
Angular下载：http://www.apjs.net/
然后我们来构建Angular项目的目录结构，如下图
angu.png
在html里采用类似这样的结构
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body ng-controller="GreetCtrl">
Hello {{text}}!
</body>
</html>
{{text}}内容通过控制器获取数据，控制器代码如下
function GreetCtrl($scope) {
$scope.text = 'World';
}
这是一个最简单的Angular实例，更多内容请看Angular开发文档
Angular开发文档：http://www.apjs.net/
下面是我项目的源码
index页面
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title>微信精选</title>
<script src="./node_modules/angular/angular-1.3.0.js"></script>
<script src="./script/ViewController.js"></script>
<script src="./script/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style/mui.min.css">
<link rel="stylesheet" type="text/css" href="./style/H-ui.reset.css">
<style type="text/css">
header{
background: #555;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
position: fixed;
}
</style>
</head>
<body>
<!--app头部导航-->
<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #555">
<h1 class="mui-center mui-title" style="color: #fff;">微信精选</h1>
</div>
<div ng-controller="GreetCtrl">
<ul class="mui-table-view" style="margin-top: 40px;">
<li class="mui-table-view-cell mui-media" ng-repeat="item in items" ng-click="click(item.url)">
<a href="javascript:;">
<div class="mui-media-body">
<p class='mui-ellipsis'>{{item.title}}</p>
来源：{{item.source}}
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
控制器
var prefix = 'html5_weixin_'
//读取
var StorageGetter = function(key){
return localStorage.getItem(prefix + key);
}
//存储
var StorageSetter = function(key,val){
return localStorage.setItem(prefix + key,val);
}
function GreetCtrl($scope) {
$.ajax({
type: 'POST',
url: 'http://v.juhe.cn/weixin/query',
data:{
pno:'1',
ps:'20',
dtype:'json',
key:'a13e2da7eb01313760fb4c85e5f31eec'
},
dataType: 'json',
success: function(data){
console.log(data.result);
$scope.$apply(function(){
$scope.items = data.result.list;
$scope.click = function (code) {
console.log(code);
StorageSetter('url',code);
window.location.href='./views/content.html';
};
});
}
});
}
function Ctrl($scope,$sce) {
$scope.url = $sce.trustAsResourceUrl(StorageGetter('url'));
}
文章详情页
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title>微信精选</title>
<script src="../node_modules/angular/angular-1.3.0.js"></script>
<script src="../script/ViewController.js"></script>
<script src="../script/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style/mui.min.css">
<link rel="stylesheet" type="text/css" href="../style/H-ui.reset.css">
<style type="text/css">
header{
background: #555;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
position: fixed;
}
</style>
</head>
<body>
<!--app头部导航-->
<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #555">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span id="btn" class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title" style="color: #fff;">微信精选</h1>
</div>
<div ng-controller="Ctrl">
<iframe id="iframe_id" width="100%" height="667px" style="margin-top: 40px;" ng-src="{{url}}"></iframe></div>
</body>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
window.location.href='../index.html';
});
})
</script>
</html>
注意
在请求接口的时候会涉及到跨域请求，所以我们要在谷歌浏览器上安装Allow-Control-Allow-Origin *这个插件。并且添加这个网址http://v.juhe.cn/weixin/query
456.png
chajian.png
由于墙的原因我们无法直接在谷歌应用商城上安装插件，所以我们要借助天行网络加速器来完成。到百度上搜索天行VPN，安装客户端，每天可以免费领取1个小时免费使用时长。
tianxin.png
