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. .NET平台系列16 .NET5/Asp.Net Core 在全球Web框架权威性能测试 Web Framework Benchmarks 中的吊炸天表现

    系列目录     [已更新最新开发文章,点击查看详细] TechEmpower Web Framework Benchmarks 是许多Web应用程序框架执行基本任务(如JSON序列化.数据库访问和服 ...

  2. PTH的几种食用姿势

    PTH PTH(pass the hash)也叫做hash传递.在内网渗透中是一种很经典的攻击方式,原理就是攻击者可以直接通过NTLM Hash(mimikatz或其他手段抓取到的密码hash)访问远 ...

  3. 面部表情视频中进行远程心率测量:ICCV2019论文解析

    面部表情视频中进行远程心率测量:ICCV2019论文解析 Remote Heart Rate Measurement from Highly Compressed Facial Videos: an ...

  4. NSight Compute 用户手册(上)

    NSight Compute 用户手册(上) 非交互式配置文件活动 从NVIDIA Nsight Compute启动目标应用程序 启动NVIDIA Nsight Compute时,将出现欢迎页面.单击 ...

  5. 解决:django.core.exceptions.ImproperlyConfigured: Requested setting INSTALLED_APPS, but settings are not 的方法

    错误类型: 该错误是在在创建Django工程时出现遇到的错误 完整报错信息:(博文标题输入长度有限制) django.core.exceptions.ImproperlyConfigured: Req ...

  6. python读取配置文件,yaml模块读取yml文件

    ymal文件编写语法参考http://www.ruanyifeng.com/blog/2016/07/yaml.html ymal在python中的安装:pip install pyyaml yml文 ...

  7. mybatis学习——多对一和一对多查询

    首先先来说明一下数据库,数据库有两张表student表和teacher表: student表如下: teacher表如下: 两张表的关系:多个学生关联一位老师(多对一) *其中tid是外键 需要sql ...

  8. 又见 xcrun: error: invalid active developer path 错误

    每次升级完macOS都会被 Xcode command line tools missing xcrun 问候一遍,也是挺烦的. 这个春节过光顾着吃喝玩乐,过的蛮颓废的,感觉再也追不上朋友圈各位大佬了 ...

  9. 日常Bug排查-Nginx重复请求?

    日常Bug排查-Nginx重复请求? 前言 日常Bug排查系列都是一些简单Bug排查,笔者将在这里介绍一些排查Bug的简单技巧,其中不乏一些看起来很低级但很容易犯的问题. 问题现场 有一天运维突然找到 ...

  10. Halcon 纹理缺陷检测 apply_texture_inspection_model

    在纹理中找瑕疵.基于高斯混合模型(GMM)分类器的纹理检查模型,适用于图像金字塔,可以分析纹理的多个频率范围. [要求]训练样本,必须完美无瑕疵. [步骤] 1.创建模型 create_texture ...