angular 路由router的用法总结

发布时间：2020-12-17 09:25:40 所属栏目：安全来源：网络整理

导读：1，html页面 !DOCTYPEhtmlhtmllang="en"ng-app="myApp"headmetacharset="UTF-8"metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"titleDocument/titlescriptsrc="http://cdn.bootcs

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>
<!--自定义指令directive----自定义标签自定义属性组件-->
<!--嵌套的视图-->
</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文件

main.controller("mainCtrl",["$scope",'$interval',function($scope,$interval){
$scope.name="--平凡的世界--"
//varcount=0;
//$interval(function(){
//count++
//console.log(count)
//},1000);
}])

//$timeout$interval

main.controller("myTab01","$timeout",$timeout){
//...

}])

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(过滤器：放置自己写的自定义过滤器js文件)、public(公共资源层)、router(路由层)、node_modules(用于安装)、server(服务)；

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!