0

0

angular.js之路由的选择方法

高洛峰

高洛峰

发布时间:2017-02-06 11:41:56

|

1703人浏览过

|

来源于php中文网

原创

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

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

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

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

主体思路:

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

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

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

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

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

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

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


    
    angularjs • TodoMVC
    
    
    
  
  
     
    
     
    
    
    
   
 

其他的东西都是装饰,只要看第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后面的就可以了。

韩国商城购物MORNING MALL
韩国商城购物MORNING MALL

主要增加论坛整合,在后台内置网银,快钱支付宝等实时在线支付平台 支付宝支付方式改成在收银台统一支付 并且修改了收到已付款定单后台显示定单确认功能[这功能非常强大,自动确认] 并且增加了商城内短信功能,商城店主可以自由与会员之间实时交谈。 改正给ID添加积分后,登陆到前台,在 MEMBER LOGIN 下面的积分仍然显示为0的问题 修改 订单确认 中 投递&包装方法 没有根据前面的选择而改

下载

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之路由的选择方法的全部内容了,希望对大家有所帮助,多多支持PHP中文网~

更多angular.js之路由的选择方法相关文章请关注PHP中文网!

相关文章

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
PHP 表单处理与文件上传安全实战
PHP 表单处理与文件上传安全实战

本专题聚焦 PHP 在表单处理与文件上传场景中的实战与安全问题,系统讲解表单数据获取与校验、XSS 与 CSRF 防护、文件类型与大小限制、上传目录安全配置、恶意文件识别以及常见安全漏洞的防范策略。通过贴近真实业务的案例,帮助学习者掌握 安全、规范地处理用户输入与文件上传的完整开发流程。

3

2026.01.13

PPT交互图表教程大全
PPT交互图表教程大全

本专题整合了PPT交互图表相关教程汇总,阅读专题下面的文章了解更多详细内容。

47

2026.01.12

Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

19

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

135

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

66

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

140

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

105

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Laravel---API接口
Laravel---API接口

共7课时 | 0.6万人学习

ThinkPHP6.x 微实战--十天技能课堂
ThinkPHP6.x 微实战--十天技能课堂

共26课时 | 1.6万人学习

ThinkPHP6.x API接口--十天技能课堂
ThinkPHP6.x API接口--十天技能课堂

共14课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号