html angularjs 跳转,AngularJS实现单一页面内设置跳转路由的方法

本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法。分享给大家供大家参考，具体如下：

单一页面内设置跳转路由

鉴于现在很多应用的应用功能以及场景都非常简单，如果还按照以前的思路，每个页面做一个html，通过路由进行跳转，不仅在时间上会有延迟，在某些特殊的浏览器(最典型的如微信内置浏览器)中，跳转过程中会出现短暂的白页。

因此，我们在开发过程中，将页面逻辑封装到同一个html中。当系统第一次加载页面时，将所有页面全部加载进去，然后通过angularJS内置的路由进行加载。

直接上代码

声明app

var app = angular.module('ngRouteWxCtb', ['ngRoute','ngCookies'])

.config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/0', {

templateUrl: '0.html',

controller: 'loginCtrl'

}).when('/1', {

templateUrl: '1.html',

controller: '1Ctrl'

}).when('/2', {

templateUrl: '2.html',

controller: '2Ctrl'

}).when('/3', {

templateUrl: '3.html',

controller: '3Ctrl'

}).when('/4', {

templateUrl: '4.html',

controller: '4Ctrl'

}).when('/5', {

templateUrl: '5.html',

// controller: '5Ctrl'

}).otherwise({redirectTo: '/login'});

}]);

在页面中全部加载所有view

页面0

页面1

页面2

页面3

页面4

页面5

然后通过路由进行跳转

app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) {

$scope.LoginSucessLocation = function () {

var hre = './main#/1';

location.href = hre;

}

})

希望本文所述对大家AngularJS程序设计有所帮助。