AngularJS通过ng-route实现基本的路由功能实例详解


Posted in Javascript onDecember 13, 2016

本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考,具体如下:

为什么需要前端路由~

(1)AJAX不会留下History历史记录

(2)用户无法通过URL进入应用指定的页面(书签或者分享等)

(3)AJAX对于SEO是一个灾难

1.一般情况下,我们访问网页的时候,是通过url地址。
比如我们访问一个网页:https://www.baidu.com/index/fix.html

在AngularJS中通过“#”来进行不同页面的路由,比如:
https://www.baidu.com/#/first,这个请求在向网页端传输的时候,服务器会自动忽略#之后的内容,因此可以根据#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

AngularJS通过ng-route实现基本的路由功能实例详解

这是一个简单的路由控制界面,根据链接中的#/first和#/second分别对应跳转到不同的页面。

2.通过angularjs中的路由模块,实现ng-route的步骤

(1)载入包含ng-route的JS文件

(2)包含了 ngRoute 模块作为主应用模块的依赖模块。

(3)使用原生指令ng-view

(4)我们在html中定义链接,可以实现一个单页应用,比如链接可以这样定义:

<body>
 <ul>
  <li><a href="#/">首页</a></li>
  <li><a href="#/first">第一页面</a></li>
  <li><a href="#/second">第二页面</a></li>
  <li><a href="#/third">第三页面</a></li>
</ul>
  <div ng-view></div>
</body>

在js中的定义路由代码为:

angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
  $routeProvider.when('/',{template:'这是首页页面'})
         .when('/first',{template:'这是第一个页面'})
         .when('/second',{template:'这是第二个页面'})
         .when('/third',{template:'这是第三个页面'})
         .otherwise({redirectTo:'/'});
}]);

(6)我们来看效果,首次当未有链接切换时候,默认的跳转到首页,效果如下:

当依次点击链接时,会依次切换ng-view中的值,并且实现了ng-view内内容的替换~

I)初始效果

AngularJS通过ng-route实现基本的路由功能实例详解

II)切换后的效果

AngularJS通过ng-route实现基本的路由功能实例详解

我们发现改变的仅仅是#后的值,并没有页面的跳转和刷新

3.angularJS中的路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。

路由配置对象语法规则如下:

$routeProvider.when(url, {
  template: string,
  templateUrl: string,
  controller: string, function 或 array,
  controllerAs: string,
  redirectTo: string, function,
  resolve: object<key, function>
});

参数解释:

(1)template:

使用该概述,可以在template中写入HTML内容,典型的例子是:

when('/',{template:'这是首页页面'})

(2)templateUrl:
如果现在我们并不是要HTML内容,而是需要一个模板文件来进行整体替换,例子如下:

$routeProvider.when('/computers', {
  templateUrl: 'views/computers.html',
});

(3)controller:function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
也可以对应的是控制器的名称。

(4)redirectTo:重定向的地址

(5)resolve:当前控制器所依赖的其他模块~

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
js实现拖拽功能
Mar 01 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
Angular 常用指令实例总结整理
Dec 13 #Javascript
jQuery UI制作选项卡(tabs)
Dec 13 #Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 #Javascript
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
php socket通信简单实现
2016/11/18 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
js 采用delete实现继承示例代码
2014/05/20 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
员工拓展培训方案
2014/02/15 职场文书
感恩教育活动总结
2014/05/05 职场文书
雷人标语集锦
2014/06/19 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
MySQL笔记 —SQL运算符
2022/01/18 MySQL