基于angular的route实现单页面cnodejs
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理解的文章。
AngularJS 路由：ng-route 与 ui-router
学习 ui-router - 路由控制
Single Page Apps with AngularJS Routing and Templating
对，就如第三篇文章写的，我想做一个单页面，通过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 服务服务添加模板，代码如下： ```js var myApp = angular.module('myApp', []); myApp.run(function(\)templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
也可以在 HTML 中通过 ng-include 加载模板：也可以通过 Javascript 加载:$templateCache.get('templateId.html')
```
$templateCache 服务 put 方法负责向内存写入模板内容。
$templateCache基于cacheFactory而来，接口保持一致，可以认为
$templateCache = $cacheFactory('template');
具体怎么用，参考一下两篇博文
angular模板加载 ----ng-template
Angular Template Loading
展望
通过在github:https://github.com/junhey/Angular-Cnodejs看到的，其实还有很多功能待完善，比如说分页的实现，通过二维码登录等等，后面采用angular指令来做分页，这里留下两篇参考博文：
创建自定义 AngularJS 指令，第一部分，基础知识
angular学习笔记(三十)-指令(3)-templateUrl
在线运行
基于Angular.js重写cnodejs.org社区的webapp 欢迎提建议