Angular快速入门
关注
分享
扫一扫
文章平均质量分 79
细化官网教程，结合实例，快速入门。
淼叔
资深架构师，PMP、OCP、CSM、HPE University讲师，EXIN DevOps Professional与DevOps Master认证讲师，曾担任HPE GD China DevOps & Agile Leader，帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域，有超过十年金融外汇行业的架构设计、开发、维护经验，在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累，著有企业级DevOps技术与工具实战。
展开
-
ng-alain新版尝试
这篇文章介绍一下在MacOS从0开始搭建前端框架ng-alain（封装ng-zorro（封装angular））。原创 2021-03-20 00:16:11 · 5091 阅读 · 5 评论 -
Node-RED使用指南：24:嵌入到Angular应用中
在这篇文章中将继续介绍Node-RED的集成方式，在上篇文章中介绍了将Node-RED嵌入Node.js的方法，这篇继续介绍如何通过iframe将Node-RED嵌入到Angular中。原创 2020-03-11 07:09:12 · 2902 阅读 · 0 评论 -
持续构建：使用镜像方式进行Angular应用的开发构建
这篇文章以当前稳定版本的Angular CLI 8.3.21为例，介绍一下使用镜像方式进行Angular应用的开发、构建的方法。原创 2020-01-07 22:15:02 · 1571 阅读 · 0 评论 -
angular常见错误总结
整理一些Angular常见的错误信息。原创 2019-12-05 06:36:19 · 1159 阅读 · 0 评论 -
Jenkins基础：使用NPM构建前端应用9：结合SonarQube显示测试覆盖率
在前面的文章中我们介绍了如何将Karma、Jasmine的前端测试集成到Jenkins的流水线中，在这篇文章中将继续介绍如何将前端单元测试覆盖率的信息正确地显示到SonarQube之上。原创 2019-11-04 21:28:27 · 1587 阅读 · 0 评论 -
Jenkins基础：使用NPM构建前端应用8：使用Karma和Jasmine进行前端测试
在前面的文章中我们介绍了如何集成SonarQube来实现前端应用的代码质量状况的显示，在这篇文章中将继续介绍如何将Karma、Jasmine的前端测试集成到Jenkins的流水线中。原创 2019-11-04 21:06:27 · 972 阅读 · 0 评论 -
使用SonarTS创建进行typescript代码质量扫描（续）：如何设定除外的文件
在前面的文章中介绍了如何使用SonarQube结合Karma与Jasmine进行前端单元测试并显示测试覆盖率，这篇文章介绍一下如何指定扫描目录和除外文件。原创 2019-11-04 20:20:36 · 1359 阅读 · 0 评论 -
使用SonarTS创建进行typescript代码质量扫描（续）：如何设定除外的文件
在前面的文章中介绍了如何使用SonarQube结合Karma与Jasmine进行前端单元测试并显示测试覆盖率，这篇文章介绍一下如何指定扫描目录和除外文件。原创 2019-11-04 20:18:42 · 946 阅读 · 0 评论 -
Alpine容器中运行Karma的测试用例
Karma和Jasmine结合使用，为前端提供了单体测试框架，Karma用于执行测试用例，一般情况下它会启动浏览器然后执行测试用例，这篇文章介绍一下如何在Alpine容器中使用Karma和Jasmine执行前端测试用例与常见问题。原创 2019-11-04 20:09:32 · 1053 阅读 · 0 评论 -
Chrome的命令行安装与版本确认方法
自从Chrome 59之后，提供了Headless mode，这个模式在前端的自动化测试框架进行持续集成实践中被广泛地使用。这篇文章介绍一下在图形化操作无法使用的情况下，Chrome的安装和版本确认的方法。原创 2019-11-04 19:36:16 · 4354 阅读 · 0 评论 -
使用SonarTS创建进行typescript代码质量扫描（续）：如何显示测试覆盖率
在前面的文章中介绍了如何使用SonarQube进行代码质量扫描，这篇文章继续介绍如何结合使用Karma + Jamsine 在Angular中实现前端单元测试与覆盖率的确认。原创 2019-11-04 05:19:39 · 2089 阅读 · 3 评论 -
Angular 8中使用PhantomJS测试
这篇文章整理一下在Angular 8中使用PhantomJS测试碰到的问题与解决方法。原创 2019-11-01 07:13:23 · 837 阅读 · 0 评论 -
Angular 入门教程系列：45：Karma测试的持续集成实践
使用Angular + Karma + Jasmine可以进行前端的单体测试，从前面的文章中我们了解到了Karma的工作原理，它会启动一个指定种类的浏览器，然后在此浏览器中运行测试用例。如果需要进行持续集成，比如结合Jenkins或者其他方式进行自动化的测试，如果需要手动关闭浏览器的操作，或者无法提供图形化的界面的情况保证测试的执行这些都会成为持续集成的障碍，这篇文章整理一下解决的常见方法。原创 2019-11-01 06:39:58 · 1091 阅读 · 0 评论 -
Angular 入门教程系列：44：Karma使用介绍
在前一篇文章中介绍了Jasmine框架在Angular中的使用，而无法避开的另外一个部分就是Karma，这篇文章将继续通过demo应用来介绍Karma在Angular中的运用。原创 2019-10-31 20:00:03 · 4021 阅读 · 0 评论 -
Angular 入门教程系列：43：Jasmine使用介绍
在Angular中进行单体测试，使用的是Jasmine，这篇文章将就ng new demo所生成出来的代码为例进行说明Angular中是如何使用Jasmine进行单元测试的。原创 2019-10-29 20:33:14 · 2069 阅读 · 0 评论 -
Jenkins基础：使用NPM构建前端应用3：使用NodeJS构建前端应用
这篇文章以具体的例子使用NodeJS插件来构建NodeJS的前端应用，本文以Angular8.3.8的cli生成的demo应用为例，通过一个具体的Jenkinsfile，介绍Angular的应用从创建到编译的过程。原创 2019-10-19 05:45:51 · 1570 阅读 · 0 评论 -
持续构建：NodeJS的Alpine镜像
Alpine镜像目前并不能通过npm add来安装所有的npm和nodejs的版本，所以在easypack的Alping镜像中使用两种方式来进行NodeJS镜像的生成，Alpine中已经打包的直接使用，Alpine中没有的包，则通过源码编译的方式来予以实现。原创 2019-10-17 22:08:39 · 5886 阅读 · 0 评论 -
Alpine版的Jenkins插件的No such file or directory的解决方法
这篇文章介绍一种较为拧巴的方式纠结地解决Alpine版本的Jenkins的NodeJS插件使用中所出现的No such file or directory的问题的对应方法。原创 2019-10-17 20:43:36 · 3823 阅读 · 0 评论 -
从源码构建基于Alpine的NodeJS镜像
在前一篇文章中介绍了直接使用Alpine的npmjs与npm的package的方式来构建NodeJS镜像，但是这种方法的局限性目前在于Alpine的包所支持的版本有限，如果所需版本不能通过apk add来添加，使用源码进行编译来生成所需的NodeJS包则成为解决方法之一。这篇文章将通过在具体的版本来介绍如何在Alpine中进行源码的编译来生成NodeJS的二进制包。原创 2019-10-17 19:13:20 · 2146 阅读 · 0 评论 -
如何构建基于Alpine的NodeJS镜像
NodeJS的运行需要libc的支持，而基于musl的Alpine镜像显然不能符合这个要求。在前面的文章中也验证过，目前使用社区对于Alpine镜像的glibc的粗暴支持方案，是无法直接安装后解决NodeJS使用问题的，依然会提示env: ‘node’: No such file or directory的问题。而Alpine中自带的nodejs则没有这个问题。原创 2019-10-16 21:35:20 · 4775 阅读 · 1 评论 -
ng-alain中的husky使用问题与解决
在Angular的开发过程中，使用husky可以实现在代码提交的时候通过husky的hook来回掉一些定制化的需求，最常见的使用场景就是代码ng lint的代码检查。而ng-alain也将husky集成至其中。这篇文章memo一下一个常见问题的对应方法。原创 2019-10-16 20:47:29 · 607 阅读 · 0 评论 -
ng-alain使用中的路由部分自动代码生成的一个问题
在ng-alain8.5.0的使用中，发现使用```ng g ng-alain:list list -m=模块名称```命令时多次出现路由部分的代码多生成一个分号的问题，使用本文予以memo，问题很小，无伤大雅，估计后续版本会更正此问题。原创 2019-10-16 20:45:42 · 870 阅读 · 0 评论 -
ng-alain中的husky使用问题与解决
在Angular的开发过程中，使用husky可以实现在代码提交的时候通过husky的hook来回掉一些定制化的需求，最常见的使用场景就是代码ng lint的代码检查。而ng-alain也将husky集成至其中。这篇文章memo一下一个常见问题的对应方法。原创 2019-10-14 20:29:08 · 896 阅读 · 0 评论 -
开发工具系列：VSCODE使用与技巧(1)
VSCODE是微软在2015年4月推出的一款跨平台的IDE开发工具，支持Windows和MacOS和Linux，支持多种开发语言，迅速成为了前端/后端或者全栈开发者喜爱的开发工具之一。原创 2019-10-13 19:41:04 · 685 阅读 · 0 评论 -
Angular 入门教程系列：41：使用source-map-explorer对构建结果进行分析
在前面一篇文章中介绍了使用webpack-bundle-analyzer对构建结果大小进行分析的方法，这篇文章来介绍另外一种工具：source-map-explorer的使用方式。原创 2019-10-11 22:25:52 · 2840 阅读 · 0 评论 -
Angular 入门教程系列：40：使用webpack-bundle-analyzer对构建结果进行分析
webpack-bundle-analyzer是一个npm的package，可以用于构建结果的分析。在实际的使用中，由于Angular页面的特点，项目稍大一些之后，即使使用了prod等选项进行优化，也往往编译后会有数M之大。这时使用webpack-bundle-analyzer即可对结果进行分析，可以通过webpack-bundle-analyzer生成的分析结果对各个组成部分的大小进行非常方便...原创 2019-10-11 21:49:08 · 4984 阅读 · 0 评论 -
Angular 入门教程系列：38：升级小结(5.2->6.1)
在前面的文章中也曾经分别提到过，angular6由于存在一些稍大的变化，所以不能像Angular4到Angular5那样基本无感地进行升级，这里结合官方提示，简单整理一下Angular5.2到目前稳定的6.1的升级要点。升级前后版本：升级前版本升级后版本5.26.1事前准备变更内容V5.2V6.1说明HttpModuleHttpCli...原创 2018-10-29 06:46:04 · 3890 阅读 · 0 评论 -
Angular 入门教程系列：37：使用ng-alain快速开发
ng-alain在ng-zorro-antd上再封一程，可以更快加速开发速度，目前在github上已经超过1800个star。这篇文章来简单看一下如何使用。创建应用框架因为alain缺省使用使用less作为样式设定，在创建骨架时需要指定style为less方式。使用ng new alaindemo –skip-install –style less进行创建。下载依赖可以使用ya...原创 2018-08-08 05:19:51 · 17225 阅读 · 2 评论 -
Angular 入门教程系列：36：Restful的增删改查
上篇文章中讲解了增删改查中的查，这篇来看一下如何进行增删改。删除使用delete进行删除，一般页面设计的时候也基本都是在列表页进行操作的。首先为删除的链接添加一个函数，同时将...原创 2018-08-17 20:31:03 · 4855 阅读 · 0 评论 -
Angular 入门教程系列：35：Restful的增删改查
这篇文章来介绍一下如何进行前后端交互，一个常见的场景就是前端调用后端提供的restful api，进行增删改查，结合之前提到的新版本的http模块和rxjs，这篇文章首先使用kong搭建一个提供后端restful的api接口，对微服务的api增删改查进行处理，以实现api的简单管理。事前准备搭建kong，同时启动api服务，然后将此api注册到kong上，通过kong提供的查询的相关Res...原创 2018-08-08 04:53:25 · 5393 阅读 · 0 评论 -
Angular 入门教程系列：34：Angular6下的Http模块与Rxjs6
Angular6的升级，略有影响的地方应该主要集中在Rxjs6，而至于http，在Angular4.3之后就发生了变化，如果没有欠债的话，升级应该很简单。即使有欠债的话，修改的内容也不多。rxjs的变换rxjs6主要在包的结构/pipe的使用方式/API的重命名这几点与旧版本的使用方式不相容的变更，所以导致在实际使用中，有如下的变化import的方式 import类...原创 2018-08-07 06:26:58 · 8639 阅读 · 0 评论 -
Angular 入门教程系列：33：移动端统计图表F2
F2应该就是Fast & Flexible的缩写，从名称上就能看出其所关注的场景。F2也是蚂蚁金服下的一款开源可视化的前端组件库，使用F2可以很简单地根据数据创建出统计图表，F2源于早期的G2-Mobile，所以它是针对于移动端的。移动端有很多需要考虑的因素，比如：性能/大小/扩展性等。这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。安装f2...原创 2018-08-07 06:26:28 · 5303 阅读 · 0 评论 -
Angular 入门教程系列：32：统计图表G2
G2是蚂蚁金服下的一款开源可视化的前端组件库，使用G2可以很简单地根据数据创建出统计图表，这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。安装g2从版本3开始，data-set进行了分离，简单的方式可以不直接使用data-set，可以不必安装@antv/data-set，这篇文章便没有安装data-setliumiaocn:ng6demo li...原创 2018-08-07 06:25:53 · 9400 阅读 · 0 评论 -
Angular 入门教程系列：31：使用子路由和菜单动作
在这篇文章中创建一个子路由用于显示conent，用于展示各种组件比如G2如何使用。创建moduleliumiaocn:default-layout liumiaolsdefault−layout.component.cssdefault−layout.component.spec.tsdefault−layout.component.htmldefault−layout.compone...原创 2018-08-04 11:26:59 · 4804 阅读 · 0 评论 -
Angular 入门教程系列：30：设置页面路由
上篇文章搭建了一个页面的框架，这篇文章中将会添加路由，使得页面可以通过路由来进行控制。原创 2018-08-04 05:45:43 · 4288 阅读 · 0 评论 -
Angular 入门教程系列：29：简单布局的页面
这篇文章用最简单的方式做一个包含左侧可收缩的侧边栏菜单和固定头部的页面布局。修改内容基本上还在前面的文章上使用的内容，为了简单，只是简单修改一下HTML和CSS的内容default-layout.component.htmlliumiaocn:default-layout liumiao$ cat default-layout.component.html <nz-...原创 2018-08-04 05:11:10 · 7962 阅读 · 0 评论 -
Angular 入门教程系列：28：NRM 多重npm库管理方式
nrm是一个MIT的开源的npm package，使用npm install nrm即可。它的作用在于管理各种常用的库，比如taobao的cnpm或者缺省的npm，其作用基本等于npm get/set registry + 常用的registry的地址。概要信息 项目 说明 开源/闭源 开源 License类别 MIT License 代码管理...原创 2018-08-04 05:10:27 · 4424 阅读 · 0 评论 -
Angular 入门教程系列：27：可折叠的sidebar和菜单
zorro对nz-sider和menu都提供了折叠的选项，可以很容易实现动态折叠的效果。menu的nzInlineCollapsedmenu通过nzInlineCollapsed的设定进行htmlliumiaocn:default-layout liumiao$ cat default-layout.component.html <nz-layout> ...原创 2018-08-03 06:00:02 · 8157 阅读 · 1 评论 -
Angular 入门教程系列：26：使用zorro进行页面布局
这篇文章介绍一下Angular应用的页面布局方式，这里直接使用ng-zorro-antd的页面布局方式进行举例。zorro的页面布局简单的来说，zorro的layout有如下几种组件 类型 说明 nz-layout 布局容器，与其他layout组件结合使用 nz-header 顶部布局部分，与nz-layout结合使用 nz-sider...原创 2018-08-01 22:15:43 · 7018 阅读 · 0 评论 -
Angular 入门教程系列：25：Zorro定制主题
与之前的版本相比，稳定版本的zorro提供了定制主题的功能，而且和Ant Design React一样，主题定制文件是可以通用的。因为Ant Design的样式本身就是Less的，所以整体的调整会非常的简单。主题可定制可调整，应该是这个版本的zorro的最大亮点之一。使用前提Less的版本需要降到2.7.3，其实，Angular 5所支持的版本即为2.7.3:liumiaocn:n...原创 2018-08-01 20:03:22 · 7171 阅读 · 0 评论