首页 > 代码库 > angularJS的路由！

angularJS的路由！

2024-11-03 15:51:39   210人阅读

angularJS 路由：（分发需求）

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

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

<script type=‘text/javascript‘ src=‘bower_components/angular/angular.js‘></script>
<script type=‘text/javascript‘ src=‘bower_components/angular-route/angular-route.js‘></script>
<script type="text/javascript">
// 创建一个模块
var myApp = angular.module(‘myApp‘,[‘ngRoute‘]);
//配置路由
myApp.config([‘$routeProvider‘,function($routeProvider){
    
}]);
</script>

 

做路由的配置：

 配置路由的规则就是：什么样的请求，就找到什么样的控制器；

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

<script type=‘text/javascript‘ src=‘bower_components/angular/angular.js‘></script>
<script type=‘text/javascript‘ src=‘bower_components/angular-route/angular-route.js‘></script>
<body ng-app="myApp">
    <ul>
        <li><a href="#/a">a</a></li>
        <li><a href="#/b">b</a></li>
        <li><a href="#/c">c</a></li>
    </ul>
    <div ng-view></div>    
</body>
<script type="text/javascript">
// 创建一个模块
var myApp = angular.module(‘myApp‘,[‘ngRoute‘]);
//配置路由
myApp.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider
    .when(‘/students/:name?‘,{
        controller:‘AController‘,
        templateUrl:‘./view/a.html‘
    })
    .when(‘/a‘,{
        controller:‘AController‘,
        templateUrl:‘./view/a.html‘
    })
    .when(‘/b‘,{
        controller:‘BController‘,
        templateUrl:‘./view/b.html‘
    })
    .when(‘/c‘,{
        controller:‘CController‘,
        templateUrl:‘./view/c.html‘
    })
    .otherwise({
        //重定向，做跳转
        redirectTo:‘/c‘
    });
}]);
myApp.controller(‘AController‘,[‘$scope‘,‘$routeParams‘,function($scope,$routeParams){
    $scope.title = ‘你好‘+$routeParams+‘这里是A控制器‘;
}]);
myApp.controller(‘BController‘,[‘$scope‘,function($scope){
    $scope.title = ‘这里是B控制器‘;
}]);
myApp.controller(‘CController‘,[‘$scope‘,function($scope){
    $scope.title = ‘这里是C控制器‘;
}]);
</script>

 

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

解决方法：使用 script 标签

另外的一种写视图的方法：（写到这个里面）

<script type="text/ng-template"></script>
注意：script标签，只有当 type=‘text/javascript‘ 才会被当作JavaScript脚本执行；
script 就算不能执行，也不能在页面上显示；所以很多时候，会把模板写到script 里面：
<script id="a_tmpl" type="text/ng-template">
    <h1>{{title}}</h1>
</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控制器

 

angularJS的路由！


联系
我们