AngularJS路由切换实现方法分析

本文实例讲述了AngularJS路由切换实现方法。分享给大家供大家参考，具体如下：

之前有在服务器端接触到有角的路由切换，今天想在本地实现路由，捣鼓半天终于成功了，特把步骤整理分享下，免得大家走弯路！

1.首先引入angular.min.js和angular-route.min.js

2.然后我们来写框架index.html里面装的是所有页面都有的航行导航和页脚页脚（我这个演示里只有导航),模板文件page1.html，page2.html，也就是中间路由切换的部分

index.html代码如下：

！DOCTYPE html html标题角形js路由/title脚本类型=' text/JAVAScript ' src=' http : js/angular。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/angular-route。量滴js /脚本脚本类型=' text/JavaScript ' src=' http : js/controller。js /脚本样式类型=' text/CSS ' Li { list-style-type : none；向左浮动：右边距： 25px}/style/head body ng-app=' Routingapp ' ul lia href=' # page 1 ' rel='外部' nofollow '转到第一页/a/li lia href='#page2' rel='外部' nofollow '转到第2页/a/li lia href='#other' rel='外部' nofollow '转到其他页/a/Li/ul div ng-view/div/body/html第1页。超文本标记语言代码如下：

这是第一页/ppage2.html代码如下：

p这是第2/p3页。其次来写controllers.js，说明见注释

angular.module('RoutingApp '，['ngRoute']) //定义路由在应用模块RoutingApp里注入ngRoute .config([' $ RouterProvider '，function($ RouterProvider){//在路由模块里面的。配置()方法里面注入了$ routeProvider $ routeProvider .when('/page1 '，{ //templateUrl:表示路由跳转的视角模板templateUrl: 'page1.html' }).当('/page2 '，{ templateUrl: 'page2.html' })时.否则({ redirectto : '/' })；}]);4.要想实现有角的路由的本地切换必须要在本地有个服务器的环境，我是用计算机编程语言搭建的，很简单的呦！新建一个大蟒文件拷贝以下代码

导入http.serverdef start_server(端口=8000，bind=' '，cgi=False):如果cgi==True : http。服务器。测试(HandlerClass=http。服务器。cgihttprequesthandler，端口=port，bind=bind)else : http。服务器。测试(HandlerClass=http。服务器。simplehttprequesthandler，端口=port，bind=bind)start _ server()#如果想要cgi，请将公共网关接口设置为真e在桌面上新建一个叫柠檬服务器的文件夹，并把所有文件扔进去，得到如下文件目录

6.运行大蟒文件结果如下，这段代码的意思是，把大蟒文件所在的目录搭建成一个简单的服务器

7.打开浏览器输入localhost:8000/index.html就可以看到刚才建立的index.html了，点击链接完成路由操作，是不是很简单呢！

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

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