Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）
生活随笔
收集整理的這篇文章主要介紹了
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目結構
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);}
});?
總結
以上是生活随笔為你收集整理的Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决Hbuilder打包的APP微信支付
- 下一篇： 【舒工强烈推荐】命令添加Git远程仓库