在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的。
乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源。
例如,假如有一个页面,需要显示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之路由的选择方法的全部内容了,希望对大家有所帮助,多多支持小牛知识库~
路由可以让你:
问题内容: 我已经配置了一些基本路由,可供所有用户登录后使用: 因此,用户唯一可以做的就是登录。用户登录后,我想注册其他路由,如下所示: 但是,我想我应该只调用一次.config方法,因为$ routeProvider是全新的实例,对/ login路由一无所知。进一步的调试显示,在解决视图更改时会使用$ resourceProvider的第一个实例。 问:有没有办法以后注册路线? 从动态添加路由和
Navigating Programmatically
所以我有一些路线,比如<code>/category/tech</code>和<code</categority/tech/new<code>和<code>/category/tech/old</code>等等 他们都使用 或者我必须分别定义它们,就像
在Flasgger中,我试图为接受上传文件的路由创建文档。然而,尽管坚持规范,我不能在Flasgger UI中显示文件选择器。 我使用的是最新的(目前为止的),运行OpenAPI3规范(如),我在Swagger-UI中看到了这个提交,它为POST文件请求启用了文件选择器。 我知道以前也有人问过类似的问题,但没有一个与OAS版本3有关。
虽然你可以选择在浏览器端使用Less,直接在页面中嵌入一个 Less.js 文件,你也可以选择在服务器端使用Less,使用命令行将Less文件编译成最终的CSS文件。 然而,这两种方式都不够灵活,人们更喜欢使用图形界面工具进行编译。常见的工具有 winLess、simpLess、Koala 等,最值得推荐的编译工具,非 Koala 莫属。 Koala是由国人开放的一款开源的前端预处理器语言图形编译
本文向大家介绍详解Angular路由之路由守卫,包括了详解Angular路由之路由守卫的使用技巧和注意事项,需要的朋友参考一下 一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。 当用户未执行保存操作而试图
更新时间:2019-06-13 15:35:24 节点简介 路径选择节点类似switch,逻辑可以根据对数据源的判定,来执行不同的路径。最少有一条路径,最多允许10条路径。 使用场景 如果您需要对设备上报的属性等输入值做判断,输入满足条件的时候执行路径,不满足的时候继续进行下一个路径条件的判断,根据判断结果执行不同的逻辑,那您可以使用路径选择节点。典型使用场景如下所示: 配置项 数据源 数据源可以