使用angular路由 遇到的坑。

使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功

搭建angular项目输入命令　　npm install  -g  angular-cli

　　　　　　创建项目　　　ng new  projectName

　　　　　　进入项目  　　projectName

　　　　　　启动服务　　ng serve

浏览器输入 localhost：4200  能访问则搭建成功

新建directory and home组件。

新建路由文件

app.routes.ts路由文件代码 将其他组件也引入路由中

app.routes.ts路由文件路由跳转页面设置  path: '' 默认为home组件页面

app.module.ts模板文件中添加引入路由

共同接口页面app.component.html使用接口

完成代码部分，浏览器测试

angular 路由的引用的更多相关文章

  1. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...

  2. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  3. angular路由配置以及使用

    一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...

  4. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  6. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  7. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  8. angular路由（自带路由篇）

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  9. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

随机推荐

  1. Docker学习笔记 - Docker的远程访问

    学习内容: 配置客户端与守护进程的远程访问 服务端配置-H选项: 使服务端支持远程被访问 客户端使用-H选项: 使客户端访问远程服务端 本地环境DOCKER_HOST设置客户端访问的默认服务端地址 准 ...

  2. 译《Time, Clocks, and the Ordering of Events in a Distributed System》

    Motivation <Time, Clocks, and the Ordering of Events in a Distributed System>大概是在分布式领域被引用的最多的一 ...

  3. Struts(十七)：通过CURD来学习paramsPrepareParams拦截器栈

    背景: 通过上一章节<Struts(十六):通过CURD来学习Struts流程及ModelDriven的用法>学习了ModelDriven拦截器的用法,上章节中讲到了edit功能. 要修改 ...

  4. packer的基本使用

    工具的产生,一定是为了解决某些痛点,那么痛点是? 你们在工作中是不是经常用到各种云?aliyun, aws, digitalOcean and so on? 你们的规模不大不小,经常去云平台上点一点, ...

  5. mysql zip 文件安装

    1.下载 https://dev.mysql.com/downloads/mysql/ 2.解压,配置环境变量 MYSQL_HOME:D:\mysql path后面加 :%MYSQL_HOME%\bi ...

  6. 典型分布式系统分析：MapReduce

    在 <分布式学习最佳实践:从分布式系统的特征开始(附思维导图)>一文中,提到学习分布式系统的一个好方法是思考分布式系统要解决的问题,有哪些衡量标准,为了解决这些问题:提出了哪些理论.协议. ...

  7. Git的安装和使用（托管至GitHub的方法）

    一.下载Git 1.下载 下载地址: https://git-scm.com/download/win 根据你的操作系统选择32位或者64位 2.安装过程一路next 3.检验安装是否成功 在桌面点击 ...

  8. Hibernate--对象关系

    在hibernate中,关联关系映射分为单向关联和双向关联.共有七种关系 ·@Many To One ·@One To Many(单向) ·@One To Many(多向) ·@One To One( ...

  9. [AtCoder agc021D]Reversed LCS

    Description 题库链接 在改变原串 \(S\) 最多 \(K\) 个字母的前提下,使得 \(S\) 和 \(S\) 的反串的 \(LCS\) 尽量长,问最长长度. \(1\leq K\leq ...

  10. delete和delete[]的区别(转载)

    一直对C++中的delete和delete[]的区别不甚了解,今天遇到了,上网查了一下,得出了结论.做个备份,以免丢失. C++告诉我们在回收用 new 分配的单个对象的内存空间的时候用 delete ...