Angular
文章平均质量分 79
Jack N
全栈工程师,关注.NET/node.js, Angular/React。
展开
-
angular绑定(脏检查)方面的性能优化技巧
文章目录1. 为什么要优化2. 编程习惯方面2.1. NgForOf,加入trackBy提升性能2.2. Angular数据绑定的三种方式2.3. 除非需要,都是用单向绑定,减少监控值的个数3. ChangeDetectionStrategy.OnPush 进行性能提升4. 利用ngzone-runOutsideAngular优化5. 手动控制脏检查 ChangeDetectorRef6. 总结环境:Angular: 8+1. 为什么要优化双向绑定是一柄双刃剑,提高开发效率的同时,也牺牲了性原创 2021-03-30 09:15:55 · 6891 阅读 · 0 评论 -
Angular入门到精通系列教程(15)- 目录结构(工程结构)推荐
文章目录1. 概要2. 目录结构(工程结构)推荐2.1. 总的原则2.2. 实例2.3. 共享模块-SharedModule3. 高级应用 - angular库、工作空间(workspace )3.1. 目录结构示意4. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 概要实际的Angular项目,肯定不是一个简单的Hello World程序,会包含很多原创 2021-01-29 14:47:59 · 6583 阅读 · 0 评论 -
Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
文章目录1. 概要2. 编译打包2.1. 基本打包命令2.2. 打包部署到二级目录3. Angular站点的发布3.1. web服务器发布3.2. 使用docker发布4. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 概要当我们完成angular的开发后,如何部署到服务器呢?2. 编译打包2.1. 基本打包命令基于Angular CLI生成的A原创 2021-01-29 10:48:09 · 7066 阅读 · 0 评论 -
Angular入门到精通系列教程(13)- 路由守卫(Route Guards)
文章目录1. 摘要2. 路由守卫(Route Guards)2.1. 创建路由守卫2.2. 控制路由是否可以激活2.3. 控制路由是否退出(离开)3. 总结1. 摘要2. 路由守卫(Route Guards)2.1. 创建路由守卫2.2. 控制路由是否可以激活2.3. 控制路由是否退出(离开)3. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code原创 2021-01-25 16:51:18 · 6501 阅读 · 0 评论 -
Angular入门到精通系列教程(12)- 路由(Routing)
文章目录1. 摘要2. 路由(Router)基本用法2.1. 准备2.2. 注册路由2.3. html中的用法2.4. ts 代码中的用法3. 接收参数3.1. 路径中的参数3.2. 参数(QueryParameter)中的参数4. URL路径显示格式5. 部署中遇到的问题6. 总结1. 摘要2. 路由(Router)基本用法2.1. 准备2.2. 注册路由2.3. html中的用法2.4. ts 代码中的用法3. 接收参数3.1. 路径中的参数3.2. 参数(QueryPara原创 2021-01-25 14:48:40 · 6951 阅读 · 0 评论 -
Angular入门到精通系列教程(11)- 模块(NgModule),延迟加载模块
文章目录1. 摘要2. NgModule举例、说明3. Angular CLI生成模块4. 延迟加载模块5. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 摘要模块(NgModule)是Angular的核心概念之一。模块(NgModule)用于组织业务代码,按照自己的业务场景,把组件、服务、路由打包到模块里面。模块(NgModule)的主要作用:原创 2021-01-25 10:17:23 · 6483 阅读 · 0 评论 -
Angular入门到精通系列教程(10)- 指令(Directive)
文章目录1. 摘要2. 组件与指令之间的关系2.1. 指令的种类3. Angular 中指令的用途4. 指令举例4.1. 指令功能4.2. Anuglar CLI生成基本文件4.3. Directive指令核心代码4.4. 使用该指令5. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 摘要指令(Directive)在Angular 1.0时代(当时叫A原创 2021-01-13 15:34:19 · 6252 阅读 · 0 评论 -
Angular入门到精通系列教程(9)- 组件的生命周期(Component Lifecycle Hook)
文章目录1. 摘要2. 生命周期及顺序3. 响应生命周期事件4. 主要生命周期事件4.1. 初始化事件 ngOnInit()4.2. 实例销毁 ngOnDestroy()5. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 摘要当 Angular 实例化组件类并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angula原创 2021-01-12 16:34:21 · 6441 阅读 · 0 评论 -
Angular入门到精通系列教程(8)- 父子组件(Component)之间传递数据
文章目录1. 摘要2. 父传子 @Input()2.1. 子组件定义@Input()2.2. 父组件传递变量给子组件3. 子传父 @Output()3.1. 子组件定义@Output3.2. 父组件订阅事件4. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 摘要组件之间传递数据,最主要的就是父子组件之间传递数据, 例如:<parent-comp原创 2021-01-12 15:27:14 · 6476 阅读 · 0 评论 -
Angular入门到精通系列教程(7)- 组件(@Component)基本知识
文章目录1. 概述2. 创建Component2.1. 组件模板3. 视图封装模式3.1. 特殊的选择器 :host3.2. inline-styles4. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 概述组件是 Angular 应用的主要构造块。每个组件包括如下部分:一个 HTML 模板,用于声明页面要渲染的内容一个用于定义行为的 Types原创 2021-01-12 14:29:26 · 7320 阅读 · 0 评论 -
Angular入门到精通系列教程(6)- Angular的升级
文章目录1. 摘要2. https://update.angular.io/3. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code1. 摘要近些年Web技术飞速发展,新的类库、框架如雨后春笋般不断涌现,而每个类库也不断的更新、升级,甚至是不再兼容的升级。笔者之前维护的一个6年项目,是用jQueryMobile开发的,估计入门web开发比较短的同学都没有听说过原创 2021-01-11 16:51:31 · 6600 阅读 · 0 评论 -
Angular入门到精通系列教程(5)- 第三方UI库(Angular Material)
文章目录1. 第三方UI库的选择2. Angular Material2.1. 优缺点2.1.1. 优点2.1.2. 缺点2.2. 引入到项目3. 总结环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: VSCode1. 第三方UI库的选择Angular开发,除非你只有简单一两个页面,否则引入第三方UI库就是必不可少的。而具体用哪个库,就需要考虑多方面的东西了。比如:流行程度版本更新情况 (是否能原创 2021-01-11 15:36:58 · 7218 阅读 · 0 评论 -
Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目
文章目录1. 本地开发环境搭建1.1. node.js1.2. Angular CLI2. 开发工具 - Visual Studio Code第一个Anuglar项目创建第一个anuglar项目Angular CLI常用命令在线实战项目新手项目:`Basic Angular app`入门项目:`Tour of Heroes`了解了一些Angular的基本概念后,如果想进一步学习Angular,接下来让我们来搭建本地开发环境,并从一个入门项目了解Angular的基本用法。环境:Angular CLI原创 2021-01-11 10:07:26 · 6645 阅读 · 0 评论 -
Angular入门到精通系列教程(2) - Angular基本概念
1. Angular (Angular2)v.s. AngularJS2. 检查本地环境的版本3. TypeScript4. Angular CLI5. Angular 的版本6. Angular 版本如何升级7. 依赖注入(dependency injection)8. 编译-AOT和JIT的区别环境: Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3 npm : 6.14.6IDE: VSCode1. Angular .原创 2021-01-08 15:01:34 · 7020 阅读 · 0 评论 -
Angular入门到精通系列教程(1) - Angular,Vue,React 选型
1. 概述总的来说一句话,如果你是老大,你可以选择用什么;如果你不是,那么,老大让用什么,你就用什么。前端框架Angular,Vue,React三选一,没有第四种。 (当然,如果只是一两个简单的页面,纯JS、jquery足够了)。国内的话,React和vue更流行一点,国外的话React和Angular更流行。Vue 中文资料更多一些Angular有些资源访问受限或者较慢(防火墙问题)2. 框架比较网上比较的文章太多了,如果想了解,baidu、google一下吧,这个就不再多说了。3.原创 2021-01-08 16:03:21 · 6290 阅读 · 0 评论 -
嵌入在iframe中的Angular站点,如何打开一个新的tab页面
文章目录嵌入在iframe中的Angular站点,如何在打开一个新的tab页面1. 需求2. 方案3. 总结嵌入在iframe中的Angular站点,如何在打开一个新的tab页面1. 需求一个angular web站点,通过一个iframe嵌套在另一个web站点中。点击一个按钮,希望能够在一个新的页面(Tab)中打开另外一个页面。2. 方案主要困难在于处理2个站点的地址不同的问题。既可以通过 html 设置href实现,又可以直接使用js代码实现。Code: <a [href]=原创 2021-01-04 11:22:49 · 6545 阅读 · 0 评论 -
Angular 面试题汇总3-单元测试
Angular v8+面试系列Angular 面试题汇总1-基本知识Angular 面试题汇总2-Component/Service目录Angular中的测试有哪些种,基于哪些测试框架什么是Karma? 在Angular中有什么作用?什么是Jasmine? 在Angular中有什么用?什么是protractor?单元测试 Unit Test什么是Angular中的单元测试?Angular UT的最佳实践测试Service时,有其他依赖如何处理?端到端测试(e2e)Angular中的测试有哪些.原创 2020-11-20 16:35:29 · 6970 阅读 · 0 评论 -
Angular 面试题汇总2-Component/Service (Angular v8+)
Angular v8+面试系列Angular 面试题汇总1-基本知识.目录关于Angular Componentcss样式的作用域、Shadow DOM关于Angular Service单例服务(singleton)forRoot() 模式关于Angular Componentcss样式的作用域、Shadow DOMShadow DOM是HTML规范的一部分,它允许开发人员封装自己的HTML标记,CSS样式和JavaScript。创建样式Component时,可以通过设置,启用。@Com.原创 2020-11-20 10:43:21 · 8039 阅读 · 0 评论 -
Angular 面试题汇总1-基本知识 (Angular v8+)
Angular 更新还是非常快的, 目前(2020)的速度是每年2个主版本。网上也有不少面试题,不过很多都是针对老的版本,尤其是AngularJS的。因为最近在看Angular的面试题,所以特意总结一下。下面内容都是基于Angular v8.0以上的。顺便科普一下,Angular最早期的版本,也叫AnugularJS,使用javascript开发;新的版本,才叫Angular,也称为Angular2,使用typescript开发,Angular和AngularJS是不兼容的(当然也有2个版本的集成方案)。原创 2020-11-17 09:17:59 · 29432 阅读 · 0 评论 -
Angular 服务端渲染(SSR) 学习笔记
文章目录服务器端渲染 (SSR)SSR的利弊SSR的优势SSR的局限服务器端渲染 (SSR)SSR是Server Side Render简称,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的html就可以了。SSR的利弊SSR的优势更利于SEO: 不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本(Google除外,据说Googlebot可以运行javaScript)。浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据原创 2020-11-08 07:58:21 · 8172 阅读 · 0 评论 -
Angular入门到精通系列教程(3) - Angular 技术栈 (Tech Stack)
(Based on Angular 9)1. IDEVisual Studio Code: Best and free IDE for web developing.Plugins:2. UI Framework3. State Management4. Code Reuse原创 2020-11-03 11:19:47 · 29900 阅读 · 0 评论 -
Angular UT 异常 - Cannot find module “tslib”
When running angular UT, you may encounter the error message looks like:Uncaught Error: Cannot find module 'tslib' at webpackEmptyContext (src sync:2) [<root>] at :9876/_karma_webpack_/D:/workspace/advantage-web-access/web-ui/node_modules/@a原创 2020-10-26 14:28:38 · 7546 阅读 · 0 评论