angularJs - cynthia娆墨旧染－响应式文章发布系统
（0）功能
a.添加新文章
b.修改已发布文章
c.搜索已经发布的文章
d.demo链接: http://cynthiawupore.github.io/angularJS
（1）界面
a.文章列表页
b.文章详细页
c.文章添加页
d.文章修改页
（2）html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章发布系统</title> <script src="../build/angular.min.js" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="autor" content="cynthia娆墨旧染">
<meta name="robots" content="cynthia娆墨旧染">
<meta name="Generator" content="Atom">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="windows-Target" content="_top">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css.css" media="screen" title="no title" charset="utf-8">
<script src="../build/angular.min.js" charset="utf-8"></script>
<script src="../build/angular-route.min.js" charset="utf-8"></script>
</head>
<body>
<div class="cynthia-post" ng-app="NewsPub">
<ul class="cynthia-nav">
<li>
<a href="#/list">文章列表</a>
</li>
<li>
<a href="#/add">写文章</a>
</li>
<li style='float: right;margin-right: 2%;'>
<input type="text" name="name" value="" ng-model='search' placeholder="关键字搜索" class="cynthia-search" >
</li>
</ul>
<div class="" ng-view></div> <!-- list -->
<script type="text/ng-template" id="list.html">
<div class="">
<ul class="cynthia-list">
<li ng-repeat="news in newsList | filter:search" >
<img src="1.png" alt="" />
<div class="cynthia-list-item">
<a href="#/detail/{{news.id}}">{{news.id}}.{{news.title}}</a>
<p>
{{news.content}}
</p>
<time>时间：{{news.date}}</time>
</div>
</li>
</ul>
</div> </script> <!-- add -->
<script type="text/ng-template" id="add.html">
<div class="cynthia-add">
<input type="text" name="name" value="" class="cynthia-add-title" ng-model="title" placeholder="输入文章标题">
<textarea cols="30" rows="10" class="cynthia-add-content" ng-model="content" placeholder="输入文章内容"></textarea>
<input type="button" name="name" value="提交" class="cynthia-add-submit" ng-click="add()">
</div>
</script> <!-- edit -->
<script type="text/ng-template" id="edit.html">
<div class="cynthia-add">
<input type="text" name="name" value="" class="cynthia-add-title" ng-model="news.title">
<textarea cols="30" rows="10" class="cynthia-add-content" ng-model="news.content"></textarea>
<input type="button" name="name" value="提交" class="cynthia-add-submit" ng-click="update()">
</div>
</script> <!-- detail -->
<script type="text/ng-template" id="detail.html">
<div class="cynthia-detail">
<h1>{{news.title}}</h1>
<hr>
<p>
{{news.content}}
</p>
<time>时间： {{news.date}}</time>
<br>
<a href="#/edit/{{news.id}}" class="cynthia-edit-btn">重新编辑</a>
</div>
</script> </div>
</body> <script type="text/javascript">
var app = angular.module('NewsPub', ['ngRoute']);
function routeConfig($routeProvider){
$routeProvider.
when('/', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/detail/:id', {
controller: 'DetailController',
templateUrl: 'detail.html'
}).
when('/edit/:id', {
controller: 'EditController',
templateUrl: 'edit.html'
}).
when('/list', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/add', {
controller: 'AddController',
templateUrl: 'add.html'
}).
otherwise({
redirectTo: '/'
});
}; app.config(routeConfig); var newsList = [
{
id : 1,
title : '娆声酒染',
content : '被理科的纯黑纯白浸染久了，很多感觉变得迟钝，再也写不出那年窗下的马蹄江山和安静沧桑。那样的青石板街，那样的细碎夕阳，只叹一句片片往事伤。很多时候有很多感慨，但是只要面对着编辑器，面对着一行行代码，很快华丽的辞藻便消失得无影无踪。我不知道是否有女生和我一样，从一个怀揣公主梦的年纪，到自己亲手撕碎自己所有的幻想，变成像一个汉子一样战斗，不再依赖任何人，靠着自己的双手给人生上色一个缤纷童话。或许是成长，或许是成熟，但是心里，有什么地方空了下来。当情绪可以很好得控制，做事也可以想得很有逻辑，是非曲直很明白。不知道是幸，还是不幸。一夜风霜。越发发现最好释怀的地方却是KTV，可以安静听着某个朋友在某句歌词里投入的情绪，猜测他所经历的事情，也可以点首嗨歌把悲伤吼得撕心裂肺。对于背后的故事，我们只字不提。一群人的狂欢里尝着自己的孤单。上海很繁华，却也很落寞。可以很快聚集一批人陪你笑谈人生，却也孤单到想找个人说说心里话也不能。我们需要正能量地活着，所有的悲伤都不适合出现在朋友圈。忙碌可以让你情绪平复，然后不悲不喜。浮生一劫又一节，谁的曲折浸染了酒味揉进了绕梁的歌声里？',
date : new Date()
},
{
id : 2,
title : '《活着》（作者：余华） 读后感',
content : '作者下乡去收录民谣在田野里遇到一个老汉正在和牛老说好多名字，觉得好奇，就问老汉为什么一头牛有那么多名字。于是通过老汉的视角，第一人称回忆老汉的一生。老汉叫富贵，年轻的时候是一纨绔子弟，娶得是米行老板的千金家珍，他们家到他这一代是第三代。到他这一代在他手里把家产通过赌博全部输给了龙二。他爹，他娘，他儿子，他媳妇，他女儿，他女婿，他外孙...这些人在土地改革、文化大革命的背景下陆续因为各种原因死去。他爹被他气着摔死在蹲了一辈子的粪缸上。他娘在他被抓去当兵期间病死了。他儿子有庆是因为给县长（和富贵一起被抓壮丁，一起打过战）的女人输血被抽干死。他媳妇家珍得了软骨病加上受不了儿子的去世也就跟着去了。他女儿凤霞早年一场高烧后又聋又哑，后来也因为生孩子雪崩死的。他女婿二喜是个歪头，在工地上干活被掉下来的板块压死的。他的外孙苦根更是因为太久没吃饱在吃豆子的时候噎死的。最后只剩下富贵自己和一头老牛，老牛名字也叫富贵。而这一本不断死人的书，名字却叫活着。富贵的一生都在忍受亲人的去世。或许告诉我们：1.生命是一场不断失去的过程。2.生命是坚韧的，再多的悲痛都不能将其轻易打倒。3.死去的人未必不是幸福的，活着的人要带着所有关于死去的人的一生活下去。',
date : new Date()
},
]; app.controller('ListController',function($scope){
$scope.newsList = newsList;
}); app.controller('DetailController',function($scope, $routeParams){
$scope.news = newsList[$routeParams.id-1];
}); app.controller('AddController',function($scope,$location){
$scope.title = '';
$scope.content = '';
$scope.add = function(){
newsList.push({
id : newsList.length+1,
title : $scope.title,
content : $scope.content,
date : new Date()
}); $location.path('list');
}
}); app.controller('EditController',function($scope, $routeParams, $location){
$scope.news = newsList[$routeParams.id-1];
$scope.update = function(){
newsList[$routeParams.id-1] = $scope.news; $location.path('list');
}
})
</script>
</html>
(3)css源码
*{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
background: #fff;
font-family: "Microsoft Yahei";
font-size: 14px;
}
a{
color: #555555;
text-decoration: none;
}
a:hover{
cursor: pointer;
}
p{
color: #555555;
font-size: 12px;
line-height: 200%;
}
time{
font-size: 12px;
color: #ccc;
}
li{
list-style: none;
float: left;
}
.cynthia-post{
margin: 2%;
width: 90%;
padding: 3%;
height: auto;
}
/*nav*/
.cynthia-nav{
height: auto;
overflow: auto;
padding-bottom: 2%;
border-bottom: 2px #ddd solid;
}
.cynthia-nav li{
padding: 0 2%;
height: auto;
display: block;
}
.cynthia-search{
width: 100%;
height: 25px;
border: 1px #ddd solid;
padding:0 3%;
background: url(search.png) right no-repeat;
background-size: 20px 20px;
}
/*list*/
.cynthia-list{
width: 100%;
}
.cynthia-list li{
width: 95%;
margin-left: 5%;
border-left: 1px #ddd solid;
}
.cynthia-list li a{
color: #4094c7;
font-size: 16px;
}
.cynthia-list li p{
margin-top: 10px;
}
.cynthia-list li img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: -25px;
margin-top:20px;
border: 2px #ddd solid;
}
.cynthia-list-item{
width: 91%;
margin-left: 5%;
padding:2%;
background: #f5f5f5;
}
/*add*/
.cynthia-add{
margin: 2%;
width: 90%;
padding: 3%;
height: auto;
}
.cynthia-add-title{
width: 94%;
margin: 0 auto;
border: 1px #ddd solid;
min-height: 50px;
padding: 2%;
font-size: 18px;
color: #333;
}
.cynthia-add-content{
width: 94%;
margin: 0 auto;
border: 1px #ddd solid;
min-height: 450px;
padding: 2%;
margin-top: 10px;
font-size: 14px;
color: #333;
}
.cynthia-add-submit{
width: 30%;
height: 40px;
background: #4094c7;
font-size: 16px;
color: #fff;
margin-top: 10px;
}
.cynthia-add-submit:hover{
cursor: pointer;
}
/*detail*/
.cynthia-detail{
margin: 2%;
width: 90%;
padding: 3%;
height: auto;
}
.cynthia-detail h1{
padding: 3% 0;
}
.cynthia-detail time{
display: inline-block;
padding: 3% 0;
}
.cynthia-edit-btn{
display: inline-block;
width: 25%;
height: 40px;
background: #4094c7;
font-size: 16px;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 40px;
}
angularJs - cynthia娆墨旧染－响应式文章发布系统的更多相关文章
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- 响应式Asp.net MVC企业网站源码
最近时间充裕,自己写了一个响应式MVC企业网站系统,用于回顾自己的MVC知识.网站源码后台和前台都采用响应式布局,可以适应不同的屏幕. 一.源码描述 响应式企业网站系统,前台和后台都采用了响应式布局, ...
- vue学习之响应式原理的demo实现
Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...
- 【转】【翻译】对响应式SVG的再思考
来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- [转]响应式WEB设计学习(2)—视频能够做成响应式吗
原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式布局：Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
- 初探响应式Web设计
公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...
随机推荐
- Android开发之如何避免ANR（Keeping Your App Responsive）
一:什么是ANR 如果应用程序不能响应用户的输入了,那么就可以说应用ANR了. 如果需要运行一个耗时较长的操作的时候,不要把这个任务放在UI线程上运行,而是单独创建一个线程运行那些操作. 以下情况会出 ...
- 开源网盘云存储 Seafile
摘要: Seafile 是一款安全.高性能的开源网盘(云存储)软件.Seafile 提供了主流网盘(云盘)产品所具有的功能,包括文件同步.文件共享等.在此基础上,Seafile 还提供了高级的安全保护 ...
- 第41节：Java当中的类集框架
Java当中的类集框架 类集框架,那么什么是类集框架,集合的种类有哪些,类集框架的基础结构. 类集框架是一组类和接口的集合,位于java.util包当中,是用来用户存储和管理对象的,在这个类集合框架中 ...
- [原创] 详解云计算网络底层技术——虚拟网络设备 tap/tun 原理解析
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 在云计算时代, ...
- 我面试过没有上万人也有十几个，简历要这么写才有hr要你
今天终于有时间好好给大家写写关于如何写简历,给自己加分了. 这篇文章拖了很久了应该说,本来想在上周写的,但是事情实在是太多,又不想草草了事,所以搁置到现在.今天早上正好空出来了,就马上给大家码出来了. ...
- Mac eos 环境搭建
最近EOS官网出了文档,说可以跑通一个独立测试的节点了.这周尝试自行搭建了一下,由于自己不完全做mac下的开发,且这玩意是C写的,所以make起来遇到不少坑,记录下来.附完整踩坑.填坑记录. 1. 搭 ...
- springBoot(9)---定时任务,异步任务
定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...
- 在Mac OSX上配置Appium+Android自动化测试环境
前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...
- Linux centos 7/ubantu下： 用 C 语言连接 MySQL数据库
前言:最近用IPC.socket做ATM.聊天项目,考虑到需要用到数据库,所以总结一下centos.ubantu环境下怎么用C语言操作数据库,例如常见的增删改查等! 一.Centos环境安装mysql ...
- 微信公众号开发模型WeChat
模型:WeChat (回复参考weiphp) <?php namespace Org; /** * 微信开发工具类 * Class WeChat * Author chenqionghe * @ ...