angular中的ng路由及SPA应用

来源:互联网 发布:nginx apache 共存 编辑:程序博客网 时间:2024/05/23 13:54

路由:是AngularJs构建单页面应用的基础;是网络数据或者请求进行分发的一个网络组件; 是一个用于请求URL分发和跳转的一个应用组件Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

ng路由是AngularJs官方提供的一种简单的路由操作。

ng路由主要分三个组织部分:路由指令、路由服务、路由服务提供者。

路由指令:ng-view

描述:ngview指令主要用于将路由指向的页面渲染到当前页面的布局中。

概述:会创建自己独立的作用域。

语法

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>

onload:当视图发生改变时执行属性值中的表达式

autoscroll:当视图发生改变时自动触发$anchorScroll事件

事件

路由视图一旦加载时,就会自动触发$viewContentLoaded事件

路由提供者:$routeProvider

描述

内置服务对象$routeProvider主要用于进行路由配置

该服务的使用必须依赖ngRoute模块,也就是项目中必须添加animate-route.js

主要方法

1)when(path, route);用于在访问path路径时,跳转到route指定的视图

       path:路由跳转的路径

       route:路由对象<组件对象>,一个JSON对象

2)otherwise(params);用于在访问不存在的路径时,跳转的默认路径或者视图

       params:指定路径或者路由对象

路由服务:$route&$routeParams

$route服务被用于进行深层超链接信息的描述,它会监听$location.url()地址并进行url地址和指定的路由视图之间的映射关系。

$routeParams服务允许开发人员可以进行路由中参数的处理。

SPA应用

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

传统的项目,通过大量页面跳转来实现不同功能的业务处理。如果项目的业务非常复杂,会给网页的开发和维护就会造成大量重复的工作,同时也提升了开发和维护的复杂度。

优点:

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

SPA应用中,单页面中就会出现多个独立的控制器
1)多个独立控制器之间的数据共享,方式一:使用$rootScope来进行数据共享
2)多个独立控制器之间的数据共享,方式二:使用自定义服务进行数据的传递 自定3)义服务主要的使用场景:用来进行不同控制器之间的数据共享和传递

今天的分享就到这里哦,明天继续。

0 0