本文实例讲述了AngularJS路由切换实现方法。分享给大家供大家参考,具体如下:
之前有在服务器端接触到角路由切换,今天想在本地实现路由,捣鼓半天终于成功了,特把步骤整理分享下,免得大家走弯路!
1。首先引入angular.min.js和angular-route.min.js
2。然后我们来写框架index . html,指数里面装的是所有页面都有的导航导航和页脚页脚(我这个演示里只有导航),模板文件page1.html, page2.html,也就是中间路由切换的部分
index . html代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>角js路由& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/angular.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/angular-route.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/controllers.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
李{list-style-type:没有;
浮:左;
margin-right: 25 px;
}
& lt;/style>
& lt;/head>
& lt;身体ng-app=癛outingApp”比;
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/page1”rel=巴獠縩ofollow”在第1页& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/所以page2”rel=巴獠縩ofollow”在第二页& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/其他“rel=巴獠縩ofollow”在其他page & lt;/li>
& lt;/ul>
& lt; div ng-view> & lt;/div>
& lt;/body>
& lt;/html>
之前
page1.html代码如下:
& lt; p>这是第1页& lt;/p>
之前
page2.html代码如下:
& lt; p>这是第2页& lt;/p>
之前
3。其次来写controllers.js,说明见注释
角。模块(“RoutingApp”, [" ngRoute "])//定义路由在应用模块RoutingApp里注入ngRoute
. config ([routeProvider美元,函数(routeProvider美元){//在路由模块里面的config()方法里面注入了routeProvider美元
routeProvider美元
当(page1 "/", {//templateUrl:表示路由跳转的视图模板
templateUrl:“page1.html”
}）
当(所以page2 "/", {
templateUrl:“page2.html”
}）
.otherwise ({
redirectTo:“/?
}）;
}));
之前
4。要想实现角路由的本地切换必须要在本地有个服务器的环境,我是用Python搭建的,很简单的呦!新建一个Python文件拷贝以下代码
进口http.server
def start_server(端口=8000,绑定=",cgi=False):
如果cgi==True:
http.server.test (HandlerClass=http.server。CGIHTTPRequestHandler、端口=端口绑定=绑定)
其他:
http.server.test (HandlerClass=http.server。SimpleHTTPRequestHandler、端口=端口绑定=绑定)
start_server() #如果你想cgi,设置cgi,真如start_server (cgi=True)
5。在桌面上新建一个叫lemonServer的文件夹,并把所有文件扔进去,得到如下文件目录
6。运行python文件结果如下,这段代码的意思是,把python文件所在的目录搭建成一个简单的服务器
7。打开浏览器输入localhost: 8000/index . html就可以看到刚才建立的index . html了,点击链接完成路由操作,是不是很简单呢!
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》,《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
