一些不错的网址

最新推荐文章于 2023-10-16 13:38:38 发布

toumingyumaohuiyi

最新推荐文章于 2023-10-16 13:38:38 发布

阅读量848

点赞数

分类专栏：前端

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

基于requireJS和angularJS的前端技术架构

http://blog.163.com/liuyong_xiaxia/blog/static/17435525520156341446981/

面试中常见的前端算法题

http://web.jobbole.com/90428/

下载mongodb常用版本

http://dl.mongodb.org/dl/win32/x86_64

聊天室

http://www.jb51.net/article/71356.htm

http://www.yiibai.com/angularjs/angularjs_quick_guide.html

<html>
<script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
<script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular-route.min.js'></script>
<style type='text/css'>
#content{
border:5px solid blue;
overflow: hidden;
}
#leftpanel{
background-color: lightblue;
width: 300px;
float: left;
padding-bottom: 3000px;
margin-bottom: -3000px;
}
#right{padding-left: 300px;}
#rightpanel{
padding-bottom: 3000px;
margin-bottom: -3000px;
}
.date{
font-size: 12px;
color:#999;
}
.content{
background-color: lightyellow;
}
#container{
margin: 10px;
}
</style >
<body>
<div ng-app="NewsPub">
<script type="text/ng-template" id="list.html">
<table width="100%" border="1" style="border-collapse:collapse;">
<thead>
<td>id</td>
<td>标题</td>
<td>内容</td>
<td>发布时间</td>
</thead>
<tr ng-repeat="news in newsList">
<td>{{news.id}}</td>
<td><a href='#/detail/{{news.id}}'>{{news.title}}</a></td>
<td>{{news.content}}</td>
<td>{{news.date}}</td>
</tr>
</table>
</script>

<script type="text/ng-template" id="add.html">
<h1>添加新闻</h1>
标题：<input type="text" ng-model="title"><br>
内容：<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
<button ng-click="add()">提交</button>
</script>

<script type="text/ng-template" id="edit.html">
<h1>编辑新闻{{news.id}}</h1>
标题：<input type="text" ng-model="news.title"><br>
内容：<textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
<button ng-click="update()">提交</button>
</script>

<script type="text/ng-template" id="detail.html">
<a href="#/list">返回列表</a>
<div id="container">
<a href="#/edit/{{news.id}}">编辑</a>
<h1>{{news.title}}</h1>
<span class="date">发布日期：{{news.date}}</span>
<div class="content">正文： {{news.content}}</div>
</div>
</script>

<h1>新闻发布系统</h1>
<div id="content">
<div id="leftpanel">
<ul>
<li><a href="#/list">新闻列表</a></li>
<li><a href="#/add">发布新闻</a></li>
</ul>
</div>
<div id="right">
<div id="rightpanel" ng-view>abcd</div>
</div>
</div>
</div>
<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 : 'title 1111',
content : 'content 1111111',
date : new Date()
},{
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 : 3,
title : 'title 5555',
content : 'content 5555555',
date : new Date()
},{
id : 3,
title : 'title 6666',
content : 'content 6666666',
date : new Date()
},{
id : 3,
title : 'title 7777',
content : 'content 7777777',
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>
</body>
</html>