好资源导航 » 文章资讯 » AngularJS路由实现页面跳转实例

AngularJS路由实现页面跳转实例

2024-02-28 08:07:03 44

AngularJS是一个javascript框架，通过AngularJS这个类库可以实现目前比较流行的单页面应用，AngularJS还具有双向数据绑定的特点，更加适应页面动态内容。

所谓单页面应用就是在同一个页面动态加载不同的内容，而这里的“跳转”可以理解为是局部页面的跳转。

AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置，下面是一个简单应用AngularJS路由来实现页面“跳转”的实例：

使用app.config来定义不同的location地址加载不同的页面，并拥有独立的控制器；

varapp=angular.module('MyApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{//'/'表示页面初始加载内容；
controller:'homeCtrl',//控制器
templateUrl:'../view/home.html'//显示的内容
})
.when('/reservation',{//表示地址结尾为reservation时加载的内容；
controller:'reservationCtrl',
templateUrl:'../view/reservation.html'
})
});

使用ng-view来定义动态内容加载的位置；

上面提到，每个页面都会有一个独立的控制器，加载页面的同时会执行控制器中的函数；

app.controller('homeCtrl',function($scope,$location){//页面的控制函数；
$scope.goToUrl=function(path){//此方法可以改变location地址；
$location.path(path);
}
});

上述控制器所对应的html页面为：


订餐

帮订餐看订单

ng-click方法为点击事件执行指定函数方法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

AngularJS路由实现页面跳转实例

热门推荐

随机推荐