AngularJS路由实现页面跳转实例

前端之家收集整理的这篇文章主要介绍了AngularJS路由实现页面跳转实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

页面初始加载内容; controller: 'homeCtrl',//控制器 templateUrl: '../view/home.html' //显示内容 }) .when('/reservation',{ //表示地址结尾为reservation时加载的内容; controller: 'reservationCtrl',templateUrl: '../view/reservation.html' }) });

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

<script src="../js/main.js"&gt;</script>
<script src="../js/homeController.js"&gt;</script>
<script src="../js/reservationController.js"&gt;</script>

<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="UTF-8"&gt;
<title></title>

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

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

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

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

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

原文链接:https://www.f2er.com/js/41100.html

猜你在找的JavaScript相关文章