angularjs---------路由

来源：互联网发布：长沙学历网络教育编辑：程序博客网时间：2024/04/30 21:03

什么是路由？

angularjs路由是指一款用angularjs前端语言设计出程序和框架的路由器；

我们可以使用angularjs路由简单优雅地实现页面之间的控制跳转；

下面简单写一下路由的实例：

<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/lib/angular.min.js"></script>    <script src="js/lib/angular-route.min.js"></script>    <script src="js"></script></head><body><ul class="nav nav-tabs navbar-fixed-bottom navbar-inverse nav-justified">    <li><a href="#!/">首页</a></li>    <li><a href="#!/login">登录</a></li>    <li><a href="#!/regist">注册</a></li>    <li><a href="#!/shopcard">购物车</a></li></ul><div ng-view></div></body><script>    var app=angular.module("myApp",["ngRoute"]);    app.config(["$routeProvider",function ($routeProvider) {        $routeProvider                .when("/",{                    templateUrl:"main.html"                }) .when("/login",{            templateUrl:"login.html"        }) .when("/regist",{            templateUrl:"regist.html"        }) .when("/shopcard",{            templateUrl:"shopcard.html"        })    }])</script>

</html>

实例解析：

1、载入了实现路由的 js 文件：angular-route.min.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。

 var app=angular.module("myApp",["ngRoute"]);

3、使用 ngView 指令。

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

app.config(["$routeProvider",function ($routeProvider) {        $routeProvider                .when("/",{                    templateUrl:"main.html"                }) .when("/login",{            templateUrl:"login.html"        }) .when("/regist",{            templateUrl:"regist.html"        }) .when("/shopcard",{            templateUrl:"shopcard.html"        })    }])

AngularJS 模块的 config 函数用于配置路由规则。通过使用 config，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.when来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

templateUrl:

如果我们需要在 ng-view 中插入 HTML 模板文件，则使用该参数。

0 0