基于angular的route实现单页面cnodejs
发布于 7 天前 作者 junhey 710 次浏览 来自 分享

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 欢迎提建议

5 回复

如果做个原生app的壳,是不是可以用Webview loadURL('网站‘)就可以了?

@yakczh 是的,也可以用hybrid app打包下就可以做出一个app hybrid

@junhey webview.loadURL('首页地址’) 用户导航到详情页面以后,这时候原生app能取到详情页面的input表单的值吗?

@yakczh 原生的app没用过,应该是可以实现的,这个是loadUrl和原生app数据交互的问题哦

回到顶部