angular小记
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小记的更多相关文章
- Electron Angular 开发小记
一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...
- angular开发手机网页小记
禁用滑动事件,阻止触发浏览器翻页行为 <html lang="en" style="height:100%" ontouchmove="(f ...
- React和Angular
React和Angular 你若装逼,请带我飞! 从前,从前,听说React只负责UI,话说写Angular代码就像写后端,现在看来,React赢在情怀上了: 我认为没必要老是拿React和Angul ...
- angular常见问题总结
本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...
- Angular2 初学小记
1.与Angular1的异同 几乎完全不同(什么鬼~ 1)保留一些特性 表达式仍旧用{{}}. 2)属性指令变为驼峰式 ng-if ---> ngIf 3)ng-repeat被ngFor代替 4 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
随机推荐
- windows下nginx配合nodejs进行反向代理
本文原创,转载请附上原作者链接!https://www.cnblogs.com/LSWu/articles/14848324.html 1.安装node.js 从node.js官网上下载node.js ...
- newbee-mall开源项目被慕课网拿去做课程,然后我毫不知情,这又是什么骚操作?
万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...
- Jmeter(五十) - 从入门到精通高级篇 - jmeter 之模拟弱网进行测试(详解教程)
1.简介 在实际工作中,网络带宽一定不会是持续稳定的保持某一个值,而是有高有低.因此为了测试场景和实际能够无限的接近,所以我们需要模拟一下来达到效果.还有就是在实际的测试工作中,会因为业务需要,有时限 ...
- Go语言协程并发---等待组sync.WaitGroup
package main import ( "fmt" "sync" "time" ) /*等待组API介绍*/ func main071( ...
- Python+Selenium - 三种等待方式
元素:存在 > 可见 > 可用 需要判断元素状态 等待方式1:强制等待 -- 辅助 设置等待几秒,就必须等待几秒 示例: from time import sleepsleep(3) 强 ...
- 重新整理 .net core 实践篇—————日志系统之战地记者[十五]
前言 本节开始整理日志相关的东西.先整理一下日志的基本原理. 正文 首先介绍一下包: Microsoft.Extengsion.Logging.Abstrations 这个是接口包. Microsof ...
- ASML光刻机PK 原子弹,难度?
ASML光刻机PK 原子弹,难度? 一. 物理世界和网络世界的交汇点:光刻机 光刻机的技术有多高级,看看这个知乎提问,可以感受一下: 有人这样形容光刻机:这是一种集合了数学.光学.流体力学.高分子物 ...
- BEP 7:CUDA外部内存管理插件(上)
BEP 7:CUDA外部内存管理插件(上) 背景和目标 在CUDA阵列接口使得能够共享不同的Python之间的数据库的访问CUDA设备.但是,每个库都与其它库区别对待.例如: Numba在内部管理内存 ...
- GPU—加速数据科学工作流程
GPU-加速数据科学工作流程 GPU-ACCELERATE YOUR DATA SCIENCE WORKFLOWS 传统上,数据科学工作流程是缓慢而繁琐的,依赖于cpu来加载.过滤和操作数据,训练和部 ...
- Turing渲染着色器网格技术分析
Turing渲染着色器网格技术分析 图灵体系结构通过使用 网格着色器 引入了一种新的可编程几何着色管道.新的着色器将计算编程模型引入到图形管道中,因为协同使用线程在芯片上直接生成紧凑网格( meshl ...