博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularJS的路由!
阅读量:5867 次
发布时间:2019-06-19

本文共 1852 字,大约阅读时间需要 6 分钟。

angularJS 路由:(分发需求)

angularJS 中路由是单独提供的功能模块,ngRoute  也是一个单独发行的文件

可以通过 npm 去安装这个包:angular-route

 

做路由的配置

 配置路由的规则就是:什么样的请求,就找到什么样的控制器;

when就是"当"的意思,”当“这个的时候,请求这个控制器:

    

 

在页面请求这个路由的时候,会发现多加载了一个View模板文件:

解决方法:使用 script 标签

另外的一种写视图的方法:(写到这个里面)

注意:script标签,只有当 type='text/javascript' 才会被当作JavaScript脚本执行;
script 就算不能执行,也不能在页面上显示;所以很多时候,会把模板写到script 里面:

修改模板文件:

.when('/a',{    controller:'AController',    templateUrl:'a_tmpl'})

这里是:找是否存在一个 a_tmpl 的script , 如果有就把他作为模板去使用

 

 

还有这样的一种需求:例如这种需求:
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan
 
难道我们还要写很多的when吗
这个是麻烦也解决不了的,不可能为每一个学生,例如“张三”都去写一个控制器和模板:
所有的学生都应该:都应该放到一个控制器使用一个模板
#/a 这用的地址是属于特定的地址;
#/student/zhangsan 这种是属于特定一类的地址;
例如请求:
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/zhangsan

 

我们可以使用 “ : name”去匹配任意的字符串:

//.when('/students/:name?',{.when('/students/:name',{    controller:'AController',    templateUrl:'./view/a.html'})

这里的 “:”号是一个占位符,“?”说明这个位置可以省略:

例如:请求这个地址,也是跳转到a控制器,就是后面的?表示后面的可以省略
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/

 

如何去拿这个传入的名字
方法:重新传入一个新的对象:
myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){    $scope.title = '你好'+$routeParams+'这里是A控制器';}]);
 
$routeParams:是拿路由传递过来的参数;
例如
我们请求的是 /students/zhangsan 这个地址
拿/students/:name这个规则去匹配
它能提取出来一个 键值:{name:zhangsan}
复杂一点的:
例如请求的是 /students/zhangsan
用/:role/:name去匹配:
提取出来的键值:{role:students,name:zhangsan}
.when('/students/:name',{    controller:'AController',    templateUrl:'./view/a.html'})myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){    $scope.title = '你好'+$routeParams+'这里是A控制器';}]);

例如请求这个:

http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan

看到的结果就是:你好zhangsan这里是A控制器

 

转载于:https://www.cnblogs.com/e0yu/p/7223392.html

你可能感兴趣的文章
[裴礼文数学分析中的典型问题与方法习题参考解答]5.1.17
查看>>
使用 node-inspector 调试 Node.js
查看>>
Codeforces Round #303 (Div. 2) E. Paths and Trees 最短路
查看>>
设计模式——工厂模式
查看>>
UIKit 框架之UITableView二
查看>>
总结jQuery选择器
查看>>
说说溢算那些事~!你的计算方式溢算了吗?(转)
查看>>
FolderSync :The various features and how to use them
查看>>
Oracle数据库入门——常用的数据字典
查看>>
大约++和--了解运营商
查看>>
使用libsvm对MNIST数据集进行实验
查看>>
MATLAB新手教程
查看>>
Tomcat 的context.xml
查看>>
Scala学习(五)练习
查看>>
reactor官方文档译文(2)Reactor-core模块
查看>>
mysql函数之九:MySql取得日期(前一天、某一天)
查看>>
网页百度地图API相关资料
查看>>
Linux 安装xtrabackup的依赖问题
查看>>
接口和逻辑--多进程或单一进程
查看>>
Dottrace跟踪代码执行时间
查看>>