AngularJs ng-route路由详解

那篇文章首要归纳介绍了AngularJS通过ng-route实现主题的路由功能,结合实例形式详细分析了AngularJS使用ng-route达成路由成效的操作步骤与连锁落实技能。

在讲AngularJS 的ng-route在此以前,先来探望大家广阔的web多页应用和单页应用:

多页应用(MPA):

1个体系有几个html完整页面,跳转是在页面与页面一贯开始展览跳转,全部的页面请求都以一道的(客户端在守候服务器给响应的时候,浏览器中一片空白,直到响应成功才会成立完整Dom树),并且每一种页面都亟需加载二遍css和js文件,品质较差;

图片 1

单页应用(SPA):

整整项目中唯有三个完好的HTML页面,其余HTML文件都是HTML片段,称为伪页面,全体的“伪页面请求”都是异步请求(客户端在等待下3个页面片段到来时,还是可以够显得前一个页面内容),整个项指标CSS和JS文件只须要加载三次,体验越来越好;

图片 2

 

AngularJS提供的模块——ngRoute

  Route:路由,通过某条路线找到对象内容。

  ngRoute模块的用处:就是依据浏览器中U猎豹CS陆L中的贰个异样的地点标记(形如#/xxx),查找到该标记所对应的模板页面,并异步加载到日前页面包车型地铁ngView指令中。

 【路由功能是由 routeProvider服务 和 ng-view
搭配完毕,ng-view也正是提供了页面模板的挂载点,当切换UEvoqueL实行跳转时,不相同的页面模板会放在ng-view所在的职位;
然后经过 routeProvider 配置路由的炫耀。】

接纳手续:

 
(一)创立唯1完整的HTML页面,个中声澳优个器皿,ngView指令。引进angular.js和angular-route.js(注意:那里供给先引进angular.js,主即使因为angular-route.js须求传入window.angular这一个参数,而那一个参数只有在加载完angular才会出现);—-(Index.html)

 
(二)创制三个模板页面(习惯上位居二个专程的目录下,如tpl)—-(笔者在tpl目录下开创了1个页面:start.html/main.html/detail.html)

  (三)创造Module,注明注重于ng和ngRoute七个模块。

  (四)在Module中配置路由字典。

代码:

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="myModule1">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/bootstrap.css">

</head>
<body>
<!--模板页面容器-->
<div ng-view>

</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script>
//  模块依赖于ng和ngRoute
   angular.module('myModule1',['ng','ngRoute']).config(function ($routeProvider) {
     //     配置路由字典,指定路由地址和模板页面的对应关系
       $routeProvider.
       when('/start',{
         templateUrl:'tpl/start.html',
         controller:'startCtrl'    //此处声明controller可以供templateUrl地址页面使用

       }).otherwise({redirectTo:'/main'}).
       when('/main',{
         templateUrl:'tpl/main.html'
       }).
       when('/detail',{
         templateUrl:'tpl/detail.html'
       })
   }).controller('startCtrl',function ($scope,$routeParams) {
     $scope.msg='起始页面';
     console.log($routeParams);
   }).controller('mainCtrl',function ($scope) {
     $scope.msg='中心页面';
   }).controller('detailCtrl',function ($scope) {
     $scope.msg='详情页面';
   });

</script>
</body>
</html>

详解:

config():路由布署格局,config扶助重视注入,$routeProvider是对准于route配置的provider;

when():配置路径和参数

$routeProvider.when(‘/伪页面名称’, {

``template: string,  //页面概述

``templateUrl: string, //伪页面真实的路径url

``controller: string, ``function
或 array,    //控制器名称和对应的函数,这里生成的控制器可以在整个该url页面使用,不需要在该url页面重复声明

``controllerAs: string,    //给控制器重新取个名称

``redirectTo: string, ``function``,   //重定向的地址

``resolve: object<key, ``function``>    //当前控制器所依赖的其他模块

});

 

一个伪页面HTML:

start.html

<div class="panel panel-primary" >
  <div class="panel-heading">
    <h3>start</h3>
  </div>
  <div class="panel-body">
    <a href="#/main" class="btn btn-danger">地址跳转到main</a>
    <p>{{msg}}</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p>
  </div>
</div>

main.html

<div class="panel panel-danger" ng-controller="mainCtrl">
  <div class="panel-heading">
    <h3>main</h3>
  </div>
  <div class="panel-body">
    <a href="#/detail" class="btn btn-danger">地址跳转到main</a>
    <p>{{msg}}</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p>
  </div>
</div>

detail.html

<div class="panel panel-info" ng-controller="detailCtrl">
  <div class="panel-heading">
    <h3>detail</h3>
  </div>
  <div class="panel-body">
    <a href="#/start" class="btn btn-danger">地址跳转到start</a>
    <p>{{msg}}</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p>
  </div>
</div>

ngRoute模块中的伪页面跳转

1、通过超链接跳转

<a href=”#/路由地址”>   
#不能省

2、通过JS跳转

<button ng-click=”jump()”></button>

$scope.jump = function(){

//location.href=”二.html”                不能够应用多页面使用中的跳转

$location.path(‘/路由位置’);    //#不能有

}

 

效果:

图片 3如上,正是贰个基础的ngRoute使用手续,希望对你有帮带!

 

相关文章