AngularJS路由基础教程：实现单页面应用视图切换

157 浏览量更新于2024-09-02 收藏 98KB PDF 举报

"Angular路由简单学习" 在现代Web开发中，单页面应用程序（SPA）已经成为一个流行的选择，它们通过Ajax请求获取数据并在前端进行渲染，从而实现页面无刷新的视图切换，提供更好的用户体验。然而，当用户刷新页面时，由于浏览器的默认行为，会导致当前视图丢失。为了解决这个问题，有两种主要的方法：一是利用URL的hash部分（#），通过监听`hashchange`事件来切换视图；二是借助HTML5的`history` API，通过`pushState()`和`popstate`事件实现视图的切换，这种技术有时被称为Pjax（渐进式异步导航）。本文将重点介绍如何在Angular中使用路由机制，即Angular的`$route`服务，来实现SPA中的视图切换和导航管理。首先，我们需要在HTML文件中引入AngularJS的核心库和`angular-route.js`模块。在本例中，我们添加了如下代码： ```html <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>$route</title> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script> </head> ``` 接下来，我们创建一个名为`myApp`的Angular模块，并注入`ngRoute`依赖： ```javascript var m1 = angular.module('myApp', ['ngRoute']); ``` 然后，在`config`函数中配置`$routeProvider`，定义各个路由及其对应的视图模板： ```javascript m1.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/aaa', { template: '<h1>AAA</h1>' }) .when('/bbb', { template: '<h1>BBB</h1>' }) .when('/ccc', { template: '<h1>CCC</h1>' }) .otherwise({ // 默认哈希值，哈希值错误时重定向 redirectTo: '/aaa' }); }]); ``` 在上面的代码中，`when`方法用于定义路由规则，每个规则包含一个URL路径和一个对象，该对象可以包含`template`、`controller`等属性。`template`属性定义了当匹配到该路径时要显示的HTML内容，`controller`则可以指定与该视图关联的控制器。在HTML中，我们创建一个`ng-controller`指令来定义一个控制器`Aaa`，并设置一组链接来触发路由变化： ```html <body> <div ng-controller="Aaa"> <a href="#aaa">首页</a> <a href="#bbb">内容</a> <a href="#ccc">标题</a> <div ng-view></div> </div> </body> ``` `ng-view`指令是一个占位符，Angular会在这里插入与当前路由匹配的模板内容。点击链接时，URL的hash部分会改变，`$route`服务会检测到这一变化，根据配置好的路由规则加载相应的模板。至此，我们已经了解了Angular `$route`的基本使用。通过这种方式，我们可以轻松地在SPA中管理多个视图，实现页面的动态加载和导航。不过，`$route`服务还有许多其他功能，比如参数化路由、控制器、 resolve 预加载数据等，这些都是在构建更复杂的SPA时不可或缺的部分。在实际项目中，我们还需要关注路由的配置灵活性、路由守卫（如`resolve`、`canActivate`等）以及性能优化等问题。

Angular路由简单学习路由简单学习

现在非常流行单页面应用，传统都是通过ajax请求数据，前端拿到数据渲染到页面，这种无刷新的视图切换非常棒！但是致命

的缺点就是刷新後无法保持原来的视图，解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个

方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。

现在开始介绍angular的$route！

<!DOCTYPE HTML>

<head>

<title>$route</title>

</head>

<body>

</div>

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

m1.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/aaa',{

template : '<h1>AAA</h1>'

}).when('/bbb',{

template : '<h1>BBB</h1>'

}).when('/ccc',{

template : '<h1>CCC</h1>'

}).otherwise({ //默认哈希值，哈希值出现错误也可以执行

redirectTo : '/aaa'

});

}]);

m1.controller('Aaa',['$scope',function($scope){

}]);

</script>

</body>

</html>

上面的例子很简单，除了用template之外还可以用templateUrl引入html的模板文件。

在when传入控制器的指向，实现不同的页面显示不同的数据。

<!DOCTYPE HTML>

<head>

<title>$route</title>

</head>

<body>

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38630139

粉丝: 3
资源: 935

AngularJS路由基础教程：实现单页面应用视图切换

angular中的路由简单使用

angular学习资料2

Angular路由详解与$route应用实战

掌握Angular路由：源码解析与实现教程

掌握Angular路由机制：ngRoute详解与实战示例

Angular路由与导航

angular.js学习

angularjs-routing:简单的angular.js路由脚本

angular学习指南

angular学习资料

最新资源