Angular如何运用路由技术

Angular中的路径跳转都是依赖它的路由技术实现的。刚开始接触angular的人对路由可能不理解,下面小编就通过实例教大家如何运用Angular的路由技术。

操作方法

  • 01

    首先在Sublime Text新建HTML页面,然后导入angular.min.js和angular-route.js两个脚本文件,如下图所示

  • 02

    然后在body标签里添加ng-app属性,这个属性告诉angular从body开始全面监听元素动态,如下图所示

  • 03

    然后准备一个锚链接的列表,用于下面路由跳转使用,如下图所示

  • 04

    接下来我们就需要在script标签中通过module方法实例化angular了,注意实例化的时候添加ngRoute依赖,如下图所示

  • 05

    然后通过angular实例来实现config方法,如下图所示,在config方法中传入参数$routeProvider

  • 06

    接下来利用$routeProvider中的when方法来匹配路径,然后实现路由跳转,如下图所示

  • 07

    最后我们运行页面,你会看到如下图所示的展示,当你点击某个连接的时候,你会发现地址栏的连接也会跟着变得

(0)

相关推荐

  • 防止网吧出现掉线现象的高级路由技术

    目前,网吧用户基于网络的应用已经从简单的网页浏览,扩展到视频QQ聊天、VOD点播、网络游戏、教育培训、IP电话等更为广泛的领域,这些应用的增多对网络的速度和稳定性提出了越来越高的要求,因此现在网吧对路 ...

  • 揭开八种热点路由技术的神秘面纱

    让我们揭开八种路由技术的神秘面纱,大家对于路由器很熟悉,但对于路由技术应该还不是很熟悉吧。Q:解读热点路由技术,A:路由器在因特网中起着枢纽的作用,但随着因特网应用的普及,网络带宽的迅速增加,用户对服 ...

  • 路由技术 多WAN口路由器技术和应用

    随着用户网络应用要求的提高,仅仅有NAT已经不够用了。尤其用户对网络安全和其他保证网络平安通畅运行的功能要求非常迫切,宽带路由器的设计越来越复杂化了,包含了FIREWALL、DMZ、虚拟服务器等诸多功 ...

  • 路由技术详解--路由器POS接入

    我国的路由器技术发展非常迅速,于是我研究了一下路由器技术在基于路由器平台的几种POS接入方式中的实际应用,在这里拿出来和大家分享一下,希望对大家有用。在我国进一步鼓励卡消费、大力普及金融POS业务的形 ...

  • 路由 技术详解--路由器POS接入

    我国的路由器技术发展非常迅速,于是我研究了一下路由器技术在基于路由器平台的几种POS接入方式中的实际应用,在这里拿出来和大家分享一下,希望对大家有用。在我国进一步鼓励卡消费、大力普及金融POS业务的形 ...

  • 详解如何提高企业路由性能技术

    在目前的企业网络中,受到投入成本和传输速度等因素的影响,还是以有线网络居多。而路由器是局域网连接外部网络的重要桥梁,是网络系统中不可或缺的重要部件,也是网络安全的前沿关口,提高其性能就显得非常重要。 ...

  • 静态路由和直连网段重分发技术

     关于协议转换器的问题我们已经说的非常多,同时也推动了路由技术的发展,如今,网络建设已经深入到行业内的各个分支,例如电力行业的农电信息网等等。 一般企业使用以太网交换机组网的情况主要分为两类,一是采用 ...

  • 路由器基础知识:路由器的基本协议与技术

    VPN VPN(Virtual Private Network-虚拟专用网)解决方案是路由器具有的重要功能之一。其解决方案大致如下: 1.访问控制 一般分为PAP(口令认证协议)和CHAP(高级口令认 ...

  • 利用静态路由实现网络访问控制

      当一台主机应用需要向位于不同网络的目的地发送数据包时,路由器从一个接口接受数据信息。网络层会检查这个数据包来决定预计发送的网络,然后,路由器会检查自己的路由表,并利用路由表的信息来判断预计要发送的 ...