第220天:Angular---路由

内容介绍,为什么要使用前端路由?

在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之间的切换,也就是说无法实现单页应用。  ajax的缺陷  1、不会在浏览器里面留下历史记录  2、用户无法将页面加为书签保存下来或者无法通过发送网址给其他人,其他人通过直接点击网址进入这个页面  3、ajax无法实现SEO优化,ajax对搜索引擎是不友好的  这也是为什么要使用前端路由的一个原因。

首先我们来看一下app.js这个入口文件 

 1 var bookStoreApp = angular.module('bookStoreApp',['ngRoute','ngAnimate','bookStoreCtrls','bookSroreFilters','bookStoreServices','bookStoreDirective']);
 2 
 3 bookStore.config(function($routeProvider){
 4     $routeProvider:when('/hello',{
 5         temolateUrl:'tpls/hello.html',
 6         controller:'HelloCtrl'
 7     }).when('/list',{
 8         temolateUrl:'tpls/bookList.html',
 9         controller:'BookListCtrl'
10     }).otherwise({
11     redirectTo:'/hello'
12     })
13 });

我们定义一个模块,叫做bookStoreApp,  我们在上面调用config这个方法,  大家会发现有个routeProvider,前面有一个$$符号,这个是AngularJS自身所提供的路由机制,  根据$routeProvider我们来进行路由的配置,

如:当浏览器地址栏发现地址是hello这样一个地址的时候,他就会使用tpls/hello.html这样的一个模板,  有HelloCtrl这个控制器,来处理模板和数据之间的绑定,

当他发现浏览器地址栏发现地址是list这样一个地址的时候,他就会调用另外一个模板,  其他所有的情况都会直接跳到hello,

这里大家需要注意的是,AngularJS1.2以后,把机制之间做了模块化的处理,也就是route没有包含在Angular.js这个文件里面,而是把它独立出来成了一个模块,  大家可以看一下下面的目录图,看一下angularJS里面的模块是如何进行切分的,

angularJS不再像以前一样,把所有的文件都合在angular.js这个文件里面,  而是切分成一个个独立的js文件了,

所以这就导致了当我们需要使用路由的时候,一定要在页面上手动导入angular-route.js文件,

1 <script src="framework/1.3.0.14/angular-route.js"></script>

如果你忘了加,浏览器可能会提示routeProvider不是对象或者没找到,如果你发生这个问题,你一定要检查一下页面有没有导入angular-route.js文件

【提示】这个是AngularJS本身自带的路由机制,这个路由有一个缺陷,它是无法实现深层次嵌套的路由的  所有就有第三方开发了一个叫做Router

欢迎了解https://angular-ui.github.io/ ,https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router查看详情

UI-Router提供了一种很好的机制,可以实现深层次嵌套

首先你需要从github上,将UI-Router这个包下载下来,然后导入到页面中

1 <script src="framework/1.3.0.14/angular-ui-router.js"></script>

如果你使用了angular-ui-router.js,你就不需要使用angularJS原生的routeProvider了,  写法上也会发生一定的变化,

1 <body>
2    //写一个指令,这表示的是一个视图
3    <div ui-view></div>
4 </body>

我们看一下js部分,这里我们不在使用routeProvider了,其实用法上大同小异,  换成另外连个$$stateProvider, $urlRouterProvider,  urlRouterProvider用法和angularjs原生的routeProvider写法上非常相似,  但是stateProvider它定义的方法名叫做state,

首先我们要调用stateProvider上面的state方法,我们来配置当浏览器地址栏发生变化的时候使用什么样的模板,  这里有很多比较快捷的语法  我们可以看到html里面只有单个的div,如何使用div去填充首页的内容呢?

1 <div ui-view></div>

我们看js,首先有个url参数’/index’,  并且views里面填充了好几组内容,其实是三组view,  我们的页面分成两个部分,顶部是一个导航条,然后下面的内容是会跟着切换的,  顶部我们写一个空的字符串”,我们利用tpls3/index.html作为我们主页的html模板,  在tpls3/index.html模板里面,我们又把模板分成了两块,一个叫topbar一个叫main,

1 <div class="container">
2     <div ui-view="topbar"></div>
3     <div ui-view="main"></div>
4 </div>

我们可以看到js里面有个topbar@index,下面有个叫做main@index,  通过@这样的语法,stateProvider就知道每个小块自动加载什么样的模板,

我们可以看到下面的state写法都差不多,当然可以看到index.usermng,index.usermng.highendusers等,  也就是说可以用‘’点‘’来分割子模块子区域,  这样的话,有了ui-view以后,我们就可以使用这种深层次的嵌套了  包括一个页面上分成多个区域,多个区域都可以定义命名的ui-view,  这样可以只切换其中的一小块区域,而不用整体切换

前端路由基本原理

哈希#  可以实现,浏览器不刷新页面,实现url地址的变化,大部分浏览器均可支持

HTML5中history API  我们可以通过js代码去修改URL地址栏里面的地址,这样的话,浏览器会留下历史记录,但是页面不会跳转

路由的核心是给应用定义“状态”

使用路由机制会影响到应用的整体编码方式(需要预先定义好状态)

考虑兼容性问题与“优雅降级”  会检查浏览器,如果浏览器比较旧会使用哈希的方式,如果是新的浏览器会使用HTML5中history API的方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

URL中的#

作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

11210
来自专栏米扑专栏

Node.js 安装与开发

48880
来自专栏c#开发者

Vs.net 2008 sp1新特性之Dynamic Data Web Site

Vs.net 2008 sp1新特性之Dynamic Data Web Site 介绍 asp.net的动态数据,是一个web site开发框架,可让您很容...

34650
来自专栏python爬虫实战之路

网络字体反爬之起点中文小说

前几天跟同事聊到最近在看什么小说,想起之前看过一篇文章说的是网络十大水文,就想把起点上的小说信息爬一下,搞点可视化数据看看。这段时间正在看爬虫框架-pyspid...

22320
来自专栏云计算教程系列

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

16320
来自专栏小狼的世界

Silverlight学习笔记:资源的位置

    在 Web 项目中,我们免不了使用一些诸如图片、音频、视频、字体之类的在我们的程序中非可执行的数据文件,习惯称之为资源文件。在Silverlight中,...

7220
来自专栏数据科学学习手札

(数据科学学习手札50)基于Python的网络数据采集-selenium篇(上)

  接着几个月之前的(数据科学学习手札31)基于Python的网络数据采集(初级篇),在那篇文章中,我们介绍了关于网络爬虫的基础知识(基本的请求库,基本的解析库...

17540
来自专栏从零开始学自动化测试

Fiddler抓包7-post请求(json)

前言 上一篇讲过get请求的参数都在url里,post请求相对于get请求多了个body部分,本篇就详细讲解下body部分参数的几种形式。 一、body数据类...

31170
来自专栏木头编程 - moTzxx

PHP base64 编码转化图片并进行指定路径的保存和上传处理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

24810
来自专栏葡萄城控件技术团队

带你走近AngularJS - 基本功能介绍

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创...

218100

扫码关注云+社区

领取腾讯云代金券