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 相关文章推荐
jQuery - css() 方法示例详解
Jan 16 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
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中执行系统外部命令
2006/10/09 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Python3中多线程编程的队列运作示例
2015/04/16 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python之变量类型和if判断方式
2020/05/05 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
诚信的演讲稿范文
2014/05/12 职场文书
北京申奥口号
2014/06/19 职场文书