澳门正规赌博十大网站-澳门游戏网站
做最好的网站

嵌套路由,router刷新子页面路由的方法

网络有各个刷新子页面路由的方法,不过不明白为啥放到自个儿的页面就丰裕了,窘迫!

作者们都理解,假使选取原生路由的话,Angular的视图是通过ng-view那么些命令实行加载的。例如那样:<div ng-view></div>。一般,大家都会把那个命令放在index.html那几个文件之中,然后,通过调控器来加载相应的沙盘视图。比方那样:

ui-router是angular的三个插件,因为angular前边几个本子自带的原生ng-router不能够很好的满足开拓需求,所以在落实angular单页面嵌套的时候,都以行使ui-router。本文是的内容有关angular ui-router达成进程,内含demo以及代码地址,须求的爱侣能够还原参照他事他说加以考察下,喜欢的能够点波赞,只怕关心一下自家,ui-router的落到实处进度并不复杂,希望经过本文大家能够学会ui-router的施用格局。

英特网的方法有:

var bookStoreApp = angular.module('bookStoreApp', [ 
  'ngRoute', 'ngAnimate', 'bookStoreCtrls', 
]); 
bookStoreApp.config(function($routeProvider) { 
  $routeProvider.when('/hello', { 
    templateUrl: 'tpls/hello.html', 
    controller: 'HelloCtrl' 
  }).when('/list', { 
    templateUrl: 'tpls/bookList.html', 
    controller: 'BookListCtrl' 
  }).otherwise({ 
    redirectTo: '/hello' 
  }) 
}); 

1.angular文件,2.ui-router插件,3.路由js页面

<a href="#" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:'app.toMenu'}">
<!-- 这个方法刷新当前路由页面 -->

嵌套路由,router刷新子页面路由的方法。那是属于AngularJS的原生路由定义。从外表上看犹如挺方便,未有啥样太大的难题。不过细想一下,假使说大家有三个网页,侧面是菜单栏,右侧是逐个菜单所对应的视图。那么,借使依据那样的定义,点击各种菜单项,岂不得刷新整个网页?而小编辈想要的只是左边的视图刷新。所以,那将在用到嵌套路由了。

当心:angular文件必须在ui-router前边,因为ui-router是信赖angular的插件。

嵌套路由,router刷新子页面路由的方法。别的也得以用$state.reload();

所谓嵌套路由,正是视图里面还是能够再嵌套视图,路由里仍是能够再嵌套路由。並且,通过ui-router,能够完毕差别视图之间的参数字传送递。

这多少个文本是最大旨的页面,假设是贰个一体化的angular单页面项目嵌套路由,router刷新子页面路由的方法。的话,index,html是那幅样子:

$state.reload()是加载整个页面;

ui-router定义路由的时候,与ngRouter不雷同,它是使用.来张开定义的,况兼在html标签里,不应用ng-view,而是选取ui-view,譬如<div ui-view></div>。ui-router提供了$stateProvider,$urlRouterProvider来进展路由定义。

在单页面中,不管您从哪些视图查看网页代码,都以那样子,第二遍看的都醉了!

$state.reload('app.toMenu');加载当前页面;

下边包车型地铁实例演示怎样兑现路由嵌套:

3.app.js

<a href="" ng-click=" rel="external nofollow" reloadCurPage()">
<!-- controller里面 $scope -->
$scope.reloadCurPage = function(){
  $state.reload('app.toMenu');
}

home.html

app.js注解了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显得PageTab.html的剧情。具体代码如下,每一个入眼的地点都有对应的注脚注释注释

  尽管上述措施都相当的,能够试一下那样:

始建如下的html页面:

var myApp = angular.module("myApp", ["ui.router"]);

  controllerjs里面:点击后,先reload刷新一下,然后电磁照望计时器里面跳转到U本田UR-VL路由,那样就足以刷新子路由页面了。(沙漏设置小一些,那样跳转就不会展现“刚毅”)

<div class="jumbotron text-center"> 
  <h1>Home</h1> 
  <p>This page demonstrates 
    nestedviews. 
  </p> 
  <a ui-sref=".list" class="btn btn-primary">List</a> 
  <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a> 
</div> 
<div ui-view></div> 

//这里叫做App模块,那将报告HTML页面那是一个AngularJS作用的页面,并把ui-router注入AngularJS主模块,它的剧情由AngularJS引擎来疏解。

 $scope.toSubPage = function (name) {
      var param = {};
      if (name == 'report') {
        param = {id: 1};
      }
      $state.reload();
      $timeout(function () {
        $state.go('home.'   name, param,{reload:false});
      },5)
    }

home-list.html

myApp.config(function ($stateProvider, $urlRouterProvider) {

总结

开创如下的html页面:

//这一行注解了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数字传送入,那样大家就能够为这几个应用程序配置路由了.

上述所述是作者给大家介绍的AngularJS ui-router刷新子页面路由的措施,希望对我们全部帮助,如若大家有其余疑问请给笔者留言,小编会及时回复我们的。在此也特别感激大家对台本之家网址的支撑!

<ul> 
  <li ng-repeat="topic in topics">{{ topic }}</li> 
</ul> 

$urlRouterProvider.when("", "/PageTab");

您可能感兴趣的篇章:

  • AngularJS路由Ui-router模块用法示例
  • 详解AngularJS1.6版本中ui-router路由中/#!/的缓慢解决方式
  • angularjs ui-router中路由的二级嵌套
  • AngularJS ui-router (嵌套路由)实例
  • 浅析angularJS中的ui-router和ng-grid模块

about.html

//若无路由引擎能相称当前的导航状态,暗许将路径路由至 PageTab.html, 那它就如switch case语句中的default选项.正是贰个暗中同意的视图选项

创造如下的html页面:

$stateProvider

<div class="jumbotron text-center"> 
  <h1>The About Page</h1> 
  <p>This page demonstrates 
    multipleand 
    namedviews.</p> 
</div> 
<div class="row"> 
  <div class="col-md-6"> 
    <div ui-view="columnOne"></div> 
  </div> 
  <div class="col-md-6"> 
    <div ui-view="columnTwo"></div> 
  </div> 
</div> 

//这一行定义了会在main.html页面第二个呈现出来的景观(便是步向页面先加载的html),作为页面被加载好之后首先个被使用的路由.

table-data.html

.state("PageTab", {//导航用的名字

创设如下的html页面:

url: "/PageTab",//# 标记符,这里正是url地址栏上面的标志符,通过标志符,步向区别的html页面

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:嵌套路由,router刷新子页面路由的方法