使用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. c# 工具类（字符串和时间，文件）

    using System; using System.IO; using System.Text.RegularExpressions; using System.Windows.Browser; n ...

  2. mysql批量插入语句执行失败的话，是部分失败还是全部失败

    项目开发中,正好遇到这个问题. 将一批从外部第三方接口获取到的数据存储到本地mysql数据库,假设接口返回的数据类型为A,经过A到B的转换规则转换后, 要插入数据库的数据类型为B.那么在A获取到100 ...

  3. centos7 yum相关的常用命令

    [root@mini1 ~]# history |grep yum 40 yum repolist 42 cd /etc/yum.repos.d/ 49 yum clean all 50 yum re ...

  4. __new__ 单例

    a.实例化类 实例化一个类时 1. 创建一个对象,调用__new__方法,如果没有会调用父类的__new__方法 2. 调用__init__方法 3. 返回对象的引用 class Dog(object ...

  5. Scrollbar

    Scrollbar(滚动条)组件用于滚动一些组件的可见范围,可分为垂直和水平的. 用法: from tkinter import * root =Tk() #滚动条组件 sb = Scrollbar( ...

  6. 搭建 springboot 2.0 mybatis 读写分离 配置区分不同环境

    最近公司打算使用springboot2.0, springboot支持HTTP/2,所以提前先搭建一下环境.网上很多都在springboot1.5实现的,所以还是有些差异的.接下来咱们一块看一下. 文 ...

  7. c++简单线程池实现

    线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...

  8. APP的宣传方式有哪些

    APP应用已经成为了互联网不可缺少的话题,事实上,开发一款移动APP的成本不是很高,但是怎样以最低的成本得到最大的推广效果,这是企业和开发者都很关心的一个问题.下面,我们来探讨一下这个问题. 1.一款 ...

  9. [LeetCode] Encode and Decode TinyURL 编码和解码精简URL地址

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  10. 用DotTrace 来分析.NET-Core程序

    1. 前言   看园子里面讲dotTrace 的文章不多,最近也有这方面的需要,于是去搜索了一下,.NET 性能分析方面的工具.目的呢,主要是想发现我的代码中,哪些代码占用了最多时间,来进行优化.主要 ...