为什么要使用 angular 的配置文件:

    好处:我们可以在一个页面上,实现多个页面的跳转的感觉,但只是在一个页面上进行的操作;

  我们的准备工作:下载 angular-route.js 插件

  在依赖模块中 一定要 添加 ngRoute 模块,图文解释便可以看到操作

  配置文件我们要使用的东西:接下来以图文方式讲解:

  我们就只在一个页面上进行操作;我们我们将这个页面称之为主页面;操作步骤如下;

  第一步:html 结构:我们通常给 body 添加 ng-app 指令  意思是,我们的整个页面都可以使用 angular 的指令,但这一步是不够的,只是声明了,但却没有定义

  

  第二步:js 语法:

  

  以上是主页面的写法:

  接下来是我们的分页面:以future 模块为例;

  

  分页的 js 文件的注意

  

  你以为这样就完了?不是的,还有重要的一步操作,还要在主页面中引入

  

  在主页面的 js 写法中,我们在次体会以下,关联的重点

  

  让我们在页面中看一下效果

  

  

angular 的配置文件的应用的更多相关文章

  1. Angular(02)-- Angular-CLI命令

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  2. WijmoJS 全面支持 Angular 7

    概述 首先恭喜Angular团队发布Angular 7.0.0版本! 对于大多数开发人员,只需要执行一个命令就可以更新到Angular 7: ng update \@angular/cli \@ang ...

  3. Angular项目目录结构

    前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20 ...

  4. Angular介绍

    Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...

  5. Angular:使用前端proxy代理解决跨域问题

    ①在项目文件的根目录下新建文件proxy.config.json { "/": { "target": "http://127.0.0.1:3000& ...

  6. Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...

  7. 手把手教你搭建自己的Angular组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  8. Echarts 多曲线“断点”问题解决方法

    Echarts 用来做可视化曲线是非常优秀的一个库.建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率. ...

  9. Angular7教程-03-Angular常用操作(上)

    本节来介绍angular中的操作以及TypeScript语法的简单介绍.关于TypeScript语法的更为详细的内容,打算在整个angular教程结束后再单独介绍. 0. 安装所需要的插件及配置插件 ...

随机推荐

  1. Elasticsearch入门教程(二):Elasticsearch核心概念

    原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:ht ...

  2. Jpa/Hibernate 字节码增强:字段延迟加载

    JPA提供了@Basic注解,实现延迟加载字段的功能,如下: @Basic(fetch = FetchType.LAZY) @Column(name = "REMARK_CONTENT&qu ...

  3. window对象open方法详解

    window.open详解 window.open("sUrl","sName","sFeature","bReplace&quo ...

  4. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  5. 2019.9.16 linux安装软件lamp

    2019/9/16 Linux软件安装 方式:yum/rpm/源码安装 yum安装: yum 是通过分析RPM的包头数据后,根据各软件的相关性制作出属性相对应的解决方案,然后可以自动处理软件的相依属性 ...

  6. 四、Vue CLI-异步请求(axios)

    一.模块的安装 npm install axios --save #--save可以不用写 如图: 二.配置main.js import axios from 'axios' Vue.prototyp ...

  7. 四、Signalr手持令牌验证

    一.JWT 服务端在respose中设置好cookie,浏览器发请求都会自动带上,不需要做额外设置 但是如果客户端是非浏览器,或者要兼容多种客户端,这个方法就不行了 Js端 @{ Layout = n ...

  8. 23_1spring基础

    1.spring是什么 2.spring的优势 3.spring体系结构 4.耦合 程序间的依赖关系:类之间的依赖和方法之间的依赖. 解构:降低程序间的依赖关系. 实际开发中应该做到:编译期不依赖,实 ...

  9. Python excel读写

    # coding=utf-8 print "----------------分割线 xlrd--------------------" import xlrd #打开一个wordb ...

  10. 循环结构——for语句、seq语句、while语句、break语句

    1.for语句: 运行结果: 2.seq命令生成整数序列: 3.while语句: 执行结果: 4.break语句: break语句是正常结束之前退出当前循环. 执行结果: 5.continue语句: ...