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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
$()JS小技巧
Jul 21 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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下保存远程图片到本地的办法
2010/08/08 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
Jquery-data的三种用法
2017/04/18 jQuery
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python排序方法实例分析
2015/04/30 Python
20招让你的Python飞起来!
2016/09/27 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
广州迈达威.net面试题目
2012/03/10 面试题
什么是Remote Module
2016/06/10 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
秦兵马俑导游词
2015/02/02 职场文书
中学教代会开幕词
2016/03/04 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang