AngularJSAngularJs ng-route路由详解

顿时首稿子主要概括介绍了AngularJS通过ng-route实现核心的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由于功能的操作步骤与相关兑现技能。

每当讲AngularJS 的ng-route之前,先来瞧我们周边的web多页应用和单页应用:

多页应用(MPA):

一个项目产生多单html完整页面,跳转是于页面和页面一直进行跳转,所有的页面请求都是一头的(客户端在守候服务器被响应的时光,浏览器中一片空白,直到响应成功才见面创造完整Dom树),并且每个页面都用加载一不成css和js文件,性能于差;

AngularJS 1

单页应用(SPA):

成套项目蒙就出一个完全的HTML页面,其它HTML文件还是HTML片段,称为伪页面,所有的“伪页面请求”都是异步请求(客户端在等候下一个页面片段到来时,仍可来得前一个页面内容),整个项目之CSS和JS文件就需要加载一不良,体验更好;

AngularJS 2

 

AngularJS提供的模块——ngRoute

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

  ngRoute模块的用处:就是依据浏览器被URL中的一个特别之地方标记(形如#/xxx),查找到拖欠标记所对应之模版页面,并异步加载到当前页面的ngView指令中。

 【路由于功能是由于 routeProvider服务 和 ng-view
搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的职;
然后经 routeProvider 配置路由的照。】

应用手续:

 
(1)创建唯一完整的HTML页面,其中声明一个器皿,ngView指令。引入angular.js和angular-route.js(注意:这里要事先引入angular.js,主要是因angular-route.js需要传入window.angular这个参数,而这个参数只有当加载完angular才会油然而生);—-(Index.html)

 
(2)创建多独模板页面(习惯及位居一个特地之目下,如tpl)—-(我在tpl目录下创办了3只页面:start.html/main.html/detail.html)

  (3)创建Module,声明指让ng和ngRoute两单模块。

  (4)在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``>    //当前控制器所依赖的其他模块

});

 

3独伪页面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=”2.html”                不能够采取多页面下被的跳转

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

}

 

效果:

AngularJS 3以上,就是一个基础之ngRoute使用手续,希望对你有辅助!

 

相关文章