declarations:包装组件或指令等

providers:依赖注入

imports:导入其他模块

bootstrap:设置根组件

exports:导出组件或指令等

app.component.ts:嵌套组件树的根组件

app.module.ts:根模块,开始只申明AppComponent

main.ts:应用的入口点,引导AppModule在浏览器中运行

<router-outlet>:可以简单把它理解为: 页面的占位符,动态加载,会被替换掉的。当点击 home、about、 dashboard 时, 在导航栏的下方,会被对应的 XX.component.html 替换掉。 这就是单页面路由的原理。Routers 参数是一个有路由定义组成的一个数组。路由定义分如下两部分:Path:这个是用来匹配浏览器地址中的URL。Component:路由对应的组件。

routerLink:链接到已设置的路由 <a routerLink="dashboard">Dashboard</a>

navigate() :跳转路由传参

// 页面带参数跳转方法
goUser() {
  this.router.navigate(['/user'], {
  queryParams: {
    name: '另一个凉雨'
    }
  });
}

// 接收传过来的参数
this.name = this.routeInfo.snapshot.queryParams['name'];

模块->路由->子模块->子路由->组件->构成页面
新增通用组件注册到sharedModule中,可以复用

ng-alian知识:
ng serve --host 192.168.1.121 --port 4200
[] -属性 ()-事件 [()]-双向绑定

angular小记的更多相关文章

  1. Electron Angular 开发小记

    一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...

  2. angular开发手机网页小记

    禁用滑动事件,阻止触发浏览器翻页行为   <html lang="en" style="height:100%" ontouchmove="(f ...

  3. React和Angular

    React和Angular 你若装逼,请带我飞! 从前,从前,听说React只负责UI,话说写Angular代码就像写后端,现在看来,React赢在情怀上了: 我认为没必要老是拿React和Angul ...

  4. angular常见问题总结

    本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...

  5. Angular2 初学小记

    1.与Angular1的异同 几乎完全不同(什么鬼~ 1)保留一些特性 表达式仍旧用{{}}. 2)属性指令变为驼峰式 ng-if ---> ngIf 3)ng-repeat被ngFor代替 4 ...

  6. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  7. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  8. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  9. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

随机推荐

  1. Day029 JDK8中新日期和时间API (二)

    # JDK8中新日期和时间API (二) Instant介绍 Instant:时间线上的一个瞬时点. 这可能被用来记录应用程序中的事件时间 戳. 在处理时间和日期的时候,我们通常会想到年,月,日,时, ...

  2. C# Asp.Net 实现PPT/PDF转成图片(不依赖office)

    最近公司有个需求,将PPT课件转成图片列表,然后在前端展示成轮播图,于是一开始通过Microsoft.Office.Interop.PowerPoint包实现了这个需求具体代码如下: /// < ...

  3. 『动善时』JMeter基础 — 32、JMeter察看结果树组件详解

    目录 1.察看结果树介绍 2.察看结果树界面详解 3.察看结果树的其他功能 (1)将数据写入文件中 (2)Search功能 (3)Scroll automatically选项 4.总结 1.察看结果树 ...

  4. Python+Selenium学习笔记16 - unittest单元测试框架

    unittest单元测试框架包括 Test Case,  Test Suite, Test Runner, Test Fixture Test Cases 组成Test Suite, Test Run ...

  5. RADAR毫米波雷达传感器

    RADAR毫米波雷达传感器 TI 利用先进的集成式射频 CMOS 雷达技术提供品类齐全的 60GHz 和 77GHz 传感器产品系列 通过高性能集成射频互补金属氧化物半导体 (CMOS) 雷达技术,可 ...

  6. Tengine MLOps概述

    Tengine MLOps概述 大幅提高产业应用从云向边缘迁移的效率 MLOps Cloud Native 聚焦于提升云端的运营过程效率 MLOps Edge Native 聚焦于解决边缘应用开发及异 ...

  7. 深度学习编译与优化Deep Learning Compiler and Optimizer

    深度学习编译与优化Deep Learning Compiler and Optimizer

  8. AMD–7nm “Rome”芯片SOC体系结构,支持64核

    AMD–7nm "Rome"芯片SOC体系结构,支持64核 AMD Fully Discloses Zeppelin SOC Architecture Details at ISS ...

  9. NSight Compute 用户手册(下)

    主菜单 文件 新建项目使用"新建项目"对话框创建新的分析项目 4. Main Menu and Toolbar Information on the main menu and t ...

  10. Maven execution terminated abnormally (exit code 1) 完美解决

    https://www.pianshen.com/article/1477185745/ 找到本地仓库这个包中, 删掉,重新导入,,完美解决