AngularJS $route路由

前段时间的项目用到了AngularJS route,在获取URL参数传变量过程中遇到了些问题,顺利解决了,趁着周末总结一下,分享之。

路由配制方法

一般来说,路由配置方法的形式如下所示:

angular.module("sportsStore", ["ngRoute"])
        .config(function ($routeProvider) {
                       
            $routeProvider.when("/welcome", {
                templateUrl: "/views/welcome.html"
            });

            $routeProvider.when("/thank", {
                templateUrl: "/views/thankyou.html"
            });

            $routeProvider.otherwise({
                templateUrl: "/views/main.html"
            });
        });
通过.confg(function($routeProvider){}) 方法进行设置。然后通过添加when函数,设置模板url。
otherwise方法表示,如果任何其它方法都匹配不到,将匹配otherwise里面的。

路由配置View的使用

通过$routeProvider定义好路由模式之后,默认是不会添加到HTML的视图当中。需要通过命令,方能引入$routeProvider的视图路由。如下:

    
    
    
    
用ng-view接收对应的视图模板,给$route对应的视图占位可以根据配置来放置

URL的配置

$stateProvider
	.state("login",{
	url:"/login",
	templateUrl: "/pages/login.html"
	})
当我们访问index.html/login时, 'login'状态将被激活,同时index.html中的ui-view将被'login.html'填充。或者,通过transitionTo('login')方法将状态转变到'login'状态,同时 url 将更新为index.html/login。

URL的参数

用:或者子页面的参数传送:
$stateProvider
	.state("appdetail",{
	url:"/app/:instance",
	templateUrl: "/pages/app.detail.html"
	})
module.controller('DCtrl', function($stateParams) { 
	$stateParams; // has instance  
	}

//A  A.B类型的子页面的参数
$stateProvider.state("component", {
	url: "/:apphost/:instance/:id",
	templateUrl: "/pages/component.info.html"
	});
module.controller('ACtrl', function($stateParams) { 
	$stateParams; // has apphost, instance, and id  
	}

$stateProvider.state("component.jvminfo",{
	url:"/jvminfo",
	templateUrl: "/pages/jvm.info.html",
	params: {
		"component": "虚拟机",
		"componenten":"jvminfo"
		}       //可定义参数传送
	});
module.controller('ABCtrl', function($stateParams) { 
	$stateParams; // has apphost, instance, id, component, and componenten
	}
带?的指定参数:
$stateProvider.state("component", {
	url: "/component?myParam",
	templateUrl: "/pages/component.info.html"
	});

module.controller('DCtrl', function($stateParams) { 
	$stateParams; // has myParam
	}

$stateProvider.state("component", {
	url: "/component?myParam1&myParam2",
	templateUrl: "/pages/component.info.html"
	});

module.controller('DCtrl', function($stateParams) { 
	$stateParams; // has myParam1, myParam2
}

具体实例:
// 如果状态中 url 属性是:
url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to' 

当浏览:'/users/123/details//0' 
$stateParams 对象将是{ id:'123', type:'', repeat:'0' } 

当浏览'/users/123/details/default/0?from=there&to=here' 
$stateParams 对象将是{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

你可能感兴趣的:(angularjs,route,url)