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实现多域名不同文件的调用方法
Jan 12 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
JS实现网站吸顶条
Jan 08 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
用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中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
鼠标图片振动代码
2006/07/06 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python 公共方法汇总解析
2019/09/16 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
如何通过python检查文件是否被占用
2020/12/18 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
标准毕业生自荐信
2014/06/24 职场文书
离婚协议书怎么写
2014/09/12 职场文书
房产协议书范本2014
2014/09/30 职场文书
寻找成龙观后感
2015/06/12 职场文书
总结会主持词
2015/07/02 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
学生会自荐信
2019/05/16 职场文书
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS