码迷,mamicode.com
首页 > Web开发 > 详细

angularJS的路由!

时间:2017-07-23 10:05:16      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:地址   code   angular   blog   pre   脚本   script   route   body   

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的路由!

标签:地址   code   angular   blog   pre   脚本   script   route   body   

原文地址:http://www.cnblogs.com/e0yu/p/7223392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!