AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容。
所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的“跳”转可以理解为是局部页面的跳转。
AngularJS是通过改变位置地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面“跳转”的实例:
使用app.config来定义不同的位置地址加载不同的页面,并拥有独立的控制器;
应用var=角。模块(“MyApp”, [' ngRoute ']);
app.config(函数(routeProvider美元){
routeProvider美元
当('/',{//'/'表示页面初始加载内容;
控制器:“homeCtrl ',//控制器
templateUrl:“. ./视图/home。html的//显示的内容
}）
当(/预订,{//表示地址结尾为预订时加载的内容;
控制器:“reservationCtrl”,
templateUrl:“. ./视图/reservation.html”
}）
}）;
之前
,使用ng-view来定义动态内容加载的位置;
& lt; !DOCTYPE html>
& lt; html lang=癳n”ng-app=癕yApp”比;
& lt; head>
& lt;脚本src=" https://www.yisu.com/angular.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/angular-route.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/main.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/homeController.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/reservationController.js "祝辞& lt;/script>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; div ng-view>
& lt; !——此处为动态加载区域——比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
,上面提到,每个页面都会有一个独立的控制器,加载页面的同时会执行控制器中的函数;
app.controller (homeCtrl,函数(范围、位置美元){//页面的控制函数;
$ scope.goToUrl=函数(路径){//此方法可以改变位置地址;
美元location.path(路径);
}
}）;
之前
,上述控制器所对应的html页面为:
& lt; div id="头"比;
& lt; p>订餐& lt;/p>
& lt;/div>
& lt; div类=吧硖濉北?
& lt;按钮ng-click=" goToUrl('/预订')”class=癰igButton”在帮订的餐& lt;/button>
& lt;按钮ng-click=" goToUrl ('/showList ')”class=癰igButton”在看订单& lt;/button>
& lt;/div>
ng-click方法为点击事件执行指定函数方法。
,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
