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
Angular-新闻列表页
{ {item.title}}
{ {item.content | stripHTML}}
查看详情
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
Angular-详情页
{ {data.title}}
{ {data.date|format}}
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);}
});
更多相关：
-
//方法1----------------------------------------document.write("");//方法2----------------------------------------/** 动态加载JS @para...
项目结构 news.html（新闻列表文件）
xBIM 实战01 在浏览器中加载IFC模型文件
系列目录 【已更新最新开发文章，点击查看详细】 一、创建Web项目 打开VS，新建Web项目，选择 .NET Framework 4.5 选择一个空的项目 新建完成后，项目结构如下： 二、添加webServer访问文件类型 由于WexXplorer 加载的是 .wexBIM格式的文件或者文件流，所以需要在W...
编译环境Eigen3+CUDA9.2+VS2015 错误如下： 解决方式： 将Eigen中的JacobiSVD and BDCSVD里的Index用Eigen::Index替换 http://eigen.tuxfamily.org/dox-devel/TopicCUDA.html http://eigen.tuxfami...
一个数组存储了非负整型数据，数组中的第i个元素a[i]，代表了可以从数组第i个 位置最多向前跳跃a[i]步;已知数组各元素的情况下，求是否可以从数组的第0个位置跳跃到数组的最后一个元素的位置，返回是true或者false判断是否能够跳跃到结尾 例如: nums = [2, 3, 1, 1, 4] ，可以从nums[0] = 2 跳跃...
d定义: pandas是一个强大的Python数据分析的工具包。 pandas是基于NumPy构建的。 安装方法: pip install pandas import pandas as pd pandas的主要功能 具备对其功能的数据结构DataFrame、Series 集成时间序列功能 提供丰富的数学运算和操作 灵活处理缺失数据...
using System; using System.Text; using System.Security.Cryptography; using System.Web; using System.IO;namespace Thinhunan.Cnblogs.Com.RSAUtility {public class PemCo...
错误信息：ORA-01502: index 'VOX_ID' or partition of such index is in unusable state 原因：将表的表空间做了更改，导致索引失效。表移动表空间，需要重建索引。 解决方法：alter index vox_id rebuild 问题查找： SQL> select i...
/*清空控制台信息*/function clearConsole() {console.clear();let fontFamily = "微软雅黑";let fontSize = 40;let fontWeight = "bold";let backgroundColor = "green";console.log("%c有...
现在时刻