前言：
当前兄弟们对“viewstatejs”都比较关切，兄弟们都想要分析一些“viewstatejs”的相关内容。那么小编同时在网上收集了一些有关“viewstatejs””的相关文章，希望朋友们能喜欢，各位老铁们快快来学习一下吧！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;}); 标签： #viewstatejs
