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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JavaScript 乱码问题
Aug 06 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
用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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
使用pdb模块调试Python程序实例
2015/06/02 Python
Python编程之序列操作实例详解
2017/07/22 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python输出带颜色字体实例方法
2019/09/01 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
致400米运动员广播稿
2014/02/07 职场文书
成语的广告词
2014/03/19 职场文书
项目经理任命书范本
2014/06/05 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
孔繁森观后感
2015/06/10 职场文书
春节慰问简报
2015/07/21 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android