ui-router多视图+嵌套视图+传参综合练习

作者: 简书超级会员 | 来源:发表于2018-05-28 19:36 被阅读44次

ui-router多视图+嵌套视图+传参综合练习
AngularJS 子路由与多视图
Ionic in Action MEAP v06 - 05
Vuex
Laravel的视图及AR模式
angular UI-Router路由
AngularJs 嵌套路由（ui-router）
SQL第6/n篇（更新中）视图
CALayer 详解
54 SQL中的视图和触发器

为什么Angular项目用ui-router模块来代替内置的路由ng-router？

Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。

这是因为UI-Router有两个重要的特性：

多样化视图
嵌入式视图
传递参数 $state.go("page",{params:""})
接收参数 $stateParams

安装

bower install
$ bower install angular-ui-router
npm install
$ npm install angular-ui-router
引入文件
引入angular-ui-router.js或angular-ui-router.min.js到你的index.html，必须Angualr.js核心文件之后，如下：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">
</script><script src="js/angular-ui-router.min.js"></script>

引入依赖
将“ui.router”依赖添加到你的主Angular.js module中。

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

注意：是ui.router不是ui-router，后者是许多人经常犯的错误。

UI-Router的内嵌式视图

路由状态机

UI-Router 引进了状态机设计模式，抽象高于传统的路由。路由成了状态，URL就成了状态的一个简单属性。

angular.module('APP', ['ui.router']);
 .config(['$locationProvider,$stateProvider', '$urlRouterProvider', function($locationProvider ,$stateProvider, $urlRouterProvider) {
    // 去掉感叹号！
    $locationProvider.hashPrefix('');
    $stateProvider
       .state('test', {
            url: "/test",
            templateUrl: "../../solution-test/partials/test.html",
            controller: 'testController',
          })
          .state('test.detail', {
            url: '/detail/:id',
            templateUrl: '../../solution-test/partials/detail.html',
            controller: 'detailController'
          })
          .state('test1', {
            url: "/test1",
            templateUrl: "../../solution-test/partials/test1.html",
            controller: 'test1Controller',
            params: {
              name: "",
              data: ""
            }
          })
          .state('index', {
            url: '/index',
            views: {
              "left": {
                templateUrl: "../../solution-test/partials/left.html"
              },
              "right": {
                templateUrl: "../../solution-test/partials/right.html"
              }
            }
          })
    // 默认
    $urlRouterProvider.otherwise('/');
}]);

主页视图（partials/shows.html）

<ul>
    <li ng-repeat="device in devices">
        <a ui-sref="test.detail({id: device.id})">{{device.name}}</a>
    </li>
</ul>
//  演示如何解耦合，我们只需要更改如有配置，将嵌入式页面更改为独立的两个虚拟页（一个列表路由，一个详情路由）。更具体的说，就是将shows.detail更改为detail
<div class="detail" ui-view></div>

主页视图controller(js/testController)

 angular.module('myApp.controllers', [])
    .controller('testController', function ($scope, resourceUIService, $state) {
      $scope.data = "Hello world";

      // 设备的列表
      $scope.devices = [
        {
          id: "1",
          name: "1#助燃风机"
        },
        {
          id: "2",
          name: "2#助燃风机"
        },
        {
          id: "3",
          name: "3#助燃风机"
        }
      ]
      /**
       * 跳转到一个新页面
       */
      $scope.hello = function () {
        $state.go("test1", {
          name: "test1",
          data: "001"
        });
      }
    })

显示详情视图（partials/detail.html）

<h3>{{detailData.name}}</h3>
<p>{{detailData.description}}</p>

显示详情controller（js/detailController）

 angular.module('myApp.controllers')
    .controller('detailController', function ($scope,$state,$stateParams) {
      var detailData = {
        "1":{
          name:"1#助燃风机",
          description:"气体辐射炉灶的助燃风机安装结构，包括： 外箱体，它的上侧敞开并具有内部空间，该空间至少被分隔成一个以上的空间； 陶瓷玻璃，它被结合成覆盖在所述外箱体的上端，待烹饪的食物被置于其上； 燃烧器壳体，它被结合成与所述陶瓷玻璃的下表面接触，并与所述陶瓷玻璃的该下表面一起形成排气通道； 辐射式燃烧器，它结合于所述燃烧器壳体的一侧并在燃烧气体时产生辐射波； 混合气体管，它的一端结合于所述辐射式燃烧器的一侧，另一端向下穿过形成在所述外箱体内侧的各分隔壁； 气体供给管"
        },
        "2":{
          name:"2#助燃风机",
          description:"Breaking Bad is an American crime drama television series created and produced by Vince Gilligan. The show originally aired on the AMC network for five seasons, from January 20, 2008 to September 29, 2013. The main character is Walter White (Bryan Cranston), a struggling high school chemistry teacher who"

        },
        "3":{
          name:"3#助燃风机",
          description:"The 7D is an American animated television series produced by Disney Television Animation, and broadcast on Disney XD starting in July 7, 2014. It is a re-imagining of the"
        }
      }
      $scope.detailData = detailData[$stateParams.id];
    })

UI-Router多样化视图案例

下面这个例子有多个区块在一个页面，有left，right。它们被UI-Router用多样化视图所管理。

<!DOCTYPE html>
 <html class="no-js">
    <head>
    </head>
    <body>
       <div ui-view="left"></div>
       <div ui-view="right"></div>
    </body>
</html>

像上一个例子中那样，我们使用$stateProvider配置状态（路由）。

下面的关键是注意，一个url不是一个只有一个templateUrl和controller属性了，而是使用views属性，赋予它一个各自的templateUrl和controller的集合。

.state('home',{
        url: '/',
        views: {
            'left': {
                templateUrl: '/templates/partials/left.html',
            },
            'right': {
                templateUrl: '/templates/partials/right.html',
                controller: 'RightController' 
            }
        }
    })

参考地址：https://www.jianshu.com/p/35c0acdea86c/
原文地址：http://www.funnyant.com/angularjs-ui-router/