AngularJs多重视图和路由的使用

使用AngularJs来做多重视图和路由是在方便不过了，在开发过程中，都有许多的页面，而这些页面都有相同的部分，比如页面的头部和尾部通常都是一样的，变化的都是主体部分，还有就是一些后端管理的一些项目，通常不变的都是头部，尾部和菜单部分，变化的都是右边的内容部分，使用AngularJs的多重视图和路由就可以很方便的实现这样的效果。在实现之前需要准备两个文件，一个是angular的主JS文件，另一个是angular的路由JS文件，如下：

?

1 2	<script src= "js/angular.min.js" ></script> <script src= "js/angular-route.min.js" ></script>

在页面中引入这两个JS文件就可以使用angular了，这里将实现这效果分为如下几步：

1.创建一个简单的布局文件

2.创建一个模块，可以写在当前的布局文件中也可以新开一个js文件，为了方便管理还是分开好点

3.创建路由规则

4.如果有用到控制器，再创建控制器

接下来就具体来实现这个效果：

1.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

html>          <meta charset= "UTF-8" >      <script src= "js/angular.min.js" ></script>      <script src= "js/angular-route.min.js" ></script>      <title></title>          <header>          <h1>页面头部</h1>      </header>      <!--这里就是渲染其他视图的地方-->      <div data-ng-view= "" ></div>      <footer>          <h1>页面底部</h1>      </footer>

在angularjs中就是通过ng-view指令和路由结合在一起。

2.创建模块

?

1	var mainApp=angular.module( "main.app" ,[ 'ngRoute' ]);

因为要使用路由，所以必须将ngRoute依赖加入进来

3.创建路由规则

?

1 2 3 4 5 6 7 8 9

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/" ,{          template: "<h1>内容部分</h1>"      }).when( "/index" ,{          templateUrl: "index.html"      }).otherwise({          template: "<h2>这个是默认的模板哦</h2>"      }); }]);

如上，我们已经用when方法设置了两个路由。otherwise方法会在没有任何路由匹配时被调用，用它设置了一个默认的提示路由。可以看出来，这里有两中路由，一个路由是使用的模板，另一个是使用的模板路径，其实在路由中还有很多的属性可以配置，比如配置controller,

resolve,redirectTo.

在路由中配置控制器，如下：

?

1 2 3 4 5 6

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/" ,{          template: "<h1>内容部分</h1>" ,          controller: "MainController"      }); }]);

也可以写成这样

?

1 2 3 4 5 6

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/" ,{          template: "<h1>内容部分</h1>" ,          controller:function($scope){}      }); }]);

如果需要使用resolve,必须配置控制器，否则会报错，如果使用resolve属性，那么angularjs会将属性的键注入到配置的控制器中，使用如下：

?

1 2 3 4 5 6 7 8 9 10 11

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/" ,{          template: "<h1>内容部分{{name}}</h1>" ,          controller: "MainController" ,          resolve:{              name:function(){                  return "张三" ;              }          }      }); }]);

列表对象可以是:

键：是注入到控制器中的名称

工厂：可以是一个服务工厂，也可以是一个返回值

在控制器中是这样获取上面注入的键

?

1 2 3

mainApp.controller( "MainController" ,[ "name" , "$scope" ,function(name,$scope){      $scope.name=name; }]);

redirectTo的使用，它的作用是做转发，如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/" ,{          template: "<h1>内容部分{{name}}</h1>" ,          controller: "MainController" ,          resolve:{              name:function(){                  return "张三" ;              }          },          redirectTo: "/index"      }).when( "/index" ,{          templateUrl: "index.html"      }); }]);

如果访问的是第一个路由，因为里面配置了redirectTo属性，那么就会转到它所配置的路由上。

到这里路由的配置就算完成了，如果需要获取路由的参数，可以通过控制器来获取。

$routeParams：

可以使用它来获取路由参数，比如我们将路由配置成如下格式：

?

1 2 3 4 5

mainApp.config([ "$routeProvider" ,function($routeProvider){      $routeProvider.when( "/index/:name" ,{          templateUrl: "index.html"      }); }]);

那么访问的格式就是/index/zhangsan,这样通过控制器来获取的参数格式就是{"name":"zhangsan"},如下：

?

1 2 3

mainApp.controller( "MainController" ,[ "$scope" , "$routeParams" ,function($scope,$routeParams){      $scope.name=$routeParams; }]);

$location服务，可以用它来解析请求的URL中的相关信息，控制器使用如下：

?

1 2 3

mainApp.controller( "MainController" ,[ "$scope" , "$<span style=" font-family: Arial, Helvetica, sans-serif; ">location</span>" ,function($scope,$<span style= "font-family: Arial, Helvetica, sans-serif;" >location</span>){       }]);

$location服务下有如下方法：

1.path();获取当前页面的路径，也可以设置一个新的路径path("/")，这样就修改为“/”的路由了

$location.path();//获取

$location.path("/");//设置

2.replace()
如果你希望跳转后用户不能点击后退按钮（对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用），AngularJS提供了replace()方法来实现这个功能：
$location.path('/home'); 
$location.replace(); 
// 或者
$location.path('/home').replace(); 

3.absUrl()
absUrl()方法用来获取编码后的完整URL：
$location.absUrl()

4.hash()
hash()方法用来获取URL中的hash片段：
$location.hash(); // 返回当前的hash片段

5. host()
host()方法用来获取URL中的主机：
$location.host();// 当前URL的主机
6. port() 
port()方法用来获取URL中的端口号：
$location.port();// 当前URL的端口
7. protocol()
protocol()方法用来获取URL中的协议：
$location.protocol();// 当前URL的协议
8. search()
search()方法用来获取URL中的查询串：
$location.search(); 
我们可以向这个方法中传入新的查询参数，来修改URL中的查询串部分：
// 用对象设置查询
$location.search({name: 'Ari', username: 'auser'}); 
// 用字符串设置查询
$location.search('name=Ari&username=auser'); 
search方法可以接受两个参数。
search（可选，字符串或对象）
这个参数代表新的查询参数。hash对象的值可以是数组。
paramValue（可选，字符串）
如果search参数的类型是字符串，那么paramValue会做为该参数的值覆盖URL当中的对应
值。如果paramValue的值是null，对应的参数会被移除掉。
9. url()
url()方法用来获取当前页面的URL：
$location.url(); // 该URL的字符串
如果调用url()方法时传了参数，会设置并修改当前的URL，这会同时修改URL中的路径、
查询串和hash，并返回$location。
// 设置新的URL 
$location.url('/home?name=Ari#hashthing'); 
url()方法可以接受两个参数。
url（可选，字符串）
新的URL的基础的前缀。

replace（可选，字符串）
想要修改成的路径。