AngularJS路由切换实现方法分析


Posted in Javascript onMarch 17, 2017

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

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

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

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

index.html代码如下:

<!DOCTYPE html>
<html>
<head>
  <title>angular js 路由</title>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-route.min.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <style type="text/css">
    li{list-style-type: none;
      float: left;
      margin-right: 25px;
    }
  </style>
</head>
<body ng-app="RoutingApp">
  <ul>
    <li><a href="#page1" rel="external nofollow" >go page 1</a></li>
    <li><a href="#page2" rel="external nofollow" >go page 2</a></li>
    <li><a href="#other" rel="external nofollow" >to other page</a></li>
  </ul>
  <div ng-view></div>
</body>
</html>

page1.html代码如下:

<p>this is page 1</p>

page2.html代码如下:

<p>this is page 2</p>

3.其次来写controllers.js,说明见注释

angular.module("RoutingApp", ["ngRoute"]) //定义路由 在应用模块RoutingApp里注入ngRoute
  .config(['$routeProvider', function ($routeProvider) { //在路由模块里面的.config()方法里面注入了$routeProvider
    $routeProvider
      .when("/page1", { //templateUrl: 表示路由跳转的view模板
        templateUrl: "page1.html"
      })
      .when("/page2", {
        templateUrl: "page2.html"
      })
      .otherwise({
        redirectTo: "/"
      });
  }]);

4.要想实现angular路由的本地切换必须要在本地有个服务器的环境,我是用Python搭建的,很简单的呦!新建一个python文件拷贝以下代码

import http.server
def start_server(port=8000, bind="", cgi=False):
  if cgi==True:
    http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler, port=port, bind=bind)
  else:
    http.server.test(HandlerClass=http.server.SimpleHTTPRequestHandler, port=port, bind=bind)
start_server() #If you want cgi, set cgi to True e.g. start_server(cgi=True)

5.在桌面上新建一个叫lemonServer的文件夹,并把所有文件扔进去,得到如下文件目录

AngularJS路由切换实现方法分析

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

AngularJS路由切换实现方法分析

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

AngularJS路由切换实现方法分析

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

Javascript 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
js实现下一页页码效果
Mar 07 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
js判断是否是手机页面
Mar 17 #Javascript
Angular组件化管理实现方法分析
Mar 17 #Javascript
Bootstrap表单制作代码
Mar 17 #Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 #Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 #Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 #Javascript
javascript 动态生成css代码的两种方法
Mar 17 #Javascript
You might like
php cookie 详解使用实例
2016/11/03 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript 应用小技巧方法汇总
2015/07/05 Javascript
理解javascript闭包
2015/12/15 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
在小程序开发中使用npm的方法
2018/10/17 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中格式化format()方法详解
2017/04/01 Python
import的本质解析
2017/10/30 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
公益活动邀请函
2014/02/05 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
保护环境的建议书
2014/03/12 职场文书
婚礼主持结束词
2014/03/13 职场文书
总经理工作职责范文
2014/03/14 职场文书
小学六年级学生评语
2014/04/22 职场文书
事业单位考核材料
2014/05/21 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
讨论nginx location 顺序问题
2022/05/30 Servers