Created
June 2, 2016 05:35
-
-
Save anonymous/2b120de65ad6875888085d94dc6c36c7 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/weguzoh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script> | |
<style> | |
a, a:hover { | |
text-decoration: none; | |
} | |
#content{ | |
border:2px solid #e5e5e5; | |
overflow: hidden; | |
} | |
#leftpanel{ | |
background-color: #f8f8f8; | |
width: 120px; | |
float: left; | |
min-height:100%; | |
} | |
#right{ | |
background-color:#fff; | |
padding-left: 120px;} | |
#rightpanel{ | |
height:100%; | |
} | |
.date{ | |
font-size: 12px; | |
color:#999; | |
} | |
.content{ | |
background-color: lightyellow; | |
display: inline-block; | |
} | |
#container{ | |
margin: 10px; | |
} | |
table th { | |
white-space: nowrap; | |
font-weight: bold; | |
} | |
table td { | |
padding: 2px 6px; | |
} | |
.table-striped tr:nth-child(odd) td { | |
background-color: #f8f5f0; | |
} | |
.clearfix:after,.clearfix:before { | |
display: table; | |
content: ""; | |
line-height: 0 | |
} | |
.clearfix:after { | |
clear: both | |
} | |
.fl { | |
float: left; | |
} | |
.fr { | |
float: right; | |
} | |
</style> | |
<!-- template --> | |
<div ng-app="NewsPub"> | |
<script type="text/ng-template" id="list.html"> | |
<table width="100%" border="1" style="border-collapse:collapse;" class="table-striped"> | |
<thead> | |
<tr> | |
<th><a href="javascript:;" ng-click="sortType = 'id';sortReverse=!sortReverse">id</a></th> | |
<th>title</th> | |
<th>content</th> | |
<th><a href="javascript:;" ng-click="sortType = 'date';sortReverse=!sortReverse">publish date</a></th> | |
<th>options</th> | |
</tr> | |
</thead> | |
<tr ng-repeat="news in newsList | orderBy:sortType:sortReverse | filter: searchText"> | |
<td>{{news.id}}</td> | |
<td><a ng-href='#/detail/{{news.id}}'>{{news.title}}</a></td> | |
<td>{{news.content}}</td> | |
<td>{{news.date | date: 'yyyy-MM-dd' }}</td> | |
<td> | |
<a ng-href="#/edit/{{news.id}}">edit</a> | |
<a href="javascript:;" ng-click="removeItem(news)">delete</a> | |
</td> | |
</tr> | |
</table> | |
</script> | |
<script type="text/ng-template" id="add.html"> | |
<form ng-submit="add()"><h1>add news</h1> | |
title: <input type="text" ng-model="title" placeholder="title..."><br> | |
<p>content: </p> | |
<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;" | |
placeholder="contents..."></textarea> | |
<br> | |
<button>submit</button> | |
</form> | |
</script> | |
<script type="text/ng-template" id="edit.html"> | |
<form ng-submit="update()"> | |
<h1>edit news{{news.id}}</h1> | |
titl: <input type="text" ng-model="news.title"><br> | |
<p>content: </p><textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br> | |
<button>submit</button> | |
</form> | |
</script> | |
<!-- contents --> | |
<script type="text/ng-template" id="detail.html"> | |
<a href="#/list">back to list</a> | |
<div id="container"> | |
<a ng-href="#/edit/{{news.id}}">edit</a> | |
<h1>{{news.title}}</h1> | |
<p> | |
<span class="date">publish date {{news.date | date: 'yyyy-MM-dd' }}</span> | |
</p> | |
<div class="content">content: {{news.content}}</div> | |
</div> | |
</script> | |
<!-- basic --> | |
<div class="clearfix"> | |
<h1 class="fl">news publish system</h1> | |
<form class="fr"> | |
<input type="text" ng-model="searchText" placeholder="search news"/> | |
<input type="button" value="Search"/> | |
</form> | |
</div> | |
<div id="content"> | |
<div id="leftpanel"> | |
<ul> | |
<li><a href="#/list">news list</a></li> | |
<li><a href="#/add">publish</a></li> | |
</ul> | |
</div> | |
<div id="right" ng-controller="mainController"> | |
<div id="rightpanel" ng-view>contents</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var app = angular.module('NewsPub', ['ngRoute']); | |
// route | |
app.config(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.controller('mainController',['$scope', '$rootScope', function($scope, $rootScope) { | |
$rootScope.newsList =[{ | |
id : 1, | |
title : 'title 1111', | |
content : 'content 1111111', | |
date : '1415002691359' | |
},{ | |
id : 2, | |
title : 'title 2222', | |
content : 'content 2222222', | |
date : new Date() | |
},{ | |
id : 3, | |
title : 'title 3333', | |
content : 'content 3333333', | |
date : new Date() | |
},{ | |
id : 4, | |
title : 'title 4444', | |
content : 'content 4444444', | |
date : new Date() | |
},{ | |
id : 5, | |
title : 'title 5555', | |
content : 'content 5555555', | |
date : new Date() | |
},{ | |
id : 6, | |
title : 'title 6666', | |
content : 'content 6666666', | |
date : new Date() | |
},{ | |
id : 7, | |
title : 'title 7777', | |
content : 'content 7777777', | |
date : new Date() | |
}]; | |
if (angular.isDefined(window.localStorage.newsList)) { | |
$rootScope.newsList = JSON.parse(window.localStorage.newsList); | |
} else { | |
window.localStorage.newsList = JSON.stringify($rootScope.newsList); | |
// = newsList; | |
} | |
$scope.$watch('newsList', function () { | |
// save to local storage | |
window.localStorage.newsList = JSON.stringify($rootScope.newsList); | |
},true) | |
}]) | |
// news list | |
app.controller('ListController',['$scope', '$rootScope',function($scope, $rootScope){ | |
// $scope.newsList = newsList; | |
// this | |
// news remove | |
$scope.removeItem = function(news) { | |
var index = $rootScope.newsList.indexOf(news); | |
if (confirm('confirm to remove this item?')) { | |
$rootScope.newsList.splice(index,1); | |
} | |
} | |
}]); | |
// news detail | |
app.controller('DetailController',function($scope, $rootScope, $routeParams){ | |
$scope.news = $rootScope.newsList[$routeParams.id-1]; | |
}); | |
// news add | |
app.controller('AddController',function($scope, $rootScope, $location){ | |
$scope.title = ''; | |
$scope.content = ''; | |
$scope.add = function(){ | |
$rootScope.newsList.push({ | |
id : $rootScope.newsList.length+1, | |
title : $scope.title, | |
content : $scope.content, | |
date : new Date() | |
}); | |
$location.path('list'); | |
} | |
}); | |
// news edit | |
app.controller('EditController',function($scope, $rootScope, $routeParams, $location){ | |
$scope.news = $rootScope.newsList[$routeParams.id-1]; | |
$scope.update = function(){ | |
$rootScope.newsList[$routeParams.id-1] = $scope.news; | |
$location.path('list'); | |
} | |
}) | |
</script> | |
<script id="jsbin-source-html" type="text/html"><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.min.js"><\/script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"><\/script> | |
<style> | |
a, a:hover { | |
text-decoration: none; | |
} | |
#content{ | |
border:2px solid #e5e5e5; | |
overflow: hidden; | |
} | |
#leftpanel{ | |
background-color: #f8f8f8; | |
width: 120px; | |
float: left; | |
min-height:100%; | |
} | |
#right{ | |
background-color:#fff; | |
padding-left: 120px;} | |
#rightpanel{ | |
height:100%; | |
} | |
.date{ | |
font-size: 12px; | |
color:#999; | |
} | |
.content{ | |
background-color: lightyellow; | |
display: inline-block; | |
} | |
#container{ | |
margin: 10px; | |
} | |
table th { | |
white-space: nowrap; | |
font-weight: bold; | |
} | |
table td { | |
padding: 2px 6px; | |
} | |
.table-striped tr:nth-child(odd) td { | |
background-color: #f8f5f0; | |
} | |
.clearfix:after,.clearfix:before { | |
display: table; | |
content: ""; | |
line-height: 0 | |
} | |
.clearfix:after { | |
clear: both | |
} | |
.fl { | |
float: left; | |
} | |
.fr { | |
float: right; | |
} | |
</style> | |
<\!-- template --> | |
<div ng-app="NewsPub"> | |
<script type="text/ng-template" id="list.html"> | |
<table width="100%" border="1" style="border-collapse:collapse;" class="table-striped"> | |
<thead> | |
<tr> | |
<th><a href="javascript:;" ng-click="sortType = 'id';sortReverse=!sortReverse">id</a></th> | |
<th>title</th> | |
<th>content</th> | |
<th><a href="javascript:;" ng-click="sortType = 'date';sortReverse=!sortReverse">publish date</a></th> | |
<th>options</th> | |
</tr> | |
</thead> | |
<tr ng-repeat="news in newsList | orderBy:sortType:sortReverse | filter: searchText"> | |
<td>{{news.id}}</td> | |
<td><a ng-href='#/detail/{{news.id}}'>{{news.title}}</a></td> | |
<td>{{news.content}}</td> | |
<td>{{news.date | date: 'yyyy-MM-dd' }}</td> | |
<td> | |
<a ng-href="#/edit/{{news.id}}">edit</a> | |
<a href="javascript:;" ng-click="removeItem(news)">delete</a> | |
</td> | |
</tr> | |
</table> | |
<\/script> | |
<script type="text/ng-template" id="add.html"> | |
<form ng-submit="add()"><h1>add news</h1> | |
title: <input type="text" ng-model="title" placeholder="title..."><br> | |
<p>content: </p> | |
<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;" | |
placeholder="contents..."></textarea> | |
<br> | |
<button>submit</button> | |
</form> | |
<\/script> | |
<script type="text/ng-template" id="edit.html"> | |
<form ng-submit="update()"> | |
<h1>edit news{{news.id}}</h1> | |
titl: <input type="text" ng-model="news.title"><br> | |
<p>content: </p><textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br> | |
<button>submit</button> | |
</form> | |
<\/script> | |
<\!-- contents --> | |
<script type="text/ng-template" id="detail.html"> | |
<a href="#/list">back to list</a> | |
<div id="container"> | |
<a ng-href="#/edit/{{news.id}}">edit</a> | |
<h1>{{news.title}}</h1> | |
<p> | |
<span class="date">publish date {{news.date | date: 'yyyy-MM-dd' }}</span> | |
</p> | |
<div class="content">content: {{news.content}}</div> | |
</div> | |
<\/script> | |
<\!-- basic --> | |
<div class="clearfix"> | |
<h1 class="fl">news publish system</h1> | |
<form class="fr"> | |
<input type="text" ng-model="searchText" placeholder="search news"/> | |
<input type="button" value="Search"/> | |
</form> | |
</div> | |
<div id="content"> | |
<div id="leftpanel"> | |
<ul> | |
<li><a href="#/list">news list</a></li> | |
<li><a href="#/add">publish</a></li> | |
</ul> | |
</div> | |
<div id="right" ng-controller="mainController"> | |
<div id="rightpanel" ng-view>contents</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var app = angular.module('NewsPub', ['ngRoute']); | |
// route | |
app.config(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.controller('mainController',['$scope', '$rootScope', function($scope, $rootScope) { | |
$rootScope.newsList =[{ | |
id : 1, | |
title : 'title 1111', | |
content : 'content 1111111', | |
date : '1415002691359' | |
},{ | |
id : 2, | |
title : 'title 2222', | |
content : 'content 2222222', | |
date : new Date() | |
},{ | |
id : 3, | |
title : 'title 3333', | |
content : 'content 3333333', | |
date : new Date() | |
},{ | |
id : 4, | |
title : 'title 4444', | |
content : 'content 4444444', | |
date : new Date() | |
},{ | |
id : 5, | |
title : 'title 5555', | |
content : 'content 5555555', | |
date : new Date() | |
},{ | |
id : 6, | |
title : 'title 6666', | |
content : 'content 6666666', | |
date : new Date() | |
},{ | |
id : 7, | |
title : 'title 7777', | |
content : 'content 7777777', | |
date : new Date() | |
}]; | |
if (angular.isDefined(window.localStorage.newsList)) { | |
$rootScope.newsList = JSON.parse(window.localStorage.newsList); | |
} else { | |
window.localStorage.newsList = JSON.stringify($rootScope.newsList); | |
// = newsList; | |
} | |
$scope.$watch('newsList', function () { | |
// save to local storage | |
window.localStorage.newsList = JSON.stringify($rootScope.newsList); | |
},true) | |
}]) | |
// news list | |
app.controller('ListController',['$scope', '$rootScope',function($scope, $rootScope){ | |
// $scope.newsList = newsList; | |
// this | |
// news remove | |
$scope.removeItem = function(news) { | |
var index = $rootScope.newsList.indexOf(news); | |
if (confirm('confirm to remove this item?')) { | |
$rootScope.newsList.splice(index,1); | |
} | |
} | |
}]); | |
// news detail | |
app.controller('DetailController',function($scope, $rootScope, $routeParams){ | |
$scope.news = $rootScope.newsList[$routeParams.id-1]; | |
}); | |
// news add | |
app.controller('AddController',function($scope, $rootScope, $location){ | |
$scope.title = ''; | |
$scope.content = ''; | |
$scope.add = function(){ | |
$rootScope.newsList.push({ | |
id : $rootScope.newsList.length+1, | |
title : $scope.title, | |
content : $scope.content, | |
date : new Date() | |
}); | |
$location.path('list'); | |
} | |
}); | |
// news edit | |
app.controller('EditController',function($scope, $rootScope, $routeParams, $location){ | |
$scope.news = $rootScope.newsList[$routeParams.id-1]; | |
$scope.update = function(){ | |
$rootScope.newsList[$routeParams.id-1] = $scope.news; | |
$location.path('list'); | |
} | |
}) | |
<\/script> | |
</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment