您的位置:首页 > Web前端 > AngularJS

Angular快速入门--路由篇

2017-05-02 19:16 274 查看

什么是路由?

路由是AngularJS构建单页面应用的基础。

路由就是网络数据或者请求进行分发的一个网络组件。

是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$roteProvider路由服务提供者进行核心的配置处理。

什么是单页面

单页面应用,也成为SPA,是singleton  page  application的缩写。

单页面应用:程序在执行的过程中,我们不论访问任何链接,都会在同一个页面中展示数据在整个项目执行过程中,客户看到的都是唯一的一个页面,不同的是~在整个页面中,会根据用户请求的内容的不同,动态的更新页面中的某一个部分的数据,在这样的模式下,项目运行只需要一个基础的页面即可,其他的都是模板。模板就是用于在这个基础页面中更新的数据。

SPA通过路由功能,来让我们的WEB应用,在运行的过程中,依托于某一个页面模板进行业务处理,在SPA应用中,我们可以通过一个模板页面和其他的业务页面进行不同的路由组合来完成复杂和庞大的页面逻辑和业务的处理!

ng路由

ng路由是AngularJS官方提供的一种简单的路由操作。
ng路由主要分三个组成部分:路由指令、路由服务、路由服务提供者

路由指令:ng-view

描述:ngView指令主要用于将路由指向的页面渲染但当前页面的布局中。
指令概述:指令会创建自己独立的作用域

用法:
指定显示模板的位置
<div ng-view></div>
或者
<ng-view></ng-view>

路由提供者:$routeProvider

描述:AngularJS提供的用于进行路由配置的内置服务
内置服务对象$routeProvider主要用于进行路由配置
该服务的使用必须依赖ngRoute模块,也就是项目中必须添加animate-route.js

用法:

app.config()函数主要用于进行《配置信息》的添加
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("/");//用于在访问不存在的路径时,跳转的默认路径或者试图
}]);

内置服务($route)和路由服务($routeParams)

$route服务被用于进行深层超链接信息的描述,它会监听$location.url()地址并进行url地址和指定的路由试图之间的映射关系。
$routeParams服务允许开发人员可以进行路由中参数的处理。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: