项目结构
css/angular-common.css
table tr td:first-child {
/**背景图片*/
width: 200px;
height: 100px;
/**居中填满*/
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
a {
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid transparent;
}
a:hover {
border-color: black;
}
.hasLink {
pointer-events: auto;
color: black;
border-bottom: 1px solid black;
}
.hasLink:hover {
color: blue;
border-bottom: 1px solid blue;
}
.noLink {
pointer-events: none;
color: lightgray;
}
._active {
background-color: red;
}
news.html
<!doctype html>
<html ng-app="app" ng-cloak>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Angular-新闻列表页</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/public/k-app-common.js"></script>
<script src="js/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/angular-common.css">
</head>
<body ng-controller="ctrl">
<div>
<table>
<tr ng-repeat="item in list">
<td style="background-image: url({{item.pic}})"></td>
<td>
<h2>{{item.title}}</h2>
<h3>{{item.content | stripHTML}}</h3>
</td>
<td>
<a ng-href="detail.html?id={{item.id}}" target="_blank">查看详情</a>
</td>
</tr>
</table>
</div>
</body>
<script src="js/news.js"></script>
</html>
js/news.js
/**angular post 请求*/
let url = 'http://your_ip:your_port/api/api_name'
const config = {
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, transformRequest: function (data) {
return $.param(data);
}
};
let app = angular.module('app', []);
app.controller('ctrl', function ($scope, $http) {
$http.post(url, {start: 0, count: 6}, config).then((r) => {
/* 请求成功执行代码*/
/* alert(JSON.stringify(r.data))*/
$scope.list = r.data.data
}, (r) => {
/* 请求失败执行代码*/
alert(JSON.stringify(r))
});
});
app.filter('stripHTML', function() {
//可以注入依赖
return function(c) {
return c.stripHTML().substring(0, 30) + "...";
}
});
detail.html
<!doctype html>
<html ng-app="app" ng-cloak>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Angular-详情页</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/public/k-app-common.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-sanitize.min.js"></script><!--奇葩的angular，用个ng-bind-html还需要依赖angular-sanitize.min.js，真是日了狗了！！！-->
<link rel="stylesheet" href="css/angular-common.css">
</head>
<body ng-controller="ctrl">
<div>
<div>
<h1>{{data.title}}</h1>
<h6>{{data.date|format}}</h6>
<p ng-bind-html="data.content"></p><!--如果不引入angular-sanitize.min.js，就会报错-->
</div>
<div>
<a ng-href="{{data.prevHref}}" target="_self" ng-class="data.hasPrevLink?'hasLink':'noLink'">[上一篇] {{data.prevTitle}}</a><br>
<a ng-href="{{data.nextHref}}" target="_self" ng-class="data.hasNextLink?'hasLink':'noLink'">[下一篇] {{data.nextTitle}}</a><br><br>
</div>
</div>
</body>
</html>
<script src="js/detail.js"></script>
js/detail.js
let url = 'http://your_ip:your_port/api/api_name'
let detailId = hash.getQueryString("id");
detailId || alert("id参数获取失败");
const config = {
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, transformRequest: function (data) {
return $.param(data);
}
};
let app = angular.module('app', ['ngSanitize']);
app.controller('ctrl', function ($scope, $http) {
$scope.data = {
title: "加载中…",
date: "",
content: "加载中…",
prevHref: "",
prevTitle: "文章标题加载中…",
nextHref: "",
nextTitle: "文章标题加载中…",
hasPrevLink: false,
hasNextLink: false,
};
$http.post(url, {id: detailId}, config).then((r) => {
/* 请求成功执行代码*/
/* alert(JSON.stringify(r.data))*/
r = r.data.data;
document.title = r.title;
$scope.data.title = r.title;
$scope.data.date = r.date;
$scope.data.content = r.content;
}, (r) => {
/* 请求失败执行代码*/
alert(JSON.stringify(r))
});
$http.post(url, {}, config).then((r) => {
/* 请求成功执行代码*/
let arr = r.data.data;
let len = arr.length;
let id = parseInt(detailId);
let index = parseInt(array.getIndexById(arr, id));
if (index <= 0) {
$scope.data.prevHref = "#";
$scope.data.prevTitle = "没有了";
$scope.data.hasPrevLink = false;
} else {
let _index_l = index - 1;
$scope.data.prevTitle = arr[_index_l].title;
$scope.data.prevHref = "detail.html?id=" + arr[_index_l].id;
$scope.data.hasPrevLink = true;
}
if (index >= len - 1) {
$scope.data.nextHref = "#";
$scope.data.nextTitle = "没有了";
$scope.data.hasNextLink = false;
} else {
let _index_n = index + 1;
$scope.data.nextTitle = arr[_index_n].title;
$scope.data.nextHref = "detail.html?id=" + arr[_index_n].id;
$scope.data.hasNextLink = true;
}
}, function () {
alert('接口请求失败！');
});
});
app.filter('format', function () {
//可以注入依赖
return function (c) {
if (c == "") return;
return date.formatDateTime(c);
}
});
