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
1 | <html ng-app="cnodejsapp"> |
main.js
1 | var app=angular.module('cnodejsapp',['ngRoute']); |
做好了这个的时候已经是3月19日晚上一两点了,第二天早上睡不着就爬起来了把剩下的cnodejs的功能实现,然后把路由功能做好就差不多可以看了。
代码上也就是两个文件index.html和index.js,其中用到了1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19其他的实现基本上上angular的基础,具体代码可以到[github:https://github.com/junhey/Angular-Cnodejs](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 加载模板:1
<div ng-include=" 'templateId.html' "></div>
也可以通过 Javascript 加载:1
$templateCache.get('templateId.html')
$templateCache 服务 put 方法负责向内存写入模板内容。
$templateCache基于cacheFactory而来,接口保持一致,可以认为
$templateCache = $cacheFactory(‘template’);
具体怎么用,参考一下两篇博文
展望
通过在github:https://github.com/junhey/Angular-Cnodejs看到的,其实还有很多功能待完善,比如说分页的实现,通过二维码登录等等,后面采用angular指令来做分页,这里留下两篇参考博文:
在线运行
基于Angular.js重写cnodejs.org社区的webapp 欢迎提建议