欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angularjs路由(ngRoute)

程序员文章站 2024-02-14 16:06:22
...

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指令:创建一个容器,代码片段会加载到这里
④创建模板页面
⑤配置路由词典
routeProviderwhen(/)routeProvider.when(‘/myStart’,{controller:”,template/templateUrl:”})
otherwise是用来指定异常的处理
$routePriovder.otherwise({redirectTo:’路由地址’})

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

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

  1. 先搞明白 发送 接收
  2. 配置接收方的路由 如$
routeProvider.when('/myStart/:num',{
templateUrl:'tpl/start.html'
})

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

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

注意事项:配置接收方路由时的冒号后的变量名称要和通过routeParamsmyStart/:idrouteParams.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>