AngularJS学习第六天：angular的路由

2016-10-24 本文已影响710人小枫学幽默

什么是路由？

想象这么一个场景：一个火车站有三个出站通道（VIP通道，员工通道，普通人通道），当乘客出站时有一个管理员负责根据用户所持票种，告诉乘客走哪个通道（即：各自走各自的通道）。
一个Single page application（即：单页面应用，以下简称SPA）包含很多个子页面，如：登录、注册、商品列表，订单列表，地址添加等等，这就相当于一个一个乘客拿的票（即用户请求不同的页面），路由这个时候就是那个管理员了，他负责找到用户请求的页面相关的资源并返回给浏览器（即展示用户请求的页面）

注：angular中的路由切换为无刷新切换页面，这就是SPA的之所以称之为单页面应用的原因，所有的页面切换都在一个页面内完成，没有页面的跳转（相信大家都能猜到，用的是ajax的技术）
angular是怎么知道页面切换了呢？大家都知道，不同网页的地址不一样（地址栏的地址），angular就是利用这个，当检测到地址栏地址变化时候，假设地址栏变为http://www.xxx.com/#/login 那么路由就会去加载 login页面相关的资源（angular的页面通常不就是控制器和控制器相关的html了即去通过ajax加载html和控制器）,所以切换页面的时候，只需让地址栏发生变化就行了

如何安装？

使用angular的路由功能需要安装routing模块，点击下载

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

如何在项目中用？

一. 安装（参照上面的办法）
二. 在我们的app中引用我们要用的路由模块

//定义一个模块，一个ng-app就是一个模块
//（angular.module()这个方法的第一个参数是模块名字，第二个参数是，这个模块依赖的其他模块）
//（一个页面里面只有一个ng-app指令会被自动启用，若存在多个则只有第一个会被自动启用）
//（如果你需要启用多个模块，你需要使用 angular.bootstrap(document.getElementById("app2"), ['需要加载进应用的模块数组']);）
// 这个方法会返回一个模块对象，数据这个模块的控制器都可以在这个对象下边建立
var appH5 = angular.module('appH5', ['ngRoute']);

说明：angular里面的模块如果要引用另外一个模块，把这个模块的名字注入进他的依赖即可（就是意思告诉angular我灰常需要这个模块！！！！）

三.定义路由
定义路由之前，我们先了解一个基础知识

什么是依赖注入
就是控制器（angular里面还有服务，常量，自定义指令等等都是同理）运行需要（就意思依赖）什么
那么我们在新建控制器的时候，就把他依赖的服务作为函数的参数传递进函数里面，angular就会自动去加载这个服务，来供我们实现功能

//最常见的
function indexCtrl($scope){
 $scope.message="我是作用域下面message变量的值";
}

现在我们找到要用的模块了，那么怎么定义路由呢（即管理员）？

// 我们模块的config方法来配置路由
//（因为要配置路由所以用到了路由，于是依赖注入$routeProvider【angular中为路由定义的路由对象】）
appH5.config(['$routeProvider',function($routeProvider) {
    $routeProvider
        .when('/index', {
            templateUrl: "views/index.html",
            controller:'indexCtrl'
        })
        .when('/regsiter', {
            templateUrl: "views/regsiter.html",
            controller:'regsiterCtrl'
        });
}]);

路由其实就是一个映射表（即当什么什么的时候去做什么【是不是跟switch很像】）
$routeProvider 的 when方法（第一个参数参数是 URL 或者 URL 正则规则，第二个参数地址对应的路由配置对象详情请参考点击查看详情）定义了当地址为一个值时要加载的资源

    $routeProvider
        .when('/index', {  //当地址为http://www.xxx.com/#/index 的时候
            templateUrl: "views/index.html",//加载views目录下的index.html（这里是个相对路径）
            controller:'indexCtrl'//这段html对应的控制器
        })
//如果你不想加载一个html文件，只是渲染一段html标签的话你可以这么写
    $routeProvider
        .when('/index', {
            template: "<div>我是首页{{pageName}}</div>",
            controller:'indexCtrl'
        })

四. 新建我们配置路由时，路由中我们引用的控制器和html
目录结构
--index.html
--views
----inde.html
--js
----angular-1.3.0.js
----angular-route.min.js

