Angular学习第六天：angular的路由

如何在项目中用？

一. 安装（参照上面的办法）
二. 在我们的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即可

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的路由

相关推荐

什么是路由？

如何安装？

如何在项目中用？

相关内容详解

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