大佬教程收集整理的这篇文章主要介绍了angular 路由router的用法总结，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
1，html页面
<!DOCTYPEhtml> <htmllang="en"ng-app="myApp"> <head> <Metacharset="UTF-8"> <Metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <title>Document</title> <scriptsrc="http://cdn.bootcss.com/angular.js/1.5.3/angular.js"></script> <scriptsrc="http://cdn.bootcss.com/angular.js/1.5.3/angular-route.js"></script> <scriptsrc="../modules/mainModule.js"></script> <scriptsrc="../router/route.js"></script> <scriptsrc="../controllers/mainControllers.js"></script> <scriptsrc="../controllers/tab01.controller.js"></script> <scriptsrc="../controllers/tab02.controller.js"></script> <linkrel="stylesheet"href="../public/css/main.css"> </head> <bodyng-controller="mainCtrl"> <divid="wrap"> <header> <h1> {{ name }} </h1> </header> <divid="content"> <ng-view> <!--@L_489_3@指令directive----@L_489_3@标签@L_489_3@属性组件--> <!--嵌套的视图--> </ng-view> </div> <divid="tabBox"> <ul> <li><ahref="#/tab1">选项卡1</a></li> <li><ahref="#/tab2:maxiaotian">选项卡2</a></li> </ul> </div> </div> </body> </html>
注：路由之间的传参，可以使用方法：在路由的虚拟路径后面加上“：参数”，例如“<a href="#tab02:xiaoming"></a> ”,该方法是遵循的restful API的设计规范。
3,controller文件夹下的mainController.js、tab01.controller.js、tab02.controller.js文件
@H_502_8@main.controller("mainCtrl",["$scope",'$interval',function($scope,$interval){ $scope.name="--平凡的世界--" //varcount=0; //$interval(function(){ //count++ //console.log(count) //},1000); }]) //$timeout$interval @H_502_8@main.controller("myTab01","$timeout",$timeout){ //... }]) @H_502_8@main.controller("myTab02",function(){ //... }])3,配置路由:
3.1，因为要用到angular的路由，所以要依赖注入路由服务 在modules文件下的mainModule.js文件
varmain=angular.module("myapp",[$ngRouter]);
3.2，配置路由文件router.js
//$routeProvider提供路由服务 //$LOCATIOnProvider路由里地址栏服务 main.config(["$routeProvider","$LOCATIOnProvider",function($routeProvider,$LOCATIOnProvider){ $routeProvider .when("/tab1",{//地址栏访问tab1路径的时候跳转掉../view/tab01.html页面 templateUrl:"../view/tab01.html",controller:"myTab01" }) .when("/tab2:num",{//地址栏访问tab1路径的时候跳转掉../view/tab01.html页面 templateUrl:"../view/tab02.html",controller:"myTab02" }) .otherwise({ redirectTo:"/tab1" }) }])
angular的路由有两种：ng-router和ui-router。两者的区别：ng-router只能嵌套单页面、ui-router可以嵌套多视图页面；
一个项目架构包括：m(module数据层)、v(view视图层)、c(controller控制器层)、filter(过滤器：放置自己写的@L_489_3@过滤器js文件)、public(公共资源层)、router(路由层)、node_modules(用于安装)、server(服务)；
以上是大佬教程为你收集整理的angular 路由router的用法总结全部内容，希望文章能够帮你解决angular 路由router的用法总结所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。