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实现的UBB编码函数
Mar 09 Javascript
基础的prototype.js常用函数及其用法
Mar 10 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
微信小程序实现的picker多级联动功能示例
May 23 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
文章推荐系统(二)
2006/10/09 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python 实现IP子网计算
2021/02/18 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
新学期校长寄语
2014/01/18 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL