AngularJs 路由与多视图，ng-view指令和 UI-R

作者: TryCatch菌 | 来源:发表于2019-08-21 19:32 被阅读0次

AngularJs 路由与多视图

基于AngularJS入门与进阶（江荣波著）这本书的笔记

AngularJS 1.x的demo

AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同

在AngularJs应用中，一般吧一个完整的HTML页面拆分成多个视图，每个视图实际上就是一段HTML片段，路由机制就是在每个视图和URL之间建立映射关系，当通过AngularJS路由API访问URL时，就可以加载对应的视图。

下面是一个简单的多视图应用和路由

两个简单的HTML代码片段

新增代码段 add.html

<div>
    <h4>新增</h4>
</div>

展示代码段 show.html

<div>
    <h4>展示</h4>
</div>

创建映射

AngularJs中有一个内置的Provider对像$routeProvider。$routeProvider是一个用于配置路由的内置服务。由于它是一个服务，根据service的使用建议，我们主要将其当做为工具来使用，所以我们一般直接使用 $routeProvider.XXX来调用它的成员方法来实现一定的功能，而不是实例化一个$ routeProvider的实例。它主要有以下两个成员函数：

otherwise(params)：设定映射信息到$route.current，一般用于指定没有标明的路由如何处理。
when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理。
- path：String 类型，路由路径（和$location.path 相对应），支持占位符
- route：Object类型，用于匹配映射信息。该对象具有以下属性：
  1. controller：{string|function}类型，用于指定控制器名称或控制器构造方法。
  2. controllerAs：string类型，通过控制器标识符名称应用控制器
  3. template：{string|function} 类型，该属性可以为字符串类型，用于指定视图模板，也可以是一个方法，方法必须返回html模板的内容
  4. templateUrl：string类型，作用和template属性相同，不同的是，他用于指定视图模板文件路径
  5. resolve：Object类型，用于指定注入控制器中的内容

app.js

// ngRoute是一个Module，提供路由和深层链接所需的服务和指令
var routModule = angular.module("routModule",["ngRoute"]);
// config 进行路由配置
routModule.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
        // when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理
        .when('/addList',// 访问的url路径是add
            {
                templateUrl:'templates/add.html',// 路径对应的视图是
                controller:'addController' // 视图处理的控制器
            })
        .when('/showList',
            {
                templateUrl:'templates/show.html',
                controller:'showController'
            })
        .otherwise('/showList',
            {
                templateUrl:'templates/show.html',
                controller:'showController'
            });

}]);

AngularJs的路由模块作为一个单独的模块，模块名称为ngRoute，如果在自定义模块中适应，需要添加ngRoute模块依赖

做一个index.html，通过ng-view指令加载

ng-view是一个angularJs的内置指令，用于定义一个视图。在下面的html中，定义了两个地址，#!/addLis和#!/showList（这里如果不写#!跳转会失败，不过书上的demo没有感叹号），当点击链接的时候，访问路径为addList这里，框架根据路由查找视图，然后根据ng-view指令加载对应的视图

<!DOCTYPE html>
<html lang="en" ng-app="routeModule">
<head>
    <meta charset="UTF-8">
    <title>routeModule</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css">
    <script  src="/lib/angular/angular.js"></script>
    <script  src="/lib/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<div>
    <ul class="nav nav-tabs">
        <li><a href="#!/showList">
                <span class="glyphicon glyphicon-th-list">展示列表</span>
            </a>
        </li>
        <li><a href="#!/addList">
            <span class="glyphicon glyphicon-plus">新增界面</span>
            </a>
        </li>
    </ul>
    <div ng-view></div>
</div>

</body>
</html>

20190820_213231[00-00-00--00-00-06].gif

URL携带参数的路由跳转

在实际开发过程中，跳转我们一般是携带参数的，在定义路由的时候url可以携带参数，用冒号隔开，也可以携带多个参数

$routeProvider
　　　　　　//单个参数
　　　　　　.when("/index/:paramName",{             
　　　　　　　　templateUrl: "app/index",
　　　　　　　　controller: "indexCtrl"
　　　　　　})
　　　　　　//多个参数 　
　　　　　　.when("/index/:paramName1/:paramName2",{        　　　　　　　
　　　　　　　　templateUrl: "app/index", 　　　　　　　　
　　　　　　　　controller: "indexCtrl" 　　　　　　
　　　　　　})

新做一个详情页面show.html

<head>
    <meta charset="UTF-8">
    <title>routeModule</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css">
    <script  src="/lib/angular/angular.js"></script>
    <script  src="/lib/angular-route/angular-route.js"></script>
    <script src="js/showController.js"></script>

