angular在一个页面实现局部跳转
路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。
环境搭建:需要引入两个重要的文件angular.min.js和angular-route.js;
route:路由
provider:提供者
$routeProvider:AngularJS提供的用于进行路由配置的内置服务
app.config()函数主要用于进行《配置信息》的添加
一般主要通过两个方法:
when():配置路径和参数;
otherwise:配置其他的路径跳转,可以想成default。
when的第二个参数:
controller:对应路径的控制器函数,或者名称
controllerAs:给控制器起个别名
template:对应路径的页面模板,会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl:对应模板的路径,比如"src/xxx.html"
路由有几个常用的事件:
$routeChangeStart:这个事件会在路由跳转前触发
$routeChangeSuccess:这个事件在路由跳转成功后触发
$routeChangeError:这个事件在路由跳转失败后触发
使用
在页面中,写入URL跳转的按钮链接 以及 ng-view标签
注意. Angular中的ng路由
* 路由是什么东西?
* Angular中的路由,主要依赖那个模块?
* Angular中的路由的使用
* * ng-view 指令:用于展示对应模板的指令
* * $routeProvider:Angular中路由服务提供者,用于配置路由信息
* * $routeParams:Angular中进行路由参数传递时使用的一个内置服务
* * * * * * * * * * * * * * * * * * * * *
* 一旦涉及到路由操作,就出现了SPA应用
* SPA应用是什么东西?
* SPA应用中,单页面中就会出现多个独立的控制器
* * 多个独立控制器之间的数据共享,方式一:使用$rootScope来进行数据共享
* * 多个独立控制器之间的数据共享,方式二:使用自定义服务进行数据的传递
* * *** 自定义服务主要的使用场景:用来进行不同控制器之间的数据共享和传递
* * * * * * * * * * * * * * * * * * * * *
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>系统单页面</title>
<!-- 引入核心框架文件 -->
<script src="js/lib/AngularJS/angular.min.js"></script>
<!-- 引入Angular路由模块文件 -->
<script src="js/lib/AngularJS/angular-route.js"></script>
</head>
<body>
<!-- 在Angular1.5之前,锚链接跳转,使用#/开头即可 -->
<!-- 在Angular1.5开始,锚链接跳转,使用#!/开头即可 -->
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/login">登录</a></li>
<li><a href="#!/regist">注册</a></li>
<li><a href="#!/shopcart">购物车</a></li>
</ul>
<!-- 指定显示模板的位置 -->
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl:"template/main.html"
}).when("/login", {
templateUrl:"template/login.html"
}).when("/regist", {
templateUrl:"template/regist.html"
}).when("/shopcart", {
templateUrl:"template/shopcart.html"
}).otherwise("/");//这里是默认显示的页面
}]);
</script>
</body>
</html>