百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

AngularJs 路由与多视图，ng-view指令和 UI-Router的嵌套State

ztj100 2024-12-05 18:06 20 浏览 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类型，用于匹配映射信息。该对象具有以下属性：controller：{string|function}类型，用于指定控制器名称或控制器构造方法。controllerAs：string类型，通过控制器标识符名称应用控制器template：{string|function} 类型，该属性可以为字符串类型，用于指定视图模板，也可以是一个方法，方法必须返回html模板的内容templateUrl：string类型，作用和template属性相同，不同的是，他用于指定视图模板文件路径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>


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


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;

});

相关推荐

其实TensorFlow真的很水无非就这30篇熬夜练

好的！以下是TensorFlow需要掌握的核心内容，用列表形式呈现，简洁清晰（含表情符号，<300字）：1.基础概念与环境TensorFlow架构（计算图、会话->EagerE...

交叉验证和超参数调整:如何优化你的机器学习模型

准确预测Fitbit的睡眠得分在本文的前两部分中，我获取了Fitbit的睡眠数据并对其进行预处理，将这些数据分为训练集、验证集和测试集，除此之外，我还训练了三种不同的机器学习模型并比较了它们的性能。在...

机器学习交叉验证全指南:原理、类型与实战技巧

机器学习模型常常需要大量数据，但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法，用来检验模型的表现。这有助于发现过拟合...

深度学习中的类别激活热图可视化

作者：ValentinaAlto编译：ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化，帮助更有针对性...

超强，必会的机器学习评估指标

大侠幸会，在下全网同名[算法金]0基础转AI上岸，多个算法赛Top[日更万日，让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能，这是通过使用验证指标来完成的。选择正确的验证指...

机器学习入门教程-第六课:监督学习与非监督学习

1.回顾与引入上节课我们谈到了机器学习的一些实战技巧，比如如何处理数据、选择模型以及调整参数。今天，我们将更深入地探讨机器学习的两大类：监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...

Python教程(三十八):机器学习基础

...

Python 模型部署不用愁!容器化实战，5 分钟搞定环境配置

你是不是也遇到过这种糟心事：花了好几天训练出的Python模型，在自己电脑上跑得顺顺当当，一放到服务器就各种报错。要么是Python版本不对，要么是依赖库冲突，折腾半天还是用不了。别再喊“我...

超全面讲透一个算法模型，高斯核!!

...

神经网络与传统统计方法的简单对比

传统的统计方法如...

AI 基础知识从0.1到0.2——用“房价预测”入门机器学习全流程

...

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如，sparklingwine。如何建立一个模型来进行预测呢？一种常见的方...

苹果AI策略:慢哲学——科技行业的“长期主义”试金石

苹果AI策略的深度原创分析，结合技术伦理、商业逻辑与行业博弈，揭示其“慢哲学”背后的战略智慧：一、反常之举：AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛，苹果的克制显得格格不入：功能延期：App...

时间序列预测全攻略，6大模型代码实操

如果你对数据分析感兴趣，希望学习更多的方法论，希望听听经验分享，欢迎移步宝藏公众号...

AI 基础知识从 0.4 到 0.5—— 计算机视觉之光 CNN

...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29