AngularJS单页面路由配置恩,理解了就很简单啦

利用route实现单页面跳转功能

利用angularJS开发流程

1)配置好angularJS开发环境

2)利用 yo angular projectname创建项目目录

3)删除掉系统自动生成的一些自己工程不需要的页面和脚本

4)修改index.html,在

<!-- Add your site or application content here -->

以上注释下面写自己的样式内容,关键是

<div class="container-fluid" id="main" style="float:left;width: calc(100% - 240px);"><div ng-view=""></div>

</div>

ng-view这个div是占位符,利用路由和模板功能将会在这个位置插入各个页面的html片段

5)需要几个页面,就先利用yo angular:route routename创建出几个路由来,yo会自动生成对应的html和js文件,然后在对应的文件中添加相应内容即可
6)注意函数作用域,哪个页面的function,也就是所谓的指令,就要在自己所对应的指令js文件中编写。

时间: 2024-08-02 11:00:51

AngularJS单页面路由配置恩,理解了就很简单啦的相关文章

Cisco PT模拟实验(11) 路由器单臂路由配置

Cisco PT模拟实验(11) 路由器单臂路由配置 实验目的: 掌握单臂路由的配置方法 实现不同VLAN之间互相通信 深入理解VLAN通信原理及路由子接口 实验背景: 公司的技术部和销售部分处于不同的办公室,技术部和销售部的PC分处于不同的VLAN,现由于业务的需求需要销售部和技术部的主机能够相互访问,获得相应的资源,两个部门的交换机通过一台路由器进行了连接. 技术原理: VLAN能有效分割局域网,实现各网络区域之间的访问控制.但现实中,往往需要配置某些VLAN之间的互联互通.而实现不同VLA

Cisco 单臂路由配置

思路:配置单臂路由, 两台PC分别进行IP.GW的配置 交换机先划分出两个VLAN ,不同的VLAN接口接到两台不同的PC上 交换机上配置一个fa0/24trunk端口与路由器相连接 路由器开启G0/0端口,并且对G0/0配置子端口 G0/0.1进行802.1Q协议的封装.VLAN 号10的确认并且写入PC0的网关 G0/0.2进行802.1Q协议的封装.VLAN 号20的确认并且写入PC0的网关 Switch#conf t Enter configuration commands, one p

Packet Tracer 5.0实验(七) 路由器单臂路由配置

Packet Tracer 5.0实验(七) 路由器单臂路由配置 一.实验目标 掌握单臂路由配置方法: 通过单臂路由实现不同VLAN间互相通信: 二.实验背景 某企业有两个主要部门:技术部和销售部,分处于不同的办公室,为了安全和便于管理,对两个 部门的主机进行了VLAN的划分,技术部和销售部分处于不同的VLAN.现由于业务的需求,需要销售部和技术部的主机能够相互访问,获得相应的资源,两个 部门的交换机通过一台路由器进行了连接. 三.技术原理 单臂路由:是为实现VLAN间通信的三层网络设备路由器,

CCNA_ VTP、VLAN和单臂路由配置

VTP.VLAN和单臂路由配置(原创笔记) 拓扑图说明 u  SW-B为VTP中的Serive mode,SW-A与SW-C为vtp中的client mode: u  SW-A与SW-C分别划分了VLAN20.VLAN30,并加入不同主机到vlan u  PC4为管理server,SW-A与SW-C配置vlan1管理的IP,可实现PC4远程管理SW-A和SW-B u  配置路由器子接口IP,实现VLAN之间的路由,达到互相访问 配置过程 通过配置VTP可以实现多以交换机vlan信息同步 1)  

cisco 单臂路由配置及使用

单臂路由:用于实现不同设备之间的不同VLAN的通信. 但是单臂路由环境不能用在大型企业网络环境,因为路由器承载的压力太大.     单臂路由的子接口:用于实现运用一个路由接口,来做多个不同vlan的网关,实现垮网段通信.子接口不能单独的开闭,开启对应的物理接口即可. 单臂路由配置过程: 首先看环境: 左边1网段为vlan1,右边2网段为vlan2,最终使vlan1与vlan2可以互相通信. 2.pc0的ip,网关 3.pc1的ip,网关 4.左边交换机配置 5.添加trunk口 6.路由器的配置

华为 --- 单臂路由配置

实验名称:单臂路由配置实验目标:让两台PC机使用单臂路由互通.实验需求:两台PC机,一台交换机(三成交换 S5700),一台路由(AR3260)实验步骤: 首先,来了解一下,单臂路由: 性质: 在路由器的一个接口上配置子接口 目的: 实现原来不同VLAN之间的互联互通 优点: 实现不同vlan之间的通信 缺点: 容易成为网络单点故障 作用: 单臂路由(router-on-a-stick)是指在路由器的一个接口上 通过配置子接口(或"逻辑接口",并不存在真正物理接口)的方式, 实现原来相

华为单臂路由配置

华为单臂路由配置 拓扑: 实现步骤: 1 先添加的交换机的vlan [SW1]display this sysname SW1 vlan batch 10 20 [SW2] vlan batch 10 20 2 进入交换机 接口配置接口所属vlan: [SW1: interface Ethernet0/0/10 port link-type access port default vlan 10 # interface Ethernet0/0/20 port link-type access p

路由器单臂路由配置

路由器单臂路由配置 一.实验原理 单臂路由:通过创建路由器端口的逻辑子接口来承担不同vlan的网关,来实现不同网段PC可以通过同一个物理接口访问外网. 二.实验目标 1.掌握单臂路由的配置2.实现C1和C2不同网段通过NAT转换都能访问外网端口 三.实验步骤1.新建GNS3拓扑图 2.配置交换机 SW1#conf tSW1(config)#no ip routing //关闭交换机的路由功能SW1(config)#vlan 10 //添加两个vlan分别为vlan 10 和vlan 20SW1(

详解单页面路由的几种实现原理(附demo)

前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), 希望能帮到你. 众所周知单页面网站的路径跳转全是通过js来控制的,下面咱们来讲讲 第一种:url完全不动型 这一种的情况是url完全不动,即你的页面怎么改变,怎么跳转url都不会改变 这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素, 这种情况没什么好讲的,好的一言不和上代码    de