一直想写一个Angular2+的分享,但是没有一个好的切入点。...前段时间我向分享Chat的白宦成老师请教markdown的问题,他向我推荐Typora编辑器,我觉着这就是我一直想要的Markdown编辑器,于是我就想到了这个主题。...我主要是想通过一个实际应用分享一下Angular(文中提到的Angular指的都是Angular2+,实际版本是Angular5)的开发过程,主要内容包括: Angular项目建立 Angular中的服务...Angular中使用第三方传统库 打包桌面版本 制作一个安装程序 今天初步理了个提纲,如下所示: ?...《使用 Angular2+ 开发 Markdown 编辑器》提纲
之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能....下面就来说说如何实现: 1. export class person{ constructor( public name:string, public age:number ){...500).subscribe((value)=>{ this.keyword=value }) } 需要在头部引入 import { FormControl } from '@angular...使用ng指令 ng g pipe pipe/searchPipe 代码如下 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
MSDK同时外发版本太多 MSDK的版本文档使用word编写,不同版本文档不易比对。...由于以上的问题,经常出现游戏更新版本以后没有同步使用新版本的文档,无法同步更新我们已经修正的文档错误,或者由于文档比对太过麻烦和版本太多,开发修改文档错误以后比较难同步修改到其余版本。...为了解决这个问题,MSDK团队早期尝试过使用wiki,然而由于wiki的语法太过复杂,编辑的时间成本很高,所以最终还是没能坚持。但是文档online化总要解决,不然上面的问题会一直存在。...mdwiki一个基于bootstrap的,使用markdown编辑内容的js wiki框架。...version.md MDWiki相关介绍: github地址:https://github.com/Dynalon/mdwiki 官网:http://www.mdwiki.info 使用指引
创建一个angular空项目 ng new angular-runtime-config 因为是demo 这里就不选择路由了,css我使用scss ?...创建一个名为config的service文件 cd angular-runtime-config ng g service config 对config.service.ts文件 增加两个方法和一个私有属性...github源码 https://github.com/lilugirl/angular-runtime-config
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入。.../blog.service"; providers: [ BlogService ], 博客模块列表组件 我打算这样实现列表,上面一个大的搜索框,下面就是列表,不用分页,使用加载更多的方式...注意这个子模块我们要使用NG ZORRO,所以还是要在子模块中引入。...image.png 先简单实现,后面再慢慢优化吧 ?...加入动画效果 有动画使用相关疑惑的可以参考我的这篇文章及其相关文章:Angular练习之animations动画 源码下载 思考 angular模块,组件,普通的ts文件之间的关系和区别。
可以在React中使用,也可以单独使用; ? Svelte Svelte是一个全新的项目,为React和Angular等大型框架提供的现有解决方案提供了一种全新的,更轻量级的项目。 ?...CSSPIN CSSPIN是由纯CSS实现了旋转和Loading的库,并且提供单独下载某个组件,对于减少代码冗余很有效果。...这里有一篇关于它文章 Introducing the Conversational Form TypeIs JavaScript类型检查的库 代码实现很简洁 ;(function () { var...OP.typeis) { var toString, Regex; toString = OP.toString; Regex = /^\[object |...支持Markdown, 丰富的快捷键,友好的用户界面,用于编写和编辑内容。 需要编辑器的朋友可以试试 Eg.js 基于jQuery实现的包括UI交互,动画效果和各种其他实用程序的组件。
其他样式(XML,Vue,Angular,PHP)也可以使用,但不能保证正常使用。 插件地址:https://marketplace.visualstudio.com/items?...itemName=shd101wyy.markdown-preview-enhanced Markdown Preview Enhanced下载量 MarkDown预览 3、Image Preview(...itemName=unbug.codelf Codelf(变量起名神器) Codelf官方主页 Codelf使用 2、Prettier - Code formatter(自动格式化代码) 插件地址:https...andyyaldoo.vscode-json 快捷键 • cmd+alt+v,验证 • cmd+alt+b,格式化 • cmd+alt+u,压缩 • cmd+alt+',加转义字符 • cmd+alt+;,去转义字符 4、Regex...itemName=chrmarti.regex Regex Previewer 七、数据分析 1、Sort lines(文本排序) 插件地址:https://marketplace.visualstudio.com
其他样式(XML,Vue,Angular,PHP)也可以使用,但不能保证正常使用。 ? 在状态栏中显示标记的路径 ?...Markdown Preview Enhanced 在 VSCode 里编写 Markdown,支持预览 ? ? Image Preview 预览图片 ? ?...Regex Previewer 预览正则表达式效果 ? ? 七、前端开发 Auto Rename Tag 自动重命名 HTML或XML 标签 ? ?...Turbo Console Log 快速添加 console.log 信息,js debug 必备 快捷键 ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log alt
其他样式(XML,Vue,Angular,PHP)也可以使用,但不能保证正常使用。...在状态栏中显示标记的路径 Markdown Preview Enhanced 在 VSCode 里编写 Markdown,支持预览 Image Preview 预览图片 6开发效率 EditorConfig...vscode-json 操作美化 json 快捷键 cmd+alt+v,验证 cmd+alt+b,格式化 cmd+alt+u,压缩 cmd+alt+',加转义字符 cmd+alt+;,去转义字符 Regex...智能路径提示 npm Intellisense Turbo Console Log 快速添加 console.log 信息,js debug 必备 快捷键 ctrl + alt + l 选中变量之后,使用这个快捷键生成
其他样式(XML,Vue,Angular,PHP)也可以使用,但不能保证正常使用。...在状态栏中显示标记的路径 Markdown Preview Enhanced 在 VSCode 里编写 Markdown,支持预览 Image Preview 预览图片 六、开发效率...vscode-json 操作美化 json 快捷键 cmd+alt+v,验证 cmd+alt+b,格式化 cmd+alt+u,压缩 cmd+alt+',加转义字符 cmd+alt+;,去转义字符 Regex...npm Intellisense Turbo Console Log 快速添加 console.log 信息,js debug 必备 快捷键 ctrl + alt + l 选中变量之后,使用这个快捷键生成
在之前的文章中,我们为大家分别详细介绍了在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的“三部曲”,本文我们将为大家介绍该问题在Angular...中的实现。...mod=attachment&aid=MjM0MDU3fDk2NDQyNTkyfDE2NjM5MjI3NjF8NjI2NzZ8OTk3MTg%3D 应该注意的是,由于我们使用的是 Angular CLI...,我们需要确保它与 NPM 一起安装: npm install -g @angular/cli 由于我们将使用 SpreadJS 的 Excel 导入和导出功能,因此我们需要 ExcelIO 组件。...{ saveAs(blob, filename); }, function (error: any) { console.log(error); }); } 应该注意的是,我们使用了文件保护程序组件来实现导出功能
初步实现编辑更新功能 新建一个edit-note模块如下: ? 编辑模块 我们看看作者的新建页面用到了什么, 用到了ngx-bootstrap的弹出层。...简单实现 可以看出来还有很多不足,后面一点一点来完善。...返回列表后也没有自动更新 预览处也没实现实时预览 自动更新也没有实现 发布功能还没有实现 界面不够美观 返回列表更新 这个就要用到angular的父子页面传值。...测试父子页面传值 实现实时预览 我们之前设计是使用markdown语法来制作这个编辑功能。...预览有了,但是没有实时同步 要实现实时同步,我们使用angular的FormControl来帮忙 import { FormControl } from '@angular/forms'; import
services/app/NoteAppServer/GetNote', Delete: ApiHost + '/api/services/app/NoteAppServer/Delete' }; 现在使用...Observable.throw(new SwaggerException(message, status, response, headers, null)); } } } 使用服务...import { Component, OnInit, Injector } from '@angular/core'; import { appModuleAnimation } from '@shared...后面将要学习下如何使用,这显得我们的软件更加的国际化。 既然我们用不了代码生成器,那么完全照着抄写service是不是很累?
实现步骤 安装 tagbar 这里我们借助于 tagbar 插件实现导航窗格。...--langdef=markdown --langmap=markdown:.md --regex-markdown=/^#{1}[ \t]*([^#]+.*)/. \1/h,headings/ --regex-markdown...\1/h,headings/ --regex-markdown=/^#{3}[ \t]*([^#]+.*)/....\1/h,headings/ --regex-markdown=/^#{4}[ \t]*([^#]+.*)/....\1/h,headings/ 这表示提取 Markdown 文件里的一到六级标题,并使用空格缩进表示层次。
返回目录 之前写到使用.net core ABP 和Angular模板构建项目,创建后端服务。...文章地址:http://www.jianshu.com/p/fde1ea20331f 创建完成后的api基本是不能用的,现在根据我们自己的业务逻辑来实现后端服务。 部分业务逻辑流程图 ?.../summary> public long CreatorUserId { get; set; } /// /// 内容的数据类型 markdown...CreateMap(); CreateMap(); //使用自定义解析..."已发布" : "未发布"; } } } 使用授权 关于ABP授权详细的介绍和使用请看我的另一篇文章:http://www.jianshu.com/p/6e224f4f9705
在上一篇《使用Swagger2Markup实现API文档的静态部署(一):AsciiDoc》中,我们介绍了如何使用 Swagger2Markup将Swagger文档转换成AsciiDoc,再将AsciiDoc...该项目主要用来将Swagger自动生成的文档转换成几种流行的格式以便于静态部署和使用,比如:AsciiDoc、Markdown、Confluence。...通过插件输出方式类似,这里不做赘述,如何引入插件可以查看上一篇文章 静态部署 下面来看看Markdown和Confluence生成结果的使用。...Markdown的部署 Markdown目前在文档编写中使用非常常见,所以可用的静态部署工具也非常多,比如:Hexo、Jekyll等都可以轻松地实现静态化部署。...注意:所以 Insert选项中也提供了Markdown格式,我们也可以用上面生成的Markdown结果来使用,但是效果并不好,所以在Confluence中使用专门的生成结果为佳。
使用tinymce富文本编辑实现上传图片功能: 第一步:使用jquery.form.js插件; 自己去百度下载这个插件。...第二步:在angular2的目录中引入,如何引入: 在assets中建一个js文件夹,将jquery.form.js引入, 然后到.angular-cli.json 中添加代码 "scripts": [
Excel催化剂在2018年开始,陆续写出了230+篇高质量原创性文章,将Excel催化剂插件的开发过程及使用方法全方位地通过文字的方式给广大网友们分享了。...,总是难以实现所需的效果。...在网络上的教程中,大量的方法是mac和linux系统下的方法,这真难为了普通用户,注定这些方法很难让我们一般人去接触和使用。...柳暗花明之使用Typora软件实现markdown转PDF或WORD格式 Typora是一款现成的软件,用于markdown方书写和浏览功能,之前有听朋友介绍过,没有认真去研究过它的所有能力。...markdown的文本格式文件,比起其他文件来说,处理起来非常流畅,使用了几轮正则替换功能,将之前文章写得不规范和有结尾冗余的自我介绍内容一并清除掉,留下非常清爽的内容。
要开始使用新的正则表达式源生成器,只需将包含类型转换为分部(partial)类型,并使用 RegexGenerator 属性声明一个新的分部方法。...该方法将返回优化的 Regex 对象,源生成器将自动填充该方法的实现,并在更改模式或传递其他选项时自动更新。...例如: 之前: public class Foo{ public Regex regex = new Regex(@"abc|def", RegexOptions.IgnoreCase); public...然而,实现有意义的补全取决于单独的 dotnet 命令。...对于 .NET 7,新命令学习了如何提供 Tab 补全: 可用的模板名称(在 dotnet new 中) ❯ dotnet new angular angular
一直想写一个Angular2+的分享,但是没有一个好的切入点。...前段时间我向分享Chat的白宦成老师请教markdown的问题,他向我推荐Typora编辑器,我觉着这就是我一直想要的Markdown编辑器,于是我就想到了这个主题。...当然,我的水平一时是难于写出Typora那样的编辑器的,但人生已经如此艰难,大家就不要拆穿了,我主要是想通过一个实际应用分享一下Angular(文中提到的Angular指的都是Angular2+,实际版本是...Angular5)的开发过程,主要内容包括: Angular项目建立 Angular中的服务 Angular中使用第三方传统库 打包桌面版本 制作一个安装程序 Angular项目的默认语言是TypeScript
领取专属 10元无门槛券
手把手带您无忧上云