基于angular的route实现单页面cnodejs

2016-03-19 17:57 @疯狂的迈步阅读(772) 评论(2) 编辑收藏举报

Angular ui-router

前言

之前不太理解前端怎么实现路由功能，以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能，在实践项目中也用过一次，后来这种操作叫成了pajax，这里有一个demo，具体怎么用可以点我

cnodejs

github想要star更多，需要时间投入开源的怀抱，让我想起了经常在cnodejs上的api，想想是不是可以做点什么，然后结合最近的工作，想起了通过api才做一个web app ，其中有一个做的很不错的，基于VUE的cnodejs webapp，可以点我看。
工作中闲下来了也想在github上打造自己的简历，然后就想起来了自己做一个类是的webapp，说好了就开始，先写好页面，页面上用的腾讯的一个UI组件，http://frozenui.github.io/，页面搭好了之后就开始用angular调用api实现功能。

功能模块

大概看了所有的类似客户端，需要一下模块：

文章列表
文章详情
用户详情
消息列表
登录
点赞、评论
关于

基于这些模块，刚开始是独立开发的，做好了文章列表和文章详情之后，发现自己没有建立路由机制，刚开始想用node，然后想想是否可以用angular做路由，就开始查谷歌，看了官方文档，确实可以实现，这里可以看官方的案例

route

看到这里了，我想告诉你，自学来说最重要的就是谷歌，很多东西走可以学到，这里放几遍对于angular route理解的文章。

对，就如第三篇文章写的，我想做一个单页面，通过angular实现路由。
然后通过这些学习，实现了一个简单的例子，界面上没有做优化，主要是功能上。戳我看在线运行实例，代码如下

index.html

<html ng-app="cnodejsapp">
	<head>
		<title>Angular.js的route单页面路由</title>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<script src="./angular.min.js"></script>
		<script src="./angular-route.min.js"></script>
		<script src="./main.js"></script>
	</head>
	<body>
		<div>
			<!-- 头部 -->
			<header id="head" class="ui-header ui-header-positive ui-border-b">
				<h1>Angular route</h1>
			</header>
			<!-- 导航 -->
			<section class="ui-container">				
				<div class="ui-label-list">
					<label class="ui-label"><a href="#/list">列表</a></label>
					<label class="ui-label"><a href="#/add">发布</a></label>
					<label class="ui-label"><a href="#/about">关于</a></label>
				</div>
			</section>
			<!-- 首页列表 -->
			<section class="ui-container">
				<br /><br />			
				<div ng-view class="view-animate"></div>
			</section>
			<!-- 列表页 -->
			<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="message in messageList">
						<td>{{message.id}}</td>
						<td><a href='#/content/{{message.id}}'>{{message.title}}</a></td>
						<td>{{message.content}}</td>
						<td>{{message.date|date:YY-mm-dd}}</td>
					</tr>
				</table>
			</script>
			<!-- 内容页 -->
			<script type="text/ng-template" id="content.html">
				<a href="#/edit/{{message.id}}">编辑</a>
                <h1>{{message.title}}</h1>
                <span class="date">发布日期：{{message.date|date:YY-mm-dd}}</span>
                <div class="content">正文：{{message.content}}</div>
			</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>编辑留言{{message.id}}</h1>
				标题：<input type="text" ng-model="message.title"><br>
				内容：<textarea ng-model="message.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
				<button ng-click="update()">提交</button>
			</script>			
			<!-- 关于页 -->
			<script type="text/ng-template" id="about.html">
				{{about}}
				<h1 ng-click="index()">点击回首页</h1>
			</script>
		</div>
	</body>
</html>

main.js

var app=angular.module('cnodejsapp',['ngRoute']);
function routeConfig($routeProvider){
	$routeProvider
	.when('/list',{controller:'ListController',templateUrl:'list.html'})
	.when('/content/:id',{controller:'ContentController',templateUrl:'content.html'})
	.when('/add',{controller:'AddController',templateUrl:'add.html'})
	.when('/edit/:id',{controller:'EditController',templateUrl:'edit.html'})
	.when('/about',{controller:'AboutController',templateUrl:'about.html'})
	.otherwise({redirectTo:'/'});
};
app.config(routeConfig);

var messageList=[{
		id : 1,
		title : 'title1',
		content : 'content1',
		date : new Date()
	},{
		id : 2,
		title : 'title2',
		content : 'content2',
		date : new Date()
	},{
		id : 3,
		title : 'title3',
		content : 'content3',
		date : new Date()
	}];
app.controller('ListController',function($scope){
	$scope.messageList=messageList;
});
app.controller('ContentController',function($scope,$routeParams){
	$scope.message=messageList[$routeParams.id-1];
});
app.controller('AddController',function($scope,$location){
	$scope.title="";
	$scope.content="";
	$scope.add=function(){
		messageList.push({
			id:messageList.length+1,
			title:$scope.title,
			content:$scope.content,
			date:new Date()
		});
		$location.path('list');
	}
	
});
app.controller('EditController',function($scope,$routeParams,$location){
	$scope.message=messageList[$routeParams.id-1];
	$scope.update=function(){
		messageList[$routeParams.id-1]=$scope.message;
		$location.path('list');
	}
});
app.controller('AboutController',function($scope,$location){
	$scope.about="该项目是基于Angular的route项目，实现单页面路由功能";
	$scope.index=function(){
		$location.path('list');
	}
});

做好了这个的时候已经是3月19日晚上一两点了，第二天早上睡不着就爬起来了把剩下的cnodejs的功能实现，然后把路由功能做好就差不多可以看了。
代码上也就是两个文件index.html和index.js，其中用到了<script type="text/ng-template" id="index.html">作为模板来使用，也没有单独建立文件。
其他的实现基本上上angular的基础，具体代码可以到github:https://github.com/junhey/Angular-Cnodejs上看，欢迎star。
如果你对ng-template迷惑，这里说明下Angular Template

Angular 模板

通过<script>或者 $templateCache 添加，通过这两种方式添加的模板存在于内存中，请求模板的时候不会发起 HTTP 请求。除了这种方式，可以通过 HTTP 直接请求单独的模板文件。

模板请求的循序优先级从高到低为：

<script> 方式 > $templateCache > 独立的模板文件

通过angular的功能可以直接把页面放在一个页面上，当然也可以分开，考虑到性能方面，建议分开放。

其中还可以通过$templateCache 服务服务添加模板，代码如下：

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

也可以在 HTML 中通过 ng-include 加载模板：

<div ng-include=" 'templateId.html' "></div>

也可以通过 Javascript 加载:

$templateCache.get('templateId.html')

$templateCache 服务 put 方法负责向内存写入模板内容。 $templateCache基于cacheFactory而来，接口保持一致，可以认为
$templateCache = $cacheFactory('template');

具体怎么用，参考一下两篇博文

展望

通过在github:https://github.com/junhey/Angular-Cnodejs看到的，其实还有很多功能待完善，比如说分页的实现，通过二维码登录等等，后面采用angular指令来做分页，这里留下两篇参考博文：

在线运行

基于Angular.js重写cnodejs.org社区的webapp 欢迎提建议

刷新页面返回顶部

Junhey console.log( " HI, I'M JUNHEY, A ENGINEER &amp; GEEKER, FOCUS ON THE WEB WEBSITE DEVELOPMENT." );