杰晶网络

AngularJS ui-router (嵌套路由)实例
网络编程 2024/11/9 佚名
3 2

我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：<div ng-view></div>。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样：

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' 
  }) 
});

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便，没有什么太大的问题。但是细想一下，如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。

所谓嵌套路由，就是视图里面还可以再嵌套视图，路由里还可以再嵌套路由。并且，通过ui-router，可以实现不同视图之间的参数传递。

ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签里，不使用ng-view，而是使用ui-view，比如<div ui-view></div>。ui-router提供了$stateProvider，$urlRouterProvider来进行路由定义。

下面的实例演示如何实现路由嵌套：

home.html

创建如下的html页面：

<div class="jumbotron text-center"> 
  <h1>Home</h1> 
  <p>This page demonstrates 
    <span class="text-danger">nested</span>views. 
  </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>

home-list.html

创建如下的html页面：

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

about.html

创建如下的html页面：

<div class="jumbotron text-center"> 
  <h1>The About Page</h1> 
  <p>This page demonstrates 
    <span class="text-danger">multiple</span>and 
    <span class="text-danger">named</span>views.</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>

table-data.html

创建如下的html页面：

<h2>Ice-Creams</h2> 
<table class="table table-hover table-striped table-bordered"> 
  <thead> 
    <tr> 
      <td>Name</td> 
      <td>Cost</td> 
    </tr> 
  </thead> 
  <tbody> 
    <tr ng-repeat="topic in topics"> 
      <td>{{ topic.name }}</td> 
      <td>${{ topic.price }}</td> 
    </tr> 
  </tbody> 
</table>

注意，到目前为止，我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.

index.html

用如下内容创建这个html页面

<!doctype html> 
<html ng-app="routerApp"> 
<head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > 
  <script src="/UploadFiles/2021-04-02/angular.min.js">


在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个<div ui-view=""></div>， 该 div 内的 HTML 内容会根据路由的变化而变化。在<a ui-sref="home"></a>中ui-sref 指令链接到特定状态。


在app.JS文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下：





var routerApp = angular.module('routerApp', ['ui.router']); 
routerApp.config(function($stateProvider, $urlRouterProvider) { 
  /*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 home.html, 
   *这个页面就是状态名称被声明的地方. */ 
  $urlRouterProvider.otherwise('/home'); 
  $stateProvider 
    .state('home', { 
      url: '/home', 
      templateUrl: 'tpls2/home.html' 
    }) 
   /* nested list with custom controller*/ 
  .state('home.list', { 
    url: '/list', 
    templateUrl: 'tpls2/home-list.html', 
    controller: function($scope) { 
      $scope.topics = ['Butterscotch', 'Black Current', 'Mango']; 
    } 
  }) 
  // nested list with just some random string data 
  .state('home.paragraph', { 
    url: '/paragraph', 
    template: 'I could sure use a scoop of ice-cream. ' 
  }) 
  .state('about', { 
    url: '/about', 
    /* view 用在该状态下有多个 ui-view 的情况，可以对不同的 ui-view 使用特定的 template, controller, resolve data 
     绝对 view 使用 '@' 符号来区别，比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 
     模板(template)，相对 view 则无*/ 
    views: { 
      // 无名 view 
      '': { 
        templateUrl: 'tpls2/about.html' 
      }, 
      // for "ui-view='columnOne'" 
      'columnOne@about': { 
        template: '这里是第一列的内容' 
      }, 
      // for "ui-view='columnTwo'" 
      'columnTwo@about': { 
        templateUrl: 'tpls2/table-data.html', 
        controller: 'Controller' 
      } 
    } 
  }); 
}); 
routerApp.controller('Controller', function($scope) { 
  $scope.message = 'test'; 
  $scope.topics = [{ 
    name: 'Butterscotch', 
    price: 50 
  }, { 
    name: 'Black Current', 
    price: 100 
  }, { 
    name: 'Mango', 
    price: 20 
  }]; 
}); 








AngularJS ui-router (嵌套路由)实例




AngularJS ui-router (嵌套路由)实例




AngularJS ui-router (嵌套路由)实例




 AngularJS ui-router (嵌套路由)实例


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
ui,router,嵌套路由,angularjs,ui,router,uirouter嵌套路由实例
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“AngularJS ui-router (嵌套路由)实例”
暂无“AngularJS ui-router (嵌套路由)实例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网