angular中的路由简单使用
来源:互联网 发布:腾讯数据库 编辑:程序博客网 时间:2024/06/07 15:26
在单页面应用程序中比如angular应用,我们需要根据url的变化(即:不同的请求),来分配不同的资源。根据请求的URL来决定执行哪个模块,这个过程叫路由,同时,我们需要设计路由规则。
下面给出一个简单的小demo:
html结构:
<body ng-app='rootApp'> <ul> <li><a href='#/'>主页</a></li> <li><a href='#/floor1'>一楼</a></li> <li><a href='#/floor2'>二楼</a></li> </ul> <!-- ng-view 渲染站位 --> <div ng-view></div></body><!-- 引入angular包 --><script src='bower_components/angular/angular.js'></script><!-- 引入angular-route包 --><script src='bower_components/angular-route/angular-route.js'></script><!-- 下面是渲染模板 --><script id='tmpl' type='text/ng-template'> <h1>{{placeholder}}</h1></script>
js结构:
/* 此处定义模块,由于需要设定路由,所以要注入ngRoute */ var rootApp = angular.module('rootApp', ['ngRoute']); /* 定义路由表(路由规则)*/ rootApp.config(['$routeProvider', function($routeProvider) { /* $routeProvider 就相当于交通警察,根据when和otherwise指挥路由走向 */ $routeProvider .when('/', { // 当请求的“URL” / , 找当前定义控制器和视图 controller: 'DefaultController', /* template: '<h1>{{hello}}</h1>' */ templateUrl: 'tmpl' }) .when('/floor1/1', { controller: 'Floor1', templateUrl: 'tmpl' }) /* 这里用:id这种形式来保存路由参数,以便后来用$routeParams可以取到 */ .when('/floor2/:id/:name/:age', { controller: 'Floor2', templateUrl: 'tmpl' }) .otherwise({ /* 都不匹配,定向到根目录 */ redirectTo: '/' }); }]); // 定义相关控制器 rootApp.controller('DefaultController', ['$scope', function($scope) { $scope.placeholder= '当前为主页'; }]); rootApp.controller('Floor1', ['$scope', function($scope) { $scope.placeholder = '当前为1楼'; }]); rootApp.controller('Floor2', ['$scope', '$routeParams', function($scope, $routeParams) { /* $routeParams 用于解析请求参数 */ console.log($routeParams); $scope.placeholder= '当前为2楼'; }]);
总结:
angular中的路由需要使用它的ngRoute模块,具体使用方法如上所示,其中路由表的设计是通过模块配置$routeProvider的when和otherwise来处理不同的请求参数。
其中ng-view用于占坑,when中的template或者是templateUrl用于渲染控制层定义的数据,去填这个坑,其中路由参数是根据:parmName
来指定,通过$routeParams来解析参数。
0 0
- angular中的路由简单使用
- angular中的路由的基础使用
- angular路由(简单)
- 简单的angular路由
- angular 简单路由
- angular中的路由
- #angular中的路由
- Angular中的路由问题~
- angular路由的使用
- angular路由的简单应用
- angular 路由中的多视图
- angular路由的使用案例
- angular js ng-route 路由简单实例
- Angular 路由 过滤 实行简单分页
- angular中的ng路由及SPA应用
- angular.js的路由和模板在asp.net mvc 中的使用
- angular 路由
- angular路由
- ubuntu14.04Lts安装Tensorflow(2)
- mysql主从同步-错误记录
- Android仿微信通讯录功能,好友排序+字母索引
- 网络编程和反射机制
- 了解枚举类型(2)
- angular中的路由简单使用
- 在游戏的SKScene中添加Button
- HTTP攻击与防范--PHP安全配置
- opencl:原子命令实现自旋锁(spinlock)的使用限制
- Android图解浅析事件拦截机制
- 第八届河南省程序设计大赛
- android开发之java代码中字符串对比忽略大小写。java程序员必回,可用来比对验证码等问题
- Lua与c/cplus交互
- Android LayoutInflater详解