利用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文件中编写。

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

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

    前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...

  2. 华为QUIDWAY系列路由器的单臂路由配置案例

    作者:邓聪聪 单臂路由 单臂路由(router-on-a-stick)是指在路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网) ...

  3. 利用hash或history实现单页面路由

    目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...

  4. 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)

    开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...

  5. H3C模拟器单臂路由配置实例

    单臂路由:用802.1Q和子接口实现VLAN间路由 单臂路由利用trunk链路允许多个VLAN的数据帧通过而实现 网络拓扑图: RTA配置: SW1配置: PC1/2配置如图: 但是值得注意的是,在配 ...

  6. angular ,require.js, angular-async-loader实现单页面路由,控制器js文件分离

    https://github.com/heboliufengjie/appRoute/tree/re re 分支,实现,路由配置,控制器js文件分离

  7. Mac上安装配置Go语言,其实很简单(一)

    下载Go语言可以去:Go语言中文网 安装及自己选择是否修改GOPATH 下载下来后双击安装就好,使用 go version 查看安装版本: 在Mac上安装完成后,会自动设置一些环境变量,使用 go e ...

  8. webpack解决单页面路由问题

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 简单单页面路由跳转demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. eclipse安装STS遇到的问题

    eclipse安装STS时,在eclipse marketplase中搜索STS没有结果,从官网下载STS包,然后安装提示找不到JAR包, 解决方式: eclipse需要和STS包版本一致,如果STS ...

  2. 初识SQL语句

    SQL(Structured Query Language ) 即结构化查询语言 SQL语言主要用于存取数据.查询数据.更新数据和管理关系数据库系统,SQL语言由IBM开发.SQL语言分为3种类型: ...

  3. 文件分享系统(Django)

  4. ProxySQL 部署 Single Writer Failover 读写分离 (PXC)

    主机信息: Proxysql: 如果你忽略了ProxySQL会报告主机组的变化,我建议把它设置为0,除非你试图调试"某些东西",否则你的日志将很快变得巨大.UPDATE globa ...

  5. Mysql压缩包版的安装方法详解

    Mysql安装的时候可以有msi安装和zip解压缩两种安装方式.zip压缩包解压到目录,要使用它还需对它进行一定的配置.下面对Mysql压缩包版的安装方法进行详细的描述,要是此文有不正确的认识,希望大 ...

  6. 解决Silverlight F5刷新问题

    最近在做一个SL的项目,做完后,遇到一个F5刷新的问题,本人也是第一次接触接触SL项目,记得再ASP.NET浏览器的缓存会自动保存最后一次的浏览记录的. 所以就在网上到处找资料,可惜运气不好,都没找到 ...

  7. rpm 软件包管理

    rpm---Redhat Pachage Manager 挂载光盘: [root@localhost sdb1]# mount /dev/sr0 /mnt [root@localhost sdb1]# ...

  8. 【IT笔试面试题整理】位操作

    如何准备: Bit manipulation can be a scary thing to many candidates, but it doesn't need to be! If you're ...

  9. CRM项目图形交互界面设计

    由于我们组在刚开始的时候 ,进度比较快的!老师本来是打算最后给我们用统一的学校已经封装好的界面给我们的!看着我们的现实都写完了!老师就提前把界面都给我们了!但是觉得界面一般,不怎么好看!我们就全部都是 ...

  10. 程序员必知的8大排序(三)-------冒泡排序,快速排序(java实现)

    程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现) 程序员必知的8大排序(二)-------简单选择排序,堆排序(java实现) 程序员必知的8大排序(三)-------冒 ...