微信免费小程序_AngularJS路由完成页面跳转实例

AngularJS路由实现页面跳转实例       这篇文章主要为大家详细介绍了AngularJS路由实现页面跳转的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

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

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

 !DOCTYPE html 
 html lang="en" ng-app="MyApp" 
 head 
 script src="../angular.js" /script 
 script src="../angular-route.min.js" /script 
 script src="../js/main.js" /script 
 script src="../js/homeController.js" /script 
 script src="../js/reservationController.js" /script 
 meta charset="UTF-8" 
 title /title 
 /head 
 body 
 div ng-view 
 !-- 此处为动态加载区域 -- 
 /div 
 /body 
 /html 

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

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

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

 div id="header" 
 p 订餐 /p 
 /div 
 div 
 button ng-click="goToUrl('/reservation')" 帮订餐 /button 
 button ng-click="goToUrl('/showList')" 看订单 /button 
 /div 

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

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


相关阅读