/*
    首页控制器
*/
appH5.controller("indexCtrl",function($scope){
  $scope.pageName="首页";
  $scope.messages=[
    {id:10,text:"信息1"},
    {id:8,text:"信息2"},
    {id:5,text:"信息3"},
    {id:9,text:"信息4"},
    {id:7,text:"信息5"},
    {id:6,text:"信息6"},
    {id:4,text:"信息7"},
    {id:2,text:"信息8"},
    {id:1,text:"信息9"},
    {id:3,text:"信息10"},
  ];
});
//appH5.controller的第一个参数是控制器名字，第二个参数是控制器方法

首页html

<div>
  我是{{pageName}}页面
  <ul>
    <li ng-repeat="message in messages">{{'索引'+$index+'----'+message.text}}</li>
  </ul>
</div>

五.在index.html中使用

<html  ng-app="appH5">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>金桔财富</title>
  <script  src="js/angular-1.3.0.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/appH5.js"></script>
</head>
<body >
<div class="page-wrapper" >
 <header>我是header部分</header>
  <div ng-view></div>
 <footer>我是footer部分</footer>
</div>
</body>
</html>

ng-view 告诉路由切换之后，路由对应的视图要显示的位置
angular 会把路由对应的html 显示在 ng-view 指令显示的地方（实际上就是ajax吧控制器对应的html加载过来并放入angular提供的$templateCache服务中，加载过的html会被缓存，不再加载第二次）
ng-view 之外的部分在路由切换时不会发生任何改变

六.在服务器环境下打开根目录下index.html即可

运行结果如图

相关内容详解

设置默认页面
我们配置了两个路由（index、regsiter），但是用户不一定会按照我们要求的去输入（假如输入http://www.xxx.com/#/hehe）,angular找不到不就抛出错误了。angular给我们提供了otherwise（英文意思否则【跟switch中的default相似】），就意思如果路由配置中都匹配不到则执行什么

// 即配置当所有的路由都匹配不到，就重定向到 "/"这个路由
$routeProvider.otherwise({redirectTo: '/'});
    $routeProvider
        .when('/', {
            templateUrl: "views/index.html",
            controller:'indexCtrl'
        })
        .when('/index', {
            templateUrl: "views/index.html",
            controller:'indexCtrl'
        })
        .when('/regsiter', {
            templateUrl: "views/regsiter.html",
            controller:'regsiterCtrl'
        });

如何在页面中跳转到某个页面？

<a href="#/regsiter">去注册页面</a>

如何在代码中跳转？

appH5.controller("indexCtrl",function($scope,$location){
  $scope.pageName="首页";
 //代码中跳转到注册页面
  $scope.goRegsiter=function(){
   $location.path("/regsiter");
   //跳转且不可以返回
   //$location.path('/regsiter').replace();
 };
  $scope.messages=[
    {id:10,text:"信息1"},
    {id:8,text:"信息2"},
    {id:5,text:"信息3"},
    {id:9,text:"信息4"},
    {id:7,text:"信息5"},
    {id:6,text:"信息6"},
    {id:4,text:"信息7"},
    {id:2,text:"信息8"},
    {id:1,text:"信息9"},
    {id:3,text:"信息10"},
  ];
});

$location 是路由提供的一个负责跳转的服务
$location.path() 获取当前的url
$location.path("/regsiter");跳转到某个路由
$location.replace();//跳转后调用这个方法可以跳转后不可以返回

跳转时如何定义参数？

//路由配置
    $routeProvider
        .when('/message/:msgid', {
            templateUrl: "views/message.html",
            controller:'messageCtrl'
        })
//控制器获取
appH5.controller("messageCtrl",function($scope,$routeParams){
  $scope.pageName="信息";
  $scope.messagesID=$routeParams.msgid;
});
//跳转时携带
<a href="#/message/{{$index}}">{{'索引'+$index+'----'+message.text}}</a>

$routeParams 服务就是angular路由提供的参数传递之后所在的对象
要传递多个参数，则在url正则后边追加即可

AngularJS学习第六天：angular的路由

什么是路由？

如何安装？

如何在项目中用？

相关内容详解

相关文章推荐

猜你喜欢

热点阅读