Angular-route

最新推荐文章于 2019-06-24 20:25:12 发布

17K星辰

最新推荐文章于 2019-06-24 20:25:12 发布

阅读量418

点赞数

分类专栏： angularjs 文章标签： angularjs route

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文简单介绍AngularJs 路由的使用

1.安装

Angular中已将路由模块独立出来，为了能够使用route，需要安装路由模块，（也可以直接下载并在项目中引用）

$ bower install –save angular-route

2.用法

使用路由很容易，只需要注入 ngRoute 模块作为应用程序的依赖即可

angular.module('myApp',['ngRoute'])
    .config(function($routeProvider) {

    });

在路由模块里面的.config()中注入$routerProvider，提供两种方法来定义路由

when()
该方法需要两个参数：
（1）templateUrl：匹配路由的字符串
（2）controller：路由定义对象
一般main-route 经常使用”/”来表示，也可以定义URL参数，在controller里就可以使用$routeParams获取url参数
otherwise()
该方法定义了当应用找不到指定路由的时候跳转的路由

3.代码

//1.定义
angular.module('myapp',['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/',{
                templateUrl:'views/main/html',
                controller: 'MainCtrl'
            })
            .when('/day/:id',{
                templateUrl:'views/day.html',
                controller:'DayCtrl'
            })
            .otherwise({
                redirectTo:'/'
            });
    })

//2.使用
<html>
    <head>
        <meta charset="utf-8">
        <title>angular-route</title>
    </head>
    <body>
        <header>头部</header>
        <content>
            <h1>正文</h1>
            <div ng-view></div>
        </content>
        <footer>尾部</footer>
    </body>
</html>