Angular 路由

2019独角兽企业重金招聘Python工程师标准>>>

路由：根据地址栏里面的url不同，展现不同的视图。作用为分发，路由本身无法解答问题，它会告诉你该找谁去解决问题。

#是锚点，防止向服务器端发送请求，angular进行拦截。对#/后面的东西去和内部$routeProvider的模板去进行匹配，不同的视图交给不同的控制器去处理

angular 路由是单独提供的功能模块ngRoute,也是一个单独发行的.js文件，使用路由的时候，需要手动去导入angular-route.js文件。使用这个文件的原因是angular本身进行深层次的路由很麻烦，为了简化开发，于是就诞生出了route.js专门用来做路由的js文件

 

 

API一共有两个方法：

1.when( ) : 用于跳转指定的页面，用法在文章下面描述

2.otherwise( ) ： 不满足这些路由情况跳转的页面（index）

 

用angular的路由实现这个的布局是很繁琐的，所以我们需要使用ui-router 来实现深层次的路由嵌套。

直接上项目代码

项目结构：

angular.js ：是gular提供的js文件

angular-route.js ：是路由使用的文件，一定要引入进项目

 

index.html页面内容

 

hello.index页面内容

 

bookList.html页面内容

 

app.js文件  ： 整个项目的配置文件

templateUrl： 跳转的页面

controller：跳转的页面所使用的控制器

一个页面要单独写一个控制器

 

效果为： 在url上手动切换锚点处关联字母，可以看到页面无缝隙的进行了跳转

如果很多人开发同一个项目，该如何合并呢？？

答：每个人定义一个模块，让后整合到一起。bookStoreApp为主启动模块，[ ] 内部为依赖模块，把所有关联的模块都写进[ ]内，这样共同完成一个网站的开发。

 

route路由的缺点为：会产生一个http请求，会把路由到的页面请求回来。如果想避免这种情况，就使用下面的方案

 

注：本文作者不是大漠穷秋，是参考了大漠穷秋的视频讲解然后写出的demo。

 

转载于:https://my.oschina.net/u/3139855/blog/842881