【揭秘AngularJS路由的艺术】轻松掌握页面跳转与数据共享技巧

引言

AngularJS作为一款风行的JavaScript框架，在单页面利用（SPA）的开辟中扮演侧重要角色。其中，AngularJS的路由机制是实现页面跳转跟数据共享的关键。本文将深刻探究AngularJS路由的艺术，帮助开辟者轻松控制页面跳转与数据共享技能。

AngularJS路由基本

1. 路由简介

AngularJS路由机制是由ngRoute模块供给，它容许我们将视图剖析成规划跟模板视图，根据URL变更静态地将模板视图加载到规划中，从而实现单页面利用的页面跳转功能。

2. URL与Hash片段

在单页WEB利用的URL中增加了#号，#号代表着网页的一个地位，其左边的全部内容就是用来标识该地位的标识符。#号及前面的内容称为URL中的hash片段，它们都不会发送到效劳端。

3. 路由利用

引入文件并注入依附

因为从1.2版本开端，AngularJS曾经将ngRoutes从核心代码中剥离出来成为独破的模块。因此，我们须要安装并在模块申明中注入对ngRoute的依附，才干在AngularJS利用中正常地利用路由功能。

<script src="angular-route.min.js"></script>
var app = angular.module("myApp", ['ngRoute']);

创建一个规划模板

创建规划模板是为了告诉AngularJS应当将规划衬着到那边。经由过程ng-view指令，我们可能正确地指定模板视图在DOM中的衬着地位。

<div ng-app="myApp">
  <a ng-href="#/music">音乐</a>
  <a ng-href="#/movie">电影</a>
  <div ng-view></div>
</div>

页面跳转与数据共享

1. 基于ui-router的页面跳转传参

在AngularJS的app.js顶用ui-router定义路由，比方现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传早年。

.state('producers',
  url: '/producers',
  templateUrl: 'views/producers.html',
  controller: 'ProducersCtrl'
)
.state('producer',
  url: '/producer/:producerId',
  templateUrl: 'views/producer.html',
  controller: 'ProducerCtrl'
)

在producers.html中，定义点击变乱，比方ng-click=“toProducer(producerId)“，在ProducersCtrl中，定义页面跳转函数（利用ui-router的state.go接口）：

.controller('ProducersCtrl', function (scope, state) {
  scope.toProducer = function (producerId) {
    state.go('producer', {producerId: producerId});
  };
});

在ProducerCtrl中，经由过程ui-router的stateParams获取转达的参数：

.controller('ProducerCtrl', function ($scope, $stateParams) {
  $scope.producerId = $stateParams.producerId;
});

2. 利用ngRoute停止页面跳转

利用ngRoute停止页面跳转时，可能经由过程routeProvider效劳设置路由映射。

var app = angular.module("myApp", ['ngRoute']);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'homeCtrl',
      templateUrl: '../view/home.html'
    })
    .when('/reservation', {
      controller: 'reservationCtrl',
      templateUrl: '../view/reservation.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

在页面中，写入URL跳转的按钮链接以及ng-view标签：

<div ng-app="myApp">
  <a href="#/home">首页</a>
  <a href="#/reservation">预订</a>
  <div ng-view></div>
</div>

总结

AngularJS路由机制为开辟者供给了富强的页面跳转跟数据共享功能。经由过程本文的介绍，信赖开辟者曾经对AngularJS路由有了更深刻的懂得。在现实项目中，机动应用路由机制，可能轻松实现页面跳转与数据共享，进步开辟效力。