</head>
<body ng-app="showInfoModule">
<div style="margin-left: 50px;margin-top: 10px" >
    <div>
        <h4>展示</h4>
    </div>
    <div>
        <table class="table">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>001</td>
                <td>一号商品</td>
                <td><a href="#!/showListInfo/001/一号商品">展示详情</a></td>
            </tr>
            <tr>
                <td>002</td>
                <td>二号商品</td>
                <td><a href="#!/showListInfo/002/二号商品">展示详情</a></td>
            </tr>
            <tr>
                <td>003</td>
                <td>三号商品</td>
                <td><a href="#!/showListInfo/003/三号商品">展示详情</a></td>
            </tr>
        </table>
    </div>
    <div ng-view></div>
</div>
</body>

填充的代码块showInfo.html

<div style="margin-left: 50px;margin-top: 10px" >
    <h5>详情展示</h5>
    <li><span>商品编码：{{orderId}}</span></li>
    <li><span>商品名称：{{orderName}}</span></li>
</div>

控制器showController.js

// ngRoute是一个Module，提供路由和深层链接所需的服务和指令
var showInfoModule = angular.module("showInfoModule",["ngRoute"]);
// config 进行路由配置
showInfoModule.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
    // when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理
        .when('/showListInfo/:orderId/:orderName',
            {
                templateUrl:'templates/showInfo.html',
                controller:'showInfoController'
            })
}]);
// 展示的添加控制器,第三个参数是$routeParams内置的路由参数，通过这个，可以在页面中取到url路径占位符的值
showInfoModule.controller("showInfoController",function ($scope,$log,$routeParams) {
    $scope.orderId = $routeParams.orderId;
    $scope.orderName = $routeParams.orderName;
});

![20190821_192744[00-00-00--00-00-11].gif](https://img.haomeiwen.com/i14240112/51f8dde4cafe6648.gif?imageMogr2/auto-orient/strip)

UI-Router指令

ng-view如果单纯的在一个页面中使用多次，会出现异常，如果我们需要把多个html集中到一个页面，复杂的路由进行操作
首先是几个界面的html块

add.html

<div style="margin-left: 50px;margin-top: 10px">
    <h4>新增</h4>
</div>

show.html

<div style="margin-left: 50px;margin-top: 10px">
    <h4>展示</h4>
</div>
<div style="margin-left: 50px;margin-top: 10px">
    <table class="table">
        <tr>
            <td>编号</td>
            <td>名称</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>001</td>
            <td>一号商品</td>
            <td>
                <a ng-href="#!/showInfoFrame/001/一号商品">展示详情</a>
            </td>
        </tr>
        <tr>
            <td>002</td>
            <td>二号商品</td>
            <td>
                <a ng-href="#!/showInfoFrame/002/二号商品">展示详情</a>
            </td>
        </tr>
        <tr>
            <td>003</td>
            <td>三号商品</td>
            <td>
                <a ng-href="#!/showInfoFrame/003/三号商品">展示详情</a>
            </td>
        </tr>
    </table>
</div>

showInfoFrame.html

<div style="margin-left: 50px;margin-top: 10px">
    <h3>展示框架</h3>
    <div ng-include="'showInfo.html'"></div>
</div>

showInfo.html

<div style="margin-left: 50px;margin-top: 10px" >
    <h5>详情展示</h5>
    <li><span>商品编码：{{orderId}}</span></li>
    <li><span>商品名称：{{orderName}}</span></li>
</div>

index.html

<!DOCTYPE html>
<html lang="en" ng-app="routeModule">
<head>
    <meta charset="UTF-8">
    <title>routeModule</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css">
    <script  src="/lib/angular/angular.js"></script>
    <script  src="/lib/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div>
    <ul class="nav nav-tabs">
        <li><a ui-sref="showList">
                <span class="glyphicon glyphicon-th-list">展示列表</span>
            </a>
        </li>
        <li><a ui-sref="addList">
            <span class="glyphicon glyphicon-plus">新增界面</span>
            </a>
        </li>
    </ul>
    <div ui-view></div>
</div>

</body>
</html>

最后就是app.js

// ui.router 嵌套路由
var routeModule = angular.module("routeModule",["ui.router"]);
// config 进行路由配置
routeModule.config(function($stateProvider, $urlRouterProvider){
    // 默认路由
    $urlRouterProvider.otherwise('showList') ;
    $stateProvider
        .state('showList', {
            url: '/showList',
            templateUrl: 'show.html'
        })
        .state('addList', {
        url: '/addList',
        templateUrl: 'add.html'
        })
        .state('showInfoFrame', {
        url: '/showInfoFrame/:orderId/:orderName',
        templateUrl: 'showInfoFrame.html',
        controller:'showInfoController'
        })
});

// 展示的添加控制器,第三个参数是$stateParams内置的路由参数，通过这个，可以在页面中取到url路径占位符的值
routeModule.controller("showInfoController",function ($scope,$log,$stateParams) {
    $scope.orderId = $stateParams.orderId;
    $scope.orderName = $stateParams.orderName;

});

20190821_192744[00-00-00--00-00-11].gif

AngularJs 路由与多视图，ng-view指令和 UI-R

AngularJs 路由与多视图

两个简单的HTML代码片段

创建映射

做一个index.html，通过ng-view指令加载

URL携带参数的路由跳转

UI-Router指令

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读