Angular学习第六天:angular的路由

相关推荐

第三天学习

什么是路由?

一个Single page application(即:单页面应用,以下简称SPA)包含很多个子页面,如:登录、注册、商品列表,订单列表,地址添加等等,这就相当于一个一个乘客拿的票(即用户请求不同的页面),路由这个时候就是那个管理员了,他负责找到用户请求的页面相关的资源并返回给浏览器(即展示用户请求的页面)

  • 注:angular中的路由切换为无刷新切换页面,这就是SPA的之所以称之为单页面应用的原因,所有的页面切换都在一个页面内完成,没有页面的跳转(相信大家都能猜到,用的是ajax的技术)

  • angular是怎么知道页面切换了呢? 大家都知道,不同网页的地址不一样(地址栏的地址),angular就是利用这个, 当检测到地址栏地址变化时候,假设地址栏变为http://www.xxx.com/#/login 那么路由就会去加载 login页面相关的资源(angular的页面通常不就是控制器和控制器相关的html了 即去通过ajax加载html和控制器),所以切换页面的时候,只需让地址栏发生变化就行了

如何安装?

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

  
  

如何在项目中用?

  • 一. 安装(参照上面的办法)
  • 二. 在我们的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: "
我是首页{{pageName}}
", 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

我是{{pageName}}页面
  • {{'索引'+$index+'----'+message.text}}
  • 五.在index.html中使用





金桔财富





我是header部分
我是footer部分

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

  • 六.在服务器环境下打开根目录下index.html即可
Angular学习第六天:angular的路由_第1张图片
2180072-658964784b3af9ca.png

相关内容详解

  • 设置默认页面

我们配置了两个路由(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'
      });
  • 如何在页面中跳转到某个页面?
去注册页面
  • 如何在代码中跳转?
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;
});
//跳转时携带
{{'索引'+$index+'----'+message.text}}

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

你可能感兴趣的:(Angular学习第六天:angular的路由)