angularjs路由(ngRoute)

最新推荐文章于 2022-02-21 10:21:07 发布

chengzhang_jian

最新推荐文章于 2022-02-21 10:21:07 发布

阅读量438

点赞数

分类专栏： angularjs 文章标签： angularjs 路由

本文链接：https://blog.csdn.net/chengzhang_jian/article/details/78209258

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ng是主要实现SPA（单一页面应用程序）
ngRoute（路由模块）可以定义路由词典，自动解析路由地址，查找路由词典，自动发起ajax请求加载页面显示。

SPA的工作原理：

以页面http://127.0.0.1/index.html为例
1、页面url
http://127.0.0.1/index.html#/路由地址
例如：http://127.0.0.1/index.html#/start
2、解析index.html 是一个完整的html页面，再解析路由地址(start)
3、在路由词典中寻找路由地址(start)所对应的路由信息
4、在路由信息所对应的对象中找到真实的模板页面地址
5、（发起异步ajax）加载模板页面到指定的容器中，实现局部刷新

使用ngRoute的基本步骤：

①创建一个完整的html页面
记得引入angular.js angular-route.js
②创建模块，并指定依赖于ngRoute模块
angular.module(‘myApp’,[‘ng’,’ngRoute’])
③使用指令创建一个盛放代码片段的容器
调用ngView指令：创建一个容器，代码片段会加载到这里
④创建模板页面
⑤配置路由词典
$routeProvider when是用来添加一条路由信息的(路由地址的字符串是以/开始)$ routeProvider.when(‘/myStart’,{controller:”,template/templateUrl:”})
otherwise是用来指定异常的处理
$routePriovder.otherwise({redirectTo:’路由地址’})

值得注意的是ngRoute来传递参数的方法：

SPA应用程序通过ngRoute来传递参数：

先搞明白发送接收
配置接收方的路由如$

routeProvider.when('/myStart/:num',{
templateUrl:'tpl/start.html'
})

3拿到传递过来的参数 $routeParams.num

4.发送：
a href=’#/myStart/10’
$location.path(‘/myStart/10’)

注意事项：配置接收方路由时的冒号后的变量名称要和通过 $routeParams解析参数的属性是要保持一致 myStart/:id$ routeParams.id
下面有一个完整的例子如下

完整的index.html页面

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/test.css"/>
  <script src="js/angular.js"></script>
  <script src="js/angular-route.js"></script>
  <script src="js/angular-animate.js"></script>
  <title></title>
</head>
<body ng-controller="parentCtrl">
<!--指定盛放代码片段的容器-->

<div ng-view class="page">

</div>

<script>
  //完成模块的创建和调用
  var app = angular.module('myApp',['ng','ngRoute','ngAnimate']);

  //配置路由词典
  app.config(function ($routeProvider) {
    $routeProvider
      .when('/myCheck',{
        templateUrl:'tpl/checkProduct.html'
      })
      .when('/myPay/:price',{
        templateUrl:'tpl/pay.html',
        controller:'PayCtrl'
      })
      .when('/mySend',{
        templateUrl:'tpl/send.html'
      })
      .otherwise({redirectTo:'/myCheck'})
  })

  app.controller('parentCtrl',
    ['$scope','$location',
      function ($scope,$location) {
        $scope.jump = function (desPath) {
          $location.path(desPath);
        }
      }
  ])


  //支付页面的控制器
  app.controller('PayCtrl',['$scope','$location','$routeParams', function ($scope,$location,$routeParams) {
    console.log($routeParams.price);

    $scope.allPrice = $routeParams.price;

  }]);

</script>

</body>
</html>

checkproduct.html商品页面

<div ng-include="'tpl/include/header.html'"></div>
<h1>这是商品的查看页面</h1>
<a href="#/myPay/50">去支付</a>

pay.html 支付页面

<div ng-include="'tpl/include/header.html'"></div>
<div ng-controller="PayCtrl">
  <h1>这是支付页面</h1>
  <p>{{"一共消费："+allPrice}}</p>
  <button ng-click="jump('/mySend')">发货</button>
</div>

send.html 发货页面

<div ng-include="'tpl/include/header.html'"></div>

<h1>这是发货页面</h1>

<a href="#/myCheck">查看商品</a>

<button ng-click="jump('/myCheck')">查看商品</button>

ngInclude使用的注意事项

在使用ngInclude进行赋值的时候，对应的路径字符串要在双引号内加上一对单引号
如：

<div ng-include="'tpl/include/header.html'"></div>

chengzhang_jian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs路由(ngRoute)

ng是主要实现SPA（单一页面应用程序） ngRoute（路由模块）可以定义路由词典，自动解析路由地址，查找路由词典，自动发起ajax请求加载页面显示。SPA的工作原理：以页面http://127.0.0.1/index.html为例 1、页面url http://127.0.0.1/index.html#/路由地址例如：http://127.0.0.1/index.html#/start
复制链接

扫一扫

专栏目录