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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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 MemCached 高级缓存应用代码
2010/08/05 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js中window.open的参数及注意注意事项
2016/07/06 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
实例讲解python函数式编程
2014/06/09 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python中字典和集合学习小结
2017/07/07 Python
python实现SOM算法
2018/02/23 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
同志主要表现材料
2014/08/21 职场文书
县委务虚会发言材料
2014/10/20 职场文书
工会工作个人总结
2015/03/03 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书