让每一名学员高薪就业
返回列表 发新帖

AngularJS前端路由

[复制链接]

45

主题

50

帖子

623

积分

版主

Rank: 7Rank: 7Rank: 7

积分
623

版主

发表于 2018-1-8 10:30:23  | 显示全部楼层 | 阅读模式
Hello大家好,继前两篇文章中我们了解了什么是AngularJS以及AngularJS的表单验证,今天源码时代H5学科讲师跟大家再来谈谈AngularJS的单页面前端路由及其用法。
现在越来越多的网站都用到了前端路由,那它和多页面跳转及传统开发有什么区别呢,我们为什么要用单页面路由呢?
在传统开发中,我们点击一个链接跳转到一个新的页面,这个跳转地址相当于一个二级地址。而路由的跳转并不是跳转到一个新的页面,而是在当前的页面进行跳转,相当于是在一个页面内跳转,使得前端页面体验更流畅。所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的。
接下来我们从一个简单的单页面跳转来看看单页面应用倒地怎么用。
首先我们得加载angular的主文件:
<script src="https://cdn.bootcss.com/angular.js/1.3.19/angular.min.js"></script>
其次我们要加载angular的对应版本的路由插件:
<script src="https://cdn.bootcss.com/angular.js/1.3.19/angular-route.js"></script>
注意:对应版本(!)
申明根元素:
<html ng-app="myApp">
接下来在项目中引入路由这个插件:
<!-- 插件引入 -->
  <script type="text/javascript">
    var route = angular.module('myApp',['ngRoute']);
route.controller('mytest',['$scope',function($scope){
    }]);
  </script>
另外确定路由区域:
  <div ng-controller = "mytest">
    <!-- 确定路由操作的区域 -->
    <div ng-view></div>
  </div>
其中'ng-view'这个指令是和'ngRoute'相互呼应的,只有引入了路由这个插件,'ng-view'这个指令才会生效。他实际的功效相当于圈(div)了一块儿地出来,作为路由结果的展示。即路由只控制这块地上倒地展示哪一个文件(div)中的内容。
接下来就来完成类似于这样的功能
在body中准备路由导航项
  <div ng-controller = "mytest">
    <!-- 路由导航项 -->
    <a href="#1">首页</a>
    <a href="#2">商城</a>   
    <a href="#3">列表</a>
    <!-- 确定路由操作的区域 -->
    <div ng-view></div>
  </div>
这里我们简单列出了三个导航项,跳转地址分别是’#1’,’#2’,’#3’,对应首页、商城和列表。当然你还可以列出更多。此处需要注意的是前面的‘#’不能忽略。
对应路由设置为:
    var route = angular.module('myApp',['ngRoute']);
    route.config(['$routeProvider',function($routeProvider){
      $routeProvider
        .when('/1',{
          template:'<h1>我的首页</h1>'
        })
        .when('/2',{
          template:'<h1>我的商城</h1>'
        })
        .when('/3',{
          template:'<h1>商城列表</h1>'
        })
        // 初始化默认路径
        .otherwise({
          redirectTo:'/1'
        });
    }]);
其中的‘template’可由‘templateUrl’替代,条件是当我们跳转的内容不是本文中所用的一个简单的h1标签,而是一个复杂的页面或区块。
看看效果图:
AngularJS前端路由1806.png
AngularJS前端路由1808.png
AngularJS前端路由1810.png
你们可能发现,当用户进入网页时,显示区域并没有内容呈现,故我们下面给网页一个默认路由的操作。
        // 初始化默认路径
        .otherwise({
          redirectTo:'/1'
        });
这样用户进入页面时,即默认页面即我们的路径为‘1’的首页。界面如下:
AngularJS前端路由1973.png
至此,一个基本的路由就已经搭建好了。
附源码如下:
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>AngularJS前端路由</title>
    <!-- 加载angular的主文件 -->
    <script src="https://cdn.bootcss.com/angular.js/1.3.19/angular.min.js"></script>
    <!-- 加载对应版本的路由插件 -->
    <script src="https://cdn.bootcss.com/angular.js/1.3.19/angular-route.js"></script>
    <!-- 插件引入 -->
    <script type="text/javascript">
      var route = angular.module('myApp',['ngRoute']);
      route.config(['$routeProvider',function($routeProvider){
        $routeProvider
          .when('/1',{
            template:'<h1>我的首页</h1>'
          })
          .when('/2',{
            template:'<h1>我的商城</h1>'
          })
          .when('/3',{
            template:'<h1>商城列表</h1>'
          })
          // 初始化默认路径
          .otherwise({
            redirectTo:'/1'
          });
      }]);
      route.controller('mytest',['$scope',function($scope){
      }]);
    </script>
  </head>
  <body>
   
    <div ng-controller = "mytest">
      <!-- 路由导航项 -->
      <a href="#1">首页</a>
      <a href="#2">商城</a>   
      <a href="#3">列表</a>
      <!-- 确定路由操作的区域 -->
      <div ng-view></div>
    </div>
  </body>
</html>


本文章由源码时代H5前端学科讲师原创!
转载须注明出处(http://www.itsource.cn)!感谢大家的配合!
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表