使用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. 安装 go 语言环境

    操作系统: CentOS 6.9_x64 go语言版本: 1.8.3 安装go 这里直接安装二进制,其它方式请自行搜索. 1.下载并安装go 命令如下: ? 1 2 3 wget https://st ...

  2. kubernetes进阶（03）kubernetes的namespace

    服务发现与负载均衡Kubernetes在设计之初就充分考虑了针对容器的服务发现与负载均衡机制,提供了Service资源,并通过kube-proxy配合cloud provider来适应不同的应用场景. ...

  3. 新概念英语（1-109）A Good Idea

    Lesson 109 A good idea 好主意 Listen to the tape then answer this question. What does Jane have with he ...

  4. Jetty入门（1-2）eclipse集成jetty插件并发布运行应用

    一.eclipse集成jetty插件 1.从市场安装jetty插件 2.使用jetty插件发布应用和配置运行环境 debug配置默认共用上述run配置 3.使用jetty插件启动运行和停止运行选中的应 ...

  5. gradle入门（1-2）gradle的依赖管理

    Gradle支持以下仓库格式: Ivy仓库 Maven仓库 Flat directory仓库 一.添加仓库 1.添加Ivy仓库 1.1.通过URL地址添加一个Ivy仓库 我们可以将以下代码片段加入到b ...

  6. java中的引用类型的对象存放在哪里

    根据上下文来确定.比如void func(){    Object obj = new Object();//这个obj在函数的栈里.}class Test{   private Object obj ...

  7. linux下mongodb安装、服务器、客户端、备份、账户命令

    在linux环境安装mongoDB: 一般认为偶数版本为稳定版 如 1.6.x,奇数版本为开发版如1.7.x 32bit的mongoDB最大能存放2g的数据,64bit没有限制 方法1: 终端执行: ...

  8. 如何设置eclipse 右键new的菜单

    如何设置eclipse 右键new的菜单 在使用eclipse进行开发的时候,开发人员一般使用File-new来创建项目或文件,但常常发现,默认右键new选项里很多选项极少会用到,而一些常用的选项又没 ...

  9. 前端插件之Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  10. Set<E> 接口简明

    java. util. Set 接口 Set 接口中的方法和 Collection 中方法一致的.Set 接口取出方式只有一种, 迭代器 . HashSet : 底层数据结构是哈希表,线程 是不同步的 ...