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. windows下nginx配合nodejs进行反向代理

    本文原创,转载请附上原作者链接!https://www.cnblogs.com/LSWu/articles/14848324.html 1.安装node.js 从node.js官网上下载node.js ...

  2. newbee-mall开源项目被慕课网拿去做课程,然后我毫不知情,这又是什么骚操作?

    万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...

  3. Jmeter(五十) - 从入门到精通高级篇 - jmeter 之模拟弱网进行测试(详解教程)

    1.简介 在实际工作中,网络带宽一定不会是持续稳定的保持某一个值,而是有高有低.因此为了测试场景和实际能够无限的接近,所以我们需要模拟一下来达到效果.还有就是在实际的测试工作中,会因为业务需要,有时限 ...

  4. Go语言协程并发---等待组sync.WaitGroup

    package main import ( "fmt" "sync" "time" ) /*等待组API介绍*/ func main071( ...

  5. Python+Selenium - 三种等待方式

    元素:存在 > 可见 > 可用 需要判断元素状态 等待方式1:强制等待  -- 辅助 设置等待几秒,就必须等待几秒 示例: from time import sleepsleep(3) 强 ...

  6. 重新整理 .net core 实践篇—————日志系统之战地记者[十五]

    前言 本节开始整理日志相关的东西.先整理一下日志的基本原理. 正文 首先介绍一下包: Microsoft.Extengsion.Logging.Abstrations 这个是接口包. Microsof ...

  7. ASML光刻机PK 原子弹,难度?

    ASML光刻机PK 原子弹,难度? 一.  物理世界和网络世界的交汇点:光刻机 光刻机的技术有多高级,看看这个知乎提问,可以感受一下: 有人这样形容光刻机:这是一种集合了数学.光学.流体力学.高分子物 ...

  8. BEP 7:CUDA外部内存管理插件(上)

    BEP 7:CUDA外部内存管理插件(上) 背景和目标 在CUDA阵列接口使得能够共享不同的Python之间的数据库的访问CUDA设备.但是,每个库都与其它库区别对待.例如: Numba在内部管理内存 ...

  9. GPU—加速数据科学工作流程

    GPU-加速数据科学工作流程 GPU-ACCELERATE YOUR DATA SCIENCE WORKFLOWS 传统上,数据科学工作流程是缓慢而繁琐的,依赖于cpu来加载.过滤和操作数据,训练和部 ...

  10. Turing渲染着色器网格技术分析

    Turing渲染着色器网格技术分析 图灵体系结构通过使用 网格着色器 引入了一种新的可编程几何着色管道.新的着色器将计算编程模型引入到图形管道中,因为协同使用线程在芯片上直接生成紧凑网格( meshl ...