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: '../view/home.html' //显示的内容 }) .when('/reservation',{ //表示地址结尾为reservation时加载的内容; controller: 'reservationCtrl', templateUrl: '../view/reservation.html' }) });
使用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>上面提到,每个页面都会有一个独立的控制器,加载页面的同时会执行控制器中的函数;
相关推荐
主要为大家详细介绍了AngularJS路由实现页面跳转的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了详解angularjs项目的页面跳转如何实现 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了AngularJS之页面跳转Route ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下
主要给大家介绍了angular2中router路由跳转navigate的使用与刷新页面问题的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
使用angularjs的但页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现...第二步:使用config来配置路由跳转 myapp.config( f
本文给大家分享的是使用angularjs路由框架实现的一个简单页面跳转功能,非常的实用,也很详细,有需要的小伙伴可以参考下
├最新AngularJS开发宝典—第078讲 uiRouter路由控制器或指令中执行路由跳转.mp4 ├最新AngularJS开发宝典—第079讲 uiRouter路由参数设置与$stateParams服务的使用.mp4 ├最新AngularJS开发宝典—第080讲 uiRouter...
主要介绍了AngularJS ui-router刷新子页面路由的方法,网上虽然有很多种方法,但是都不适合小编,今天小编给大家分享一个还不错的方法,需要的朋友可以参考下
AngularJS模块化开发实例--增删改查项目源码(涉及requirejs、Bootstrap、ng路由跳转等)
使用AngularJS作为前台页面框架,控制前台页面,实现页面多视图模块化,真正实现页面跳转更改路径不刷新效果,这是Ajax无法实现的功能。
63使用AngularJS自带的路由服务175 基础路由定义175 显示匹配的路由内容176 匹配灵活的路由177 定义默认路由178 访问路由参数178 多个控制器重用局部模板178 路由改变时避免UI抖动179 取消路由更新181 64$...
AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解...
使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个...
之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的...
路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理。 ng路由 ng 路由是 AngularJS 官方提供的一种简单的路由操作。 ng 路由主要分三个组成部分:...