AngularJS通过ng-route实现基本的路由功能实例详解
本文实例讲述了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，这个请求在向网页端传输的时候，服务器会自动忽略#之后的内容，因此可以根据#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
这是一个简单的路由控制界面，根据链接中的#/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）初始效果
II）切换后的效果
我们发现改变的仅仅是#后的值，并没有页面的跳转和刷新
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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本文通过一个案例给大家介绍angularJs解决跨域问题，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
AngularJs Understanding the Controller Component
本文主要介绍AngularJs Understanding the Controller Component的内容,这里整理了相关资料，及简单示例代码，有兴趣的小伙伴可以参考下2016-09-09
angularJs中ng-model-options设置数据同步的方法
今天小编就为大家分享一篇angularJs中ng-model-options设置数据同步的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Facade Service暴露commands简化代码逻辑提高可访问性组合性
在 Angular 应用开发中,使用 Facade Service 暴露 commands（命令）以及订阅这些 commands 是一个常见的设计模式,本文将详细介绍在 Facade Service 中如何实现这一目标,并深入探讨相关细节,以及通过实际示例进行说明2023-10-10
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下2016-08-08
这篇文章主要介绍了Angular使用$http.jsonp发送跨站请求的方法,结合实例形式分析了$http.jsonp发送跨站请求遇到的问题与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了详解Angular2响应式表单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本篇文章主要介绍了深入理解angular2启动步骤 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angular5中调用第三方库及jQuery的添加的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论