angular中使用路由和$location切换视图

我们可以利用angular的$route服务来定义这样一种东西：对于浏览器所指向的特定URL，angular会加载并显示一个模板，并实例化一个控制器为模板提供内容。

在应用中，你可以通过调用$routeProvider服务上的函数来创建路由，把需要创建的路由当成一个配置块传给这些函数即可。 伪代码如下：

代码如下:

var someModule = angular.module('somemodule',[...module dependencies...])
someModule.config(function($routeProvider){
    $routeProvider.
      when('url',{controller:aController,templateUrl:'/path/to/template'}).
      when(...other...).
      otherwise(...what to do ...);
});

方法很简单，代码也很简洁，但是却非常实用，希望小伙伴们能够喜欢。

赞 (0)

相关推荐

  • AngularJs Using $location详解及示例代码

    AngularJs Using $location详解及示例代码

    一.What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东.在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中. $location服务: 暴露当前浏览器地址栏的URL,所以我们可以 1.注意和观察URL 2.改变URL 当用户做以下操作时,与浏览器一起同步URL: 1.改变地址栏 2.单击后退或者前进按钮(或者点击一个历

  • AngularJS通过$location获取及改变当前页面的URL

    注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati

  • AngularJS内建服务$location及其功能详解

    AngularJS内建服务$location及其功能详解

    在学习AngularJS的过程中感觉到,通过一次性从服务端的数据库获取信息,在前端进行分页,这是一种比较可取的方式.因为它节省了前后端的通信负载,把更多的显示方面的任务交给前端处理. 此内容分为两个部分,第一部分给大家简单介绍一下AngularJS的内建服务$location及其功能:第二部分通过一个比较完整的综合实例来实现分页显示数据库信息的效果. 在做angularJS的Mutilpe View & Route 的工作时,感觉到应该更加深入的了解一下angularJS的内建的服务&lo

  • Angular的$http与$location

    Angular的$http与$location

    $http 但是对于一个web应用,angular是如何同服务端进行交互获得数据的呢? <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$http',function($scope,$http){ $http({ method : 'GET', url : 'http/data.php', }).success(functi

  • 高效利用Angular中内置服务$http、$location等

    AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

  • angular中使用路由和$location切换视图

    我们可以利用angular的$route服务来定义这样一种东西:对于浏览器所指向的特定URL,angular会加载并显示一个模板,并实例化一个控制器为模板提供内容. 在应用中,你可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可. 伪代码如下: 复制代码 代码如下: var someModule = angular.module('somemodule',[...module dependencies...]) someModule.c

  • angular中默认路由的理解用法详解

    angular中默认路由的理解用法详解

    目录 0.前言 1.路由的功能及原理 2.默认路由的使用 0.前言 前一段时间折腾angular的路由折腾的够呛, 这篇文章简单介绍一下自己的理解及用法. 1.路由的功能及原理 一开始并不理解路由的存在,因为学习html的时候,访问模式是下面这样子: 也就是网址会直接访问到我们的页面.那这样有不好吗?或者说有什么问题吗?一个小demo确实没有什么问题?但是设想两个情景. 情景1:在一个功能/页面的的前提下有很多子功能或者子页面.我们这个时候可能会多建一个文件夹来区分这些功能或者页面.越多的话越难

  • iOS应用中使用Toolbar工具栏方式切换视图的方法详解

    iOS应用中使用Toolbar工具栏方式切换视图的方法详解

    关于UIToolbar ToolBar工具栏是视图View的属性,可以在工具栏上添加工具栏按钮Bar Button Item(可以是自定义的Custom.也可以是系统自带的BarButtonSystemItem ),视图控制器可以通过工具栏项对视图中内容进行操作. 注意事项: 在导航栏控制器中会有一个UIToolBar实例,但默认是隐藏的,如果需要显示,需要通过这个方法将其打开: 在这里需要注意的是,与UINavigationBar类似,导航控制器拥有且只拥有一个UIToolBar实例,但UIT

  • angular中的默认路由的理解用法详解

    angular中的默认路由的理解用法详解

    目录 0.前言 1.路由的功能及原理 2.默认路由的使用 0.前言 前一段时间折腾angular的路由折腾的够呛, 这篇文章简单介绍一下自己的理解及用法. 1.路由的功能及原理 一开始并不理解路由的存在,因为学习html的时候,访问模式是下面这样子: 也就是网址会直接访问到我们的页面.那这样有不好吗?或者说有什么问题吗?一个小demo确实没有什么问题?但是设想两个情景. 情景1:在一个功能/页面的的前提下有很多子功能或者子页面.我们这个时候可能会多建一个文件夹来区分这些功能或者页面.越多的话越难

  • AngularJS实现使用路由切换视图的方法

    本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml

  • Angular中实现树形结构视图实例代码

    Angular中实现树形结构视图实例代码

    近两年当中使用Angular开发过很多项目,其中也涉及到一些树形结构视图的显示,最近的在项目中封装了大量的组件,一些组件也有树形结构的展示,所以写出来总结一下. 相信大家都知道,树结构最典型的例子就是目录结构了吧,一个目录可以包含很多子目录,子目录又可以包含若干个子孙目录,那咱们今天就以目录结构为例来说明一下Angular中树结构的实现. 首先,我们希望封装一个组件,用于显示整个目录的树形机构,代码如下: <!DOCTYPE html> <html ng-app="treeDe

  • 详解IOS中Tool Bar切换视图方法

    详解IOS中Tool Bar切换视图方法

    本文通过实例给大家详细讲解了IOS开发中Tool Bar切换视图方法以及原理解释,希望我们的整理对你有用,一起学习下. iOS中几种典型的多视图程序: (1)Tab Bar Application:程序的底部有一排按钮,轻触其中一个按钮,相应的视图被激活并显示出来: (2)Navigation-Based Application:其特点是使用navigation controller,而navigation controller使用navigation bar来控制多级视图: (3)Tool B

  • angular.js之路由的选择方法

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的

随机推荐