[Angularjs]视图和路由(三)

写在前面

上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用。本篇文章,将介绍和路由相关的几个常见的服务。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由(一)

[Angularjs]视图和路由(二)

$routeParams

有这样一种情况,在设计路由的时候,我们希望在路由上面传递参数,但是当跳转到指定的路由的时候,我们该如何接收呢?这就用到$routeParams这个指令。传递的参数,angularjs会将它解析出来并传递给$routeParams。

一个例子

$routeProvider
         .when(‘/user/:name‘,{
          controller:‘UserController‘,
          templateUrl:‘views/user.html‘
          });

这个例子的大概意思就是,根据name查询用户信息。

当访问这样的路由是#/user/wolfy,angularjs会在$routeParams中添加一个名为name的键,它的值会被设置为加载进来的Url中的值。比如这里,$routeParams对象看起来回事这样的:

{name:‘wolfy‘}

需要注意,如果想要在控制器中访问这些变量,需要把$routeParams注入到控制器:

app.controller(‘UserController‘,function($scope,$routeParams){
                     console.log($routeParams.name);
});

$location服务

angularjs提供了一个服务用以解析地址栏中的URL,并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。

$location服务对javasrcipt中的window.location对象的api进行了更优雅地封装,并且或Angularjs继承在一起。

当应用需要在内部进行跳转时是使用$location服务的最佳场景,比如当用户注册后,修改或者登录后进行的跳转。

$location服务没有刷新整个页面的能力。如果需要刷新整个页面,需要使用$window.location对象(window.location的一个接口).

$location服务常见的几个方法

path()

$location.path();//用来获取页面的当前路径。

修改当前路径并跳转到应用中的另一个Url,该方法参数为空时是获取url,传递路由时是修改url:

$location.path(‘/‘);//把路径修改为‘/‘路由

path()方法直接和html5的历史api进行交互,所以用户可通过点击后退按钮退回到上一个页面。
replace()

如果你希望跳转后用户不能点击后退按钮(对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用),angularjs提供了replace()方法来实现这个功能:

$location.path(‘/home‘);

$location.replace();

//或者

$loaction.path(‘/home‘).replace();

absUrl()

absUrl()方法用来回去编码后的完整URL。

$location.absUrl();

hash()

hash()方法用来回去URL中的hash片段:

$location.hash();//返回当前的hash片段

host()

该方法用来回去URL中的主机:

$location.host();//当前url的主机

port()

该方法用来获取URL中的端口号:

$location.port();

protocol()

该方法用来获取URL中的协议:

$location.protocol();

search()

该方法用来获取URL中的查询串:

$location.search();

我们可以想这个方法中传入新的查询参数,来修改url中的查询串部分:

//对象设置查询
$location.search({name:‘wolfy‘,userName:‘wolfy sun‘});
//用字符串设置查询
$location.search(‘name=wolfy&username=wolfy sun‘);

search方法可以接收两个参数:

    • search(可选,字符串或对象):这个参数待办新的念书。hash对象的值可以是数组。
    • paramValue(可选,字符串):如果search参数的类型是字符串,那么paramValue会作为该参数的值覆盖URL当中的对应值。如果paramValue的值为null,对应的参数会被移除掉。

一个例子

// 带#号的url,看?号的url,见下面
url = http://www.wolfy.com?#name=wolfy

用search方法获取参数,可以这样:

// 获取url参数
$location.search().name;
// or
$location.search()[‘name‘]; 

url()

该方法用来获取当前页面的URL:

$location.url();//该URL的字符串

如果调用url()方法时传了参数,会设置并修改当前的URL,这会同时修改URL中的路径、查询串和hash,并返回$location.

//设置新的URL
$location.url(‘/home?name=wolry#hashthing‘);

url()方法可以接收两个参数:

url(可选,字符串):新的URL的基础的前缀。

replace(可选,字符串):想要修改成的路径。

总结

在目前的项目中用到比较多的是$routeParams和$location.path(),获取传递的参数,在用户完成某个操作时,进行修改路由跳转到新的templateUrl。并在ng-view占位的地方进行渲染。

文章来自

AngularJS权威教程

时间: 2024-10-08 02:12:31

[Angularjs]视图和路由(三)的相关文章

[Angularjs]视图和路由(二)

写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) 参数 when方法,上篇文章也提到了配置路由用到的when方法,对when方法的第二个参数可以接收哪些属性,这里将一一列举.1.controller controller:'MyControlle

[Angularjs]视图和路由(四)

写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angularjs]视图和路由(三) 路由模式 不同的路由模式在浏览器的地址栏中会以不同的UR

AngularJS 视图和路由

在AngularJS之后引用angular-route  路由   ngRoute模块加载声明 AngularJS提供的when和otherwise两个方法来定义应用的路由 otherwise方法会在没有任何路由匹配时被调用,我们用它设置了一个默认跳转到'/'路径的路由 ng-view是一个优先级为 1000的终极指令. AngularJS不会运行同一个元素上的低优先级指令 每次触发$routeChangeSuccess事件,视图都会更新. 如果某个模板同当前的路由相关联:创建一个新的作用域:移

AngularJs多重视图和路由的使用

使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目,通常不变的都是头部,尾部和菜单部分,变化的都是右边的内容部分,使用AngularJs的多重视图和路由就可以很方便的实现这样的效果.在实现之前需要准备两个文件,一个是angular的主JS文件,另一个是angular的路由JS文件,如下: <script src="js/angular.min.

AngularJS学习---Routing(路由) &amp; Multiple Views(多个视图) step 7

1.切换分支到step7,并启动项目 git checkout step-7 npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中.下一步是增加一个能够显示我们列表中每一部手机详细信息的页面.可以先看一下step6和7的代码区别 . 为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板代码,但是这样会很快给我们带来巨大的麻烦.相反,我们要把index.html模板转变

AngularJS ui-router (嵌套路由)

介绍 AngularJS 嵌套路由:这是我针对同一个主题(ui-router)的第二篇文章. 如果你对第一篇文章感兴趣的话,可以访问 这里. 好了,让我们继续吧,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性. 我们将在示例中看到ui-router中存在的所有类型. 背景 引述我之前那篇文章开头给出的使用ui-router框架实现的简单路由, 基于我们的

关于AngularJs中的路由学习总结

AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds.cn/first/page,但在单页web应用中angularjs通过#+标记实现,比如下面的页面,将是下文中的路由列子. http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168

drf4 视图与路由组件

APIView和View的区别 不管是View还是APIView最开始调用的都是as_view() APIView继承了View, 并且执行了View中的as_view()方法,最后把view返回了,用csrf_exempt()方法包裹后去掉了csrf的认证. 在View中的as_view方法返回了view函数,而view函数执行了self.dispatch()方法,但是这里的dispatch方法应该是我们APIView中的 去initialize_request中看下把什么赋值给了reques

关于视图和路由的进阶技巧

关于视图和路由的进阶技巧 视图装饰器 Python装饰器让我们可以用其他函数包装特定函数. 当一个函数被一个装饰器"装饰"时,那个装饰器会被调用,接着会做额外的工作,修改变量,调用原来的那个函数.我们可以把我们想要重用的代码作为装饰器来包装一系列视图. 装饰器的语法看上去像这样: @decorator_function def decorated(): pass 如果你看过Flask入门指南,那么对这个语法应该不敢到陌生.@app.route正是用于在Flask应用中给视图函数设定路由