使用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. ELK学习总结（2-5）elk的版本控制

    ----------------------------------------------------------------- 1.悲观锁和乐观锁 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据 ...

  2. spring-oauth-server实践：授权方式三：PASSWORD模式下 authorities：ROLE_{user.privillege}, ROLE_USER

    一.数据库配置 1.oauth_client_details 2.user_ 3.user_privillege 二.password模式 授权过程 1.授权者granter和请求参数 Resourc ...

  3. tar命令-vi编辑器-磁盘分区及格式化-软链接及硬链接文件

    一.tar命令 1.将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) [root@localhost  /] #  cat  /etc/passwd  /etc/group ...

  4. uvalive 3213 Ancient Cipher

    https://vjudge.net/problem/UVALive-3213 题意: 输入两个字符串,问是否可以由第一个字符串的每个字符一一映射得到第二个字符串,字符是可以随意移动的. 思路: 统计 ...

  5. 05、NetCore2.0依赖注入（DI）之Web应用启动流程管理

    05.NetCore2.0依赖注入(DI)之Web应用启动流程管理 在一个Asp.net core 2.0 Web应用程序中,启动过程都做了些什么?NetCore2.0的依赖注入(DI)框架是如何管理 ...

  6. python操作MySQL数据库并将数据写入excel

    #!/usr/bin/python# -*- coding:utf-8 -*-'''方法:通过pymsql模块连接mysql数据库,然后通过游标cursor查询SQL语句将结果存储在Excel文件中, ...

  7. [LeetCode] Reach a Number 达到一个数字

    You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...

  8. [LeetCode] Network Delay Time 网络延迟时间

    There are N network nodes, labelled 1 to N. Given times, a list of travel times as directed edges ti ...

  9. jenkins构建个人github上的项目

    最近刚进一家新公司,公司采用的是自动化集成测试工具jenkins进行,构建,部署项目 因为以前,没接触过这类工具,所以打算在自己本机安装一个jenkins进行学习 具体安装步骤,很简单,不做讲解 1. ...

  10. [ZJOI2013]丽洁体

    题目描述 平时的练习和考试中,我们经常会碰上这样的题:命题人给出一个例句,要我们类比着写句子.这种往往被称为仿写的题,不单单出现在小学生的考试中,也有时会出现在中考中.许多同学都喜欢做这种题,因为较其 ...