Angular路由简单学习

前端之家收集整理的这篇文章主要介绍了Angular路由简单学习前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

现在非常流行单页面应用,传统都是通过ajax请求数据,前端拿到数据渲染到页面,这种无刷新的视图切换非常棒!但是致命的缺点就是刷新後无法保持原来的视图,解决此问题的一个方法是使用 hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把这叫pjax技术。

现在开始介绍angular的$route!

$route

<div ng-controller="Aaa">
<a href="#aaa">首页
<a href="#bbb">内容
<a href="#ccc">标题

<script type="text/javascript">

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

m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template : '

AAA

'
}).when('/bbb',{
template : '

BBB

'
}).when('/ccc',{
template : '

CCC

'
}).otherwise({ //默认哈希值,哈希值出现错误也可以执行
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',['$scope',function($scope){

}]);

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

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

$route

<div ng-controller="Aaa">
<a href="#aaa">首页
<a href="#bbb">内容
<a href="#ccc">标题

<script type="text/javascript">

var m1 = angular.module('myApp',{
template : '

AAA

{{name}}',controller : 'Aaa' //控制器指向
}).when('/bbb',{
template : '

BBB

{{name}}',controller : 'Bbb'
}).when('/ccc',{
template : '

CCC

{{name}}',controller : 'Ccc'
}).otherwise({
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',function($scope){
$scope.name = 'xiecg-Aaa';
}]);
m1.controller('Bbb',function($scope){
$scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',function($scope){
$scope.name = 'xiecg-Ccc';
}]);

以事件的方式映射路由页面

$route

<div ng-controller="Aaa">
<a href="javascript:void(0);" ng-click="$location.path('aaa')">首页
<a href="javascript:void(0);" ng-click="$location.path('bbb')">内容
<a href="javascript:void(0);" ng-click="$location.path('ccc')">标题

<script type="text/javascript">

var m1 = angular.module('myApp','$location',function($scope,$location){
$scope.name = 'xiecg-Aaa';
$scope.$location = $location;
}]);
m1.controller('Bbb',function($scope){
$scope.name = 'xiecg-Ccc';
}]);

项目更复杂,页面相同(首页&index),数据不同,需要对url进行传参。

$route

<div ng-controller="Aaa">
<a href="javascript:void(0);" ng-click="$location.path('aaa/123')">首页
<a href="javascript:void(0);" ng-click="$location.path('bbb')">内容
<a href="javascript:void(0);" ng-click="$location.path('ccc')">标题
<a href="javascript:void(0);" ng-click="$location.path('aaa/456')">index

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa/:num',controller : 'Aaa'
}).when('/bbb',controller : 'Ccc'
}).otherwise({
redirectTo : '/aaa/:num'
});
}]);

m1.controller('Aaa','$routeParams',$location,$routeParams){
$scope.name = 'xiecg-Aaa';
$scope.$location = $location;
console.log($routeParams); //不同的数据
}]);
m1.controller('Bbb',function($scope){
$scope.name = 'xiecg-Ccc';
}]);

路由的事件监听。

$route

<div ng-controller="Aaa">
<a href="#aaa">首页
<a href="#bbb">内容
<a href="#ccc">标题

<script type="text/javascript">

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

m1.run(['$rootScope',function($rootScope){
//路由切换之前触发的事件
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event); //事件对象
console.log(current); //路径对应的数据值
console.log(pre); //上一个路径
});
}]);

m1.config(['$routeProvider',{
template : '

AAA

'
//templateUrl : 'temp.html'
}).when('/bbb',function($scope){

}]);

补充:

angular事件的传播机制。

前面嵌套了三个controller,我们在中间的controller上绑定了click事件,使用$emit点击的时候,上面的controller也会触发事件。

如果是$broadcast点击就是往下传播。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

路由路由

猜你在找的JavaScript相关文章