angular.js之路由的选择方法


Posted in Javascript onSeptember 24, 2016

在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的。

乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源。

例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息。但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的模块,然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。

而要做到上面介绍的功能就必须使用路由功能了。

主体思路:

1. 后台设立多个独立的模块

2. 建立一个路由控制模块

3. 根据需要通过路由提取需要模块加载到主页上

4. 加载的同时,将其他模块隐藏。

那么,路由模块的建立需要多少功夫呢?其实意外地简单:

首先,主页面上,写上对应的代码:

<ng-view></ng-view>这个代表路由区域和视图区域,只有写了这个标签才会触发路由事件:

<html lang="en" ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由区域,视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
    
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
  

</body>
</html>

其他的东西都是装饰,只要看第24行就可以了。

在路由区域和视图区域中,我们可以添加内容进去——甚至添加一个网页进去。

接下来请看对应的app.js。

var app = angular.module("myTodo", ['ngRoute']);
//路由的配置:
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

  $routeProvider.
   when("",routeconfig).
   //status : 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
  
});

如果仅仅使用路由的话,以上的代码就足够使用了。它会保证;

1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到

/all
上面,网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。

2. 当页面跳转方向是/other的时候,跳转到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html

3. 当出现特定的跳转的时候(这里规定跳转的是/active,/complete/all三个),也会跳转到对应页面,但这是在index下的跳转——

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

【尤其注意的一点:除了2会跳出这个页面,其他的跳转是显示在规定的视图区和路由区上面的,body网页上的内容会被加载过来。】

接下来我们讲解原理:

app.config(function($routeProvider)

这便是用来设定路由的代码,直接写就好

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

这是两个跳转,跳转是一个对象,templateUrl,即模板是body.html,这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器,名字是——myTodoCtrl。

第二个跳转因为不重要所以pass。

$routeProvider.
   when("",routeconfig).
   //status : 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

这一段代码是用来进行判断的,当哈希值发生改变的时候,执行对应的跳转对象。

当哈希值为""即第二句,为空的时候,执行routeconfig

当哈希值为"/other",即第五局,执行other_config

当哈希值是一个特殊变量的时候,变量的名称为aaa,值为X(X可以是定义好的任何指,这里是all,complete,active中其中一个),即"/active","/complete","/all"的时候,执行routeconfig。

当哈希值是其他情况的时候,默认跳转到哈希值为"/all"上。

我们得到了哈希值,执行了后面的对象,取出对象的模板,添加在了主页上面,启动了控制器,整个路由便算完成了。

以上就是小编为大家带来的angular.js之路由的选择方法的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
jquery 笔记 事件
Nov 02 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
常用jQuery选择器总结
Jul 11 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
用js写的一个路由(简单实例)
Sep 24 #Javascript
简单的js表格操作
Sep 24 #Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript 流畅动画实现原理
2009/09/08 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python 初始化一个定长的数组实例
2019/12/02 Python
如何在Python对Excel进行读取
2020/06/04 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python3.5的包存放的具体路径
2020/08/16 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
程序员岗位职责
2013/11/11 职场文书
旷课检讨书1000字
2014/02/14 职场文书
继承权公证书
2014/04/09 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
pycharm代码删除恢复的方法
2021/06/26 